在CKEditor目录下有专门放插件的目录plugins,我们也把插件放这个目录下,新建一个文件夹pagination,然后在这个目录下新建一个文件plugin.js,输入下面内容:
CKEDITOR.plugins.add('pagination',{
init: function(editor) {
var pluginName = 'pagination';
editor.addCommand(pluginName,{exec:function(editor){editor.insertHtml("[NextPage]")}});
editor.ui.addButton('pagination', {
label: '分页',
command: pluginName
});
}
});
打开skins\kama\editor.css,加入以下代码:
.cke_skin_kama .cke_button_pagination .cke_icon{background:url(images/pagination.gif);}
在skins\kama\images目录下加上pagination.gif图片
然后,我们在ckeditor\config.js里注册这个插件,就能看到了。打开ckeditor\config.js,添加下面代码:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','flvPlayer','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];
config.extraPlugins = 'pagination';
};
分享到:
相关推荐
这篇博客文章“ckeditor 和 ckfinder集成,并解决ckeditor和jquery dialog冲突问题”主要探讨了如何将这两个组件整合在一起,以及如何处理可能出现的前端JavaScript库冲突。 首先,集成CKEditor和CKFinder的目的是...
用于CKEditor 4的WebSpellChecker Dialog插件将在2021年终止其寿命终止(EOL)。在我们的了解有关其终止时间表的更多信息。 CKEditor 4的WebSpellChecker对话框插件 WebSpellChecker对话框(WSC对话框)提供了无...
在上一篇博文《CKEDITOR 4 扩展插件制作》中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程。但是实际上,我们更多的应用,还是会在dialog中...
CKEditor 是一个功能强大且广泛使用的富文本编辑器,提供了许多功能强大的插件和配置选项。在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将详细介绍如何在 CKEditor 4.x 中自定义...
适用于Drupal 8的CKEditor对话框插件 注册插件的模块,该模块为其他插件提供对话框API,以从构建编辑器对话框。 安装 下载模块,将其放入modules文件夹,然后启用它。 执照 版权所有(c)2003-2015, -Frederico ...
在插件中添加按钮和命令,可以使用`CKEDITOR.dialog.add`和`CKEDITOR.dialogCommand`来创建对话框,然后通过`editor.addCommand`和`editor.ui.addButton`来注册命令并创建按钮。例如,添加“脚注”功能: ```...
4.3版本可能包含了许多预装的插件,如“basicstyles”用于基本的文本格式化,“dialog”用于弹出对话框,“font”用于字体选择,“justify”用于文本对齐等。 3. **skins** 文件夹:包含了不同外观主题,允许用户...
CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton('Footnote', { label: 'Footnote or ...
在页面中引用CKEditor之前,需要确保页面已经加载了jQuery库以及可能需要的插件文件,例如`jquery-ui.custom.js`文件用于自定义对话框。 #### 2. 引用CKEditor 在HTML页面中,需要引用CKEditor的JavaScript文件,并...
本文将介绍如何使用SyntaxHighlighter和CKEditor插件,来实现代码语法高亮的功能,以便于在网页上插入代码时可以具有良好的展示效果。 首先,我们需要了解SyntaxHighlighter的基本信息。SyntaxHighlighter是一款...
CKEditor是一款广泛使用的开源富文本编辑器,它提供了丰富的功能,包括插入图片、链接、表格等,使得在网页上创建和编辑内容变得简单易行。本文将深入探讨如何定制CKEditor中的图片上传框,以便更好地适应不同的项目...
要使用它,您需要将上传插件(在插件文件夹内)复制到 CKEditor 插件文件夹。 然后,您需要进行配置。 在“index.html”中,您可以看到我制作的示例: CKEDITOR.replace( 'editor', { // 添加上传插件(检查...
本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中...
除了CKEditor本身,你还可以查看相关文章,了解CKEditor的更多配置和开发细节,例如CKEditor4的中文说明文档、FCKeditor的精简配置、CKEditor4和CKFinder的安装配置教程,以及CKEditor扩展插件制作等。这些资源可以...
2. 对话框(Dialog):可以创建模态或非模态对话框,用于显示信息、警告、确认或提供输入,支持自定义标题、按钮和大小。 3. 拖放功能(Draggable):使元素具备拖动行为,常用于实现窗口拖动、列表排序等功能。 4...
1. **修改CKEditor插件**: 首先,我们需要对CKEditor的插件文件夹下的JS源码进行修改。以image插件为例,找到对应的配置部分,如下所示: ```javascript // 原始代码 //{type:'button',id:'browse',align:'...
值得注意的是,由于FCKeditor 2.6已较为陈旧,可能需要考虑升级到最新版本的富文本编辑器,如CKEditor 4或CKEditor 5,它们提供了更好的API和更丰富的多媒体支持。此外,还可以考虑集成现有的第三方服务,如YouTube...
1. `js` 文件夹:存放JavaScript代码,可能包括主应用脚本、jQuery插件、CKEditor配置等。 2. `css` 文件夹:存放CSS样式文件,用于定义表单构建器的外观和布局。 3. `images` 或 `img` 文件夹:存储图标和其他图像...