`

ckeditor简单插件(非dialog)

阅读更多

在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冲突问题

    这篇博客文章“ckeditor 和 ckfinder集成,并解决ckeditor和jquery dialog冲突问题”主要探讨了如何将这两个组件整合在一起,以及如何处理可能出现的前端JavaScript库冲突。 首先,集成CKEditor和CKFinder的目的是...

    ckeditor-plugin-wsc:用于CKEditor 4的WSC对话框插件是用于在CKEditor 4的单独弹出窗口中检查拼写和语法的插件。

    用于CKEditor 4的WebSpellChecker Dialog插件将在2021年终止其寿命终止(EOL)。在我们的了解有关其终止时间表的更多信息。 CKEditor 4的WebSpellChecker对话框插件 WebSpellChecker对话框(WSC对话框)提供了无...

    手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

    在上一篇博文《CKEDITOR 4 扩展插件制作》中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程。但是实际上,我们更多的应用,还是会在dialog中...

    ckeditor_4.x自定义按钮控件详细配置

    CKEditor 是一个功能强大且广泛使用的富文本编辑器,提供了许多功能强大的插件和配置选项。在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将详细介绍如何在 CKEditor 4.x 中自定义...

    ckeditor_dialog:适用于Drupal 8的CKEditor'dialog'插件

    适用于Drupal 8的CKEditor对话框插件 注册插件的模块,该模块为其他插件提供对话框API,以从构建编辑器对话框。 安装 下载模块,将其放入modules文件夹,然后启用它。 执照 版权所有(c)2003-2015, -Frederico ...

    CKEditor二次开发手册 超详细哦!

    在插件中添加按钮和命令,可以使用`CKEDITOR.dialog.add`和`CKEDITOR.dialogCommand`来创建对话框,然后通过`editor.addCommand`和`editor.ui.addButton`来注册命令并创建按钮。例如,添加“脚注”功能: ```...

    ckeditor_4.3_full

    4.3版本可能包含了许多预装的插件,如“basicstyles”用于基本的文本格式化,“dialog”用于弹出对话框,“font”用于字体选择,“justify”用于文本对齐等。 3. **skins** 文件夹:包含了不同外观主题,允许用户...

    CKEditor二次开发手册

    CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton('Footnote', { label: 'Footnote or ...

    ckeditor自定义按钮

    在页面中引用CKEditor之前,需要确保页面已经加载了jQuery库以及可能需要的插件文件,例如`jquery-ui.custom.js`文件用于自定义对话框。 #### 2. 引用CKEditor 在HTML页面中,需要引用CKEditor的JavaScript文件,并...

    SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    本文将介绍如何使用SyntaxHighlighter和CKEditor插件,来实现代码语法高亮的功能,以便于在网页上插入代码时可以具有良好的展示效果。 首先,我们需要了解SyntaxHighlighter的基本信息。SyntaxHighlighter是一款...

    有关CKEditor图片上传框的定制

    CKEditor是一款广泛使用的开源富文本编辑器,它提供了丰富的功能,包括插入图片、链接、表格等,使得在网页上创建和编辑内容变得简单易行。本文将深入探讨如何定制CKEditor中的图片上传框,以便更好地适应不同的项目...

    CKEditor-upload:我制作了一个插件将图像上传到 WYSIWYG CKEditor

    要使用它,您需要将上传插件(在插件文件夹内)复制到 CKEditor 插件文件夹。 然后,您需要进行配置。 在“index.html”中,您可以看到我制作的示例: CKEDITOR.replace( 'editor', { // 添加上传插件(检查...

    CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中...

    限制ckeditor上传图片文件大小的方法

    除了CKEditor本身,你还可以查看相关文章,了解CKEditor的更多配置和开发细节,例如CKEditor4的中文说明文档、FCKeditor的精简配置、CKEditor4和CKFinder的安装配置教程,以及CKEditor扩展插件制作等。这些资源可以...

    jquery插件集合

    2. 对话框(Dialog):可以创建模态或非模态对话框,用于显示信息、警告、确认或提供输入,支持自定义标题、按钮和大小。 3. 拖放功能(Draggable):使元素具备拖动行为,常用于实现窗口拖动、列表排序等功能。 4...

    将CKfinder 整合进 CKEditor3.0的方法

    1. **修改CKEditor插件**: 首先,我们需要对CKEditor的插件文件夹下的JS源码进行修改。以image插件为例,找到对应的配置部分,如下所示: ```javascript // 原始代码 //{type:'button',id:'browse',align:'...

    如何在FCKeditor 2.6中添加插入视频和音频功能

    值得注意的是,由于FCKeditor 2.6已较为陈旧,可能需要考虑升级到最新版本的富文本编辑器,如CKEditor 4或CKEditor 5,它们提供了更好的API和更丰富的多媒体支持。此外,还可以考虑集成现有的第三方服务,如YouTube...

    form_builder:jQuery OOP、jQuery UI、CKEditor、基于 Ajax 的表单构建应用程序

    1. `js` 文件夹:存放JavaScript代码,可能包括主应用脚本、jQuery插件、CKEditor配置等。 2. `css` 文件夹:存放CSS样式文件,用于定义表单构建器的外观和布局。 3. `images` 或 `img` 文件夹:存储图标和其他图像...

Global site tag (gtag.js) - Google Analytics