在 CKEditor 中创建自己的命令按钮

• 下载演示 - 8.2 MB

引言

CKEditor 是广大开发者非常流行的文本编辑器。它提供了多种配置和自定义方式，以最适合您的应用程序。我们通常的做法是选择一个最佳版本的 CKEditor，然后通过修改其 config.js 文件或使用 在线工具栏配置器 来选择要使用的功能。但您是否知道，通过添加自己的按钮并处理特定的业务需求，您可以对 CKEditor 做更多事情。本文将向您展示如何实现。

背景

在开始之前，您需要具备以下先备知识：

• Web 开发基础知识
• 您应该了解 CKEditor 是什么，如何下载并将其集成到您的网站中。
• CKEditor 的基本命令，例如：如何使编辑器可见，如何修改 config 文件。

如果您不熟悉该编辑器，请先阅读 文档。

示例项目

此项目是一个演示版本，您可以通过它学习如何自定义 CKE 以满足您的业务需求。它不是一个专业的实际项目，因此没有数据验证，我们假设所有输入都将是正确的格式。

设想您在一个日报社工作，负责发布每日天气预报。您的合作伙伴公司将您国家的天气信息数据发送给您。他们的温度数据使用华氏度，但在您的国家摄氏度更受欢迎。每次收到数据，您都需要使用以下公式计算和转换 °F 到 °C：T_(°C) = (T_(°F) - 32) × 5/9 。想法是创建一个自定义按钮在您的编辑器上，您可以轻松地选中类似“93°F”的文本，然后单击按钮将其转换为 °C。这比复制粘贴到另一个工具更快、更方便。

准备就绪

您应该准备好编辑器。

<textarea id="editor"></textarea>
 
<script src="~/Scripts/ckeditor/ckeditor.js"></script>
 
<script>
    var editor = CKEDITOR.replace('editor');
</script>

添加按钮

要向 CKEditor 添加一个新的自定义按钮，请使用此代码：

 editor.ui.addButton('ConvertFtoC', //button name
        {
            label: 'Convert Fahrenheit to Celsius', //button tooltips 
                       // (will show up when mouse hovers over the button)
            command: 'cmd_convert_F_to_C', // command which is fired to 
                                           // handle event when the button is clicked
            toolbar: 'others', //name of the toolbar group in which the new button is added
            icon: '/Content/images/convert.svg' //path to the button's icon
        }
    );

Command 可以在添加按钮之前或之后声明。

Toolbar 是插入按钮的工具栏组的名称。您可以在 此链接 查看一些工具栏名称。

添加命令

要添加一个新命令来处理按钮点击事件，请使用此代码：

editor.addCommand("cmd_convert_F_to_C", {
        exec: function (edt) {
            //Do something here            
        }
    });

addCommand 方法的第一个参数是命令名称。它必须与分配给新按钮的命令名称相同。

现在，当您单击名为 ConvertFtoC 的按钮时，将执行名为 cmd_convert_F_to_C 的命令。

如果您的代码有效，您应该会看到新按钮出现；否则，请检查您的代码并修复错误。

获取高亮文本

要获取高亮文本，请使用此代码：

var mySelection = editor.getSelection();
var selectedText;

//Handle for the old Internet Explorer browser
if (mySelection.getType() == CKEDITOR.SELECTION_TEXT) {
    if (CKEDITOR.env.ie) {
        mySelection.unlock(true);
        selectedText = mySelection.getNative().createRange().text;
    } else {
        selectedText = mySelection.getNative();
    }
}

var plainSelectedText = selectedText.toString();// JavaScript source code

请注意……

selectedText = mySelection.getNative(); 

…返回一个 HTML DOM 元素。这意味着我们可以像对待元素一样处理它，并正常修改它，例如添加属性或更改其 CSS 样式属性。要获取选区的纯文本，请使用 ToString 方法。

替换高亮文本

要用新文本替换高亮文本，只需将新文本插入到我们的编辑器中。如果有文本被高亮，它将被新文本替换，就像我们高亮文本并开始键入一样。

您还可以创建新的 HTML 元素来插入，而不仅仅是纯文本。HTML 元素允许我们进行更具创造性的工作，这意味着我们可以添加 CSS 样式，为其提供一些属性（例如 id 以便检索），以及您需要修改元素的一切。在这种情况下，我创建了一个 span 标签并将其插入以替换旧的高亮文本。

var insertedElement = editor.document.createElement('span');

insertedElement.setAttribute('style', 'color: red');

insertedElement.appendText("Hello world!");

//replace reselected text by the new span element
editor.insertElement(insertedElement);

添加一些计算逻辑代码来将华氏度转换为摄氏度，最后您的命令应该如下所示：

editor.addCommand("cmd_convert_F_to_C", {
    exec: function (edt) {
        var mySelection = editor.getSelection();
        var selectedText;

        //Handle for the old Internet Explorer browser
        if (mySelection.getType() == CKEDITOR.SELECTION_TEXT) {
            if (CKEDITOR.env.ie) {
                mySelection.unlock(true);
                selectedText = mySelection.getNative().createRange().text;
            } else {
                selectedText = mySelection.getNative();
            }
        }
        var plainSelectedText = selectedText.toString();

        //Process converting
        var regex = /[+-]?\d+(\.\d+)?/g; //regex for float number

        if (plainSelectedText.match(regex) != null) { //check if there is a float number 
                                                      //in selected text

            var fahrenheit = plainSelectedText.match(regex).map(function (v) 
                { return parseFloat(v); });

            if (!isNaN(fahrenheit)) {

                var insertedElement = editor.document.createElement('span');

                var result = (fahrenheit - 32) * (5 / 9);

                //37 °C is too hot! warn user by red text
                if (result > 37) {
                    insertedElement.setAttribute('style', 'color: red');
                }

                insertedElement.appendText(result + " °C");

                //replace reselected text by the new span element
                editor.insertElement(insertedElement);
            }
        }

    }
});

由于所有这些都是用 JavaScript 编写的，这意味着您可以使用此命令做更多的事情，例如操作 DOM 元素或发送 AJAX 请求。

查看您的结果

复制一些数据，尝试选择…°F 数据，然后单击按钮查看结果。新的 °C 值将被计算出来，然后替换旧的 °F 值。

这就是我们取得的成果：

关注点

CKEditor 易于使用，提供了多种自定义方法，并支持大量功能。通过阅读其文档和进行研究，您会发现它不仅仅是一个命令按钮，还有许多可以更高级地实现的功能。您甚至可以用自己的代码替换其默认事件处理程序（例如：您可以通过重写默认处理程序来改变单击“B”按钮时加粗文本的方式）。我的示例项目只是一个小例子，可以帮助您理解这一点，但通过深入研究，我们可以优化其功能，并在编辑文本方面提供极大的帮助。

历史

• 2019年7月7日：初次发布