目录
介绍
背景
示例项目
做好准备
添加按钮
添加命令
获取突出显示的文本
替换突出显示的文
查看结果
兴趣点
- 下载演示 - 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。它比使用复制和粘贴到其他工具更快，更方便。
做好准备您应该让编辑器准备好工作。
var editor = CKEDITOR.replace('editor');
要向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
