确保我们理解楼上提问的意思后，我们可以开始撰写 FCKEditor 添加新按钮和功能的修改方法攻略了。
步骤一：下载 FCKEditor 的源代码
首先需要下载 FCKEditor 的源码，可以前往官方网站下载。
步骤二：添加自定义代码
在 fckeditor.js 文件中，添加我们需要添加的自定义代码。这个部分需要对 Javascript 的语法有一定的了解，比如创建 DOM 元素，绑定事件等。
下面是一个例子，实现在工具栏添加一个插入图片的按钮：
var myButton = new CKEDITOR.menuItem({
label : 'Insert Image',
icon : 'image.png',
command : 'insertImage'
});
CKEDITOR.config.toolbar_Full.push('myButton');
CKEDITOR.config.extraPlugins = 'insertImage';
CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_BR;
这段代码做了几个操作：
1.创建了一个名为 myButton 的菜单项，这个菜单项包含一个 label 和一个 icon，它的 command 属性指定了在点击菜单项后需要执行的命令。
2.把 myButton 菜单项添加到 toolbar_Full 工具栏中。
3.在 extraPlugins 属性中指定了插入图片的插件。
4.将 shift + Enter 键的行为设置为 CKEDITOR.ENTER_BR，即换行。
这是一个简单的例子，针对不同的需求可以修改代码。
步骤三：更新 FCKEditor 的设置并发布
更新设置之后，需要编译并发布 FCKEditor。可以使用官方提供的构建工具对 FCKEditor 进行构建。输出的文件在 build 目录中，将这些文件复制到网站上即可。需要注意的是，构建时需要指定相应的插件，以及修改后的配置文件。
示例一：在 FCKEditor 中添加字数统计功能
var wordCount = {
setup: function (editor) {
editor.on('key', function(evt){
var text = editor.getData(),
count = CKEDITOR.tools.trim(text.replace(/<[^>]*>/g, '')).length;
editor.getCommand('word_count').setState(CKEDITOR.TRISTATE_OFF);
if (count > 0) {
editor.getCommand('word_count').setState(CKEDITOR.TRISTATE_ON);
}
});
},
init: function (editor) {
editor.ui.addButton('word_count', {
label: 'Word Count',
title: 'Word Count',
icon: 'https://cdn-icons-png.flaticon.com/512/2899/2899803.png',
command: 'word_count'
});
editor.addCommand('word_count', {
exec: function (editor) {
var text = editor.getData(),
cleanText = CKEDITOR.tools.trim(text.replace(/<[^>]*>/g, '')),
count = cleanText.length,
tempDoc = document.implementation.createHTMLDocument(''),
tempDiv = tempDoc.createElement('div'),
words = 0,
cleanTextArr;
if (count > 0) {
words = CKEDITOR.tools.trim(cleanText).split(/\s+/).length;
cleanTextArr = CKEDITOR.tools.trim(cleanText).split(/\n/);
for (var i = 0; i < cleanTextArr.length; i++) {
if (CKEDITOR.tools.trim(cleanTextArr[i]) === '') {
words -= 1;
}
}
}
tempDiv.innerHTML = '<table class="cke_dialog_ui_input_label">'+words+' words, '+count+' characters</table>';
editor.insertHtml(tempDiv.innerHTML);
}
});
}
};
CKEDITOR.plugins.add('word_count', wordCount);
这个示例为编辑器添加了一个统计字数的功能。具体来说，这个示例中的代码定义了一个名为 wordCount 的插件，在初始化过程中添加了一个名为 word_count 的按钮，当按下这个按钮时会弹出一个包含字数统计结果的弹窗。
示例二：在 FCKEditor 中添加插入表格的按钮
// 参考了 fckplugin.js 中的 table 模块的代码，做了稍微的修改。
CKEDITOR.plugins.add('table_button', {
icons: 'table.png',
lang: ['en', 'zh-cn'],
init: function (editor) {
// 插入新表格
editor.addCommand('insert_table', {
exec : function( editor ) {
editor.insertHtml( '<table border="1" cellpadding="0" cellspacing="0">' +
'<tr><td> </td></tr>' +
'</table>');
}
});
// 增加一行
editor.addCommand('insert_table_row', {
exec : function( editor ) {
var td = '<td> </td>',
row = '<tr>';
for (var i = 0; i < 5; ++i)
row += td;
row += '</tr>';
editor.focus();
var sel = editor.getSelection();
var element = sel.getStartElement();
if ( element && element.getAscendant( 'table', true ) ) {
var table = element.getFirst( 'table' ),
tbody = table.getFirst( 'tbody' );
tbody.appendHtml( row );
}
}
});
// 增加一列
editor.addCommand('insert_table_col', {
exec : function( editor ) {
editor.focus();
var sel = editor.getSelection();
var element = sel.getStartElement();
if ( element && element.getAscendant( 'table', true ) ) {
var table = element.getFirst( 'table' ),
tbody = table.getFirst( 'tbody' );
var rows = tbody.getChildren(),
len, i;
for ( i = 0, len = rows.length; i < len; i++ ) {
var td = CKEDITOR.dom.element.createFromHtml( '<td> </td>' );
rows[i].append( td );
}
}
}
});
editor.ui.addButton('Table', {
label: editor.lang.table.toolbar,
command: 'show_table_menu',
icon: 'table'
});
// 弹出菜单
editor.addMenuGroup('table', 10);
editor.addMenuItem('insert_table', {
label: editor.lang.table.menu,
command: 'insert_table',
group: 'table',
icon: 'table.png'
});
editor.addMenuItem('insert_table_row', {
label: 'Insert row',
command: 'insert_table_row',
group: 'table',
icon: 'table_row.png'
});
editor.addMenuItem('insert_table_col', {
label: 'Insert column',
command: 'insert_table_col',
group: 'table',
icon: 'table_col.png'
});
editor.addCommand('show_table_menu', {
exec: function (editor) {
var menu = {insert_table: CKEDITOR.TRISTATE_OFF, insert_table_row: CKEDITOR.TRISTATE_OFF, insert_table_col: CKEDITOR.TRISTATE_OFF},
sel,
element;
editor.focus();
sel = editor.getSelection();
element = sel.getStartElement();
if (element && element.getAscendant('table', true)) {
menu.insert_table_row = CKEDITOR.TRISTATE_ON;
menu.insert_table_col = CKEDITOR.TRISTATE_ON;
}
editor.contextMenu(event, menu);
},
async: true
});
editor.contextMenu.addListener(function (element, selection) {
if (!element || element.getAscendant('table', true) == null)
return null;
var menu = {insert_table_row: CKEDITOR.TRISTATE_OFF, insert_table_col: CKEDITOR.TRISTATE_OFF};
menu.insert_table_row = CKEDITOR.TRISTATE_ON;
menu.insert_table_col = CKEDITOR.TRISTATE_ON;
return menu;
});
}
});
这个示例实现了一个插入表格的按钮，可以让用户在编辑器中插入表格，并进行一些简单的调整，例如增加行列。另外提供了右键菜单方便用户进行表格操作。
这个例子中，我们定义了一个名为 table_button 的插件，这个插件在初始化过程中添加了一个名为 Table 的按钮。当用户点击这个按钮时，编辑器会弹出一个菜单，其中包括插入表格、添加行、添加列等操作。用户可以通过这些操作来构建自己需要的表格。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：FCK编辑器（FCKEditor）添加新按钮和功能的修改方法 - Python技术站
微信扫一扫 
支付宝扫一扫 