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

目录

介绍

背景

示例项目

做好准备

添加按钮

添加命令

获取突出显示的文本

替换突出显示的文

查看结果

兴趣点

---

• 下载演示 - 8.2 MB

介绍

CKEditor是大多数开发人员非常流行的文本编辑器。它提供了许多方法来配置和自定义，以便为您的应用程序中提供最适合的编辑器。我们经常做的是选择最佳版本的CKEditor，然后通过修改config.js文件或使用Online Toolbar Configurator选择要使用的功能。但是，您不知道通过添加自己的按钮并处理您的特定业务，您可以使用CKEditor做更多事情。本文将向您展示如何。

背景

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

• 关于Web开发的基础知识
• 您应该知道CKEditor是什么，如何下载并将其嵌入您的网站
• 使用CKEditor的基本命令如下：如何使编辑器可见，如何修改配置文件

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

示例项目

该项目是一个演示版本，您可以在其中学习如何自定义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”按钮时使文本更粗的方式）。我的示例项目只是帮助您理解这一点的一个小项目，但通过深入研究，我们可以优化它的功能并帮助我们编辑文本。

 

原文地址：https://www.codeproject.com/Articles/5161586/Create-your-own-command-button-in-CKEditor