精华内容
下载资源
问答
  • ckeditor自定义插件
    2010-04-03 12:34:30

    搞了一上午,最后发现原因原来出在某路径少打一个“/”,真是害人不浅。

     

    本次只是熟悉一下写ckeditor插件的流程,所以用的是samples里api_dialog.js的代码作为弹出窗口。

     

    首先第一步,在ckeditor/plugins目录下新建文件夹作为插件目录,我新建了一个myplugin文件夹。

     

    然后在myplugin文件夹下新建两个东西,一个是plugin.js文件,另一个是dialogs文件夹。

     

    plugin.js内容如下:

     

    CKEDITOR.plugins.add('myplugin',
    	{		
    		requires : ['dialog'],
    		init : function (editor)
    		{
    			var pluginName = 'myplugin';
    			
    			//加载自定义窗口,就是dialogs前面的那个/让我纠结了很长时间
    			CKEDITOR.dialog.add('myDialog',this.path + "/dialogs/mydialog.js");
    			
    			//给自定义插件注册一个调用命令
    			editor.addCommand( pluginName, new CKEDITOR.dialogCommand( 'myDialog' ) );
    			
    			//注册一个按钮,来调用自定义插件
    			editor.ui.addButton('MyButton',
    					{
    						//editor.lang.mine是我在zh-cn.js中定义的一个中文项,
    						//这里可以直接写英文字符,不过要想显示中文就得修改zh-cn.js
    						label : editor.lang.mine,
    						command : pluginName
    					});
    		}
    	}
    );

     

     

    然后在dialogs文件夹下新建一个mydialog.js,内容如下:

     

    CKEDITOR.dialog.add( 'myDialog', function( editor )
    {
    	return { 
    		title : 'My Dialog',
    		minWidth : 400,
    		minHeight : 200,
    		contents : [
    			{
    				id : 'tab1',
    				label : 'First Tab',
    				title : 'First Tab',
    				elements :
    				[
    					{
    						id : 'input1',
    						type : 'text',
    						label : 'Input 1'
    					}
    				]
    			}
    		]
    	};
    } );

     

     然后修改config.js文件以配置我的自定义插件,config.js内容如下:

     

    CKEDITOR.editorConfig = function( config )
    {
    	config.language = 'zh-cn';
    	config.skin = 'office2003';
    	config.width = 800; 
    	config.height = 300; 
    	config.removePlugins = 'elementspath';
    	config.extraPlugins = 'myplugin'; //新建插件
    	
    	config.toolbar= 
    
    		[ 
    
    		['unlink','-','Save','unlink','Preview','-','Templates'], 
    
    		['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'], 
    
    		['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
    
    		'/', 
    
    		['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
    
    		['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
    
    		['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
    
    		['Link','Unlink','Anchor'], 
    
    		['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar', 
    
    		'PageBreak'], 
    
    		'/', 
    
    		['Styles','Format','Font','FontSize'], 
    
    		['TextColor','BGColor'], 
    
    		['Maximize','ShowBlocks','-','About','-','MyButton'] //我的按钮在最后
    
    		]; 
    
    	
    
    };

     

    然后就ok了。在作出修改之后最好清下ie缓存再刷新页面。

    更多相关内容
  • ckeditor自定义插件

    2019-04-12 01:15:10
    NULL 博文链接:https://kingj.iteye.com/blog/1700931
  • Ckeditor自定义插件

    2013-05-26 18:14:31
    CKeditor 自定义插件 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数。
  • ckeditor是一款功能强大的富文本编辑工具,这篇文章主要为大家详细介绍了ckeditor自定义插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中...
  • 包括用于设置外部方法以将内容插入编辑器的自定义插件: 插入连结 插入图片 插入片段 < textarea class =" editor " > </ textarea > < script src =" ../build/ckeditor.js " > </ script &...
  • 这里会提到两种添加自定义按钮的方式,都是基于创建插件添加的。

    这里会提到两种添加自定义按钮的方式,都是基于创建插件添加的。

    1.创建基本插件

    关于创建基本插件官方有一个小案例,大家可以去看一看:用 20 行代码创建 CKEditor 4 插件

    CKEDITOR.plugins.add('horizontaldashed', {
      icons: 'horizontaldashed', // 图标
      init: function (editor) {
        editor.addCommand('horizontaldashed', { // 创建插件,插件的名称会在启用插件的时候使用
          exec: function (editor) {
            // 点击按钮后悔触发回调
            editor.insertHtml('<hr style="border: 1px dashed" />'); // 向富文本中添加的文本
          }
        });
        editor.ui.addButton('HorizontalDashed', { // 添加按钮,按钮的名称会在添加按钮的时候使用
          label: '插入水平虚线', // 鼠标悬浮在按钮上时显示的文字
          command: 'horizontaldashed', // 这里写插件的名称
          toolbar: 'insert' // 按钮的位置,也可以在启用的时候设置位置
        });
      }
    });
    

    大概效果如下:
    在这里插入图片描述

    2.下拉菜单形式的插件

    CKEDITOR.plugins.add('templecustomize', {
      icons: 'templecustomize', // 图标
      init: function (editor) {
        editor.ui.addRichCombo('TempleCustomize', { // 按钮名称,启用按钮时的名称
          label: '模版', // 下拉菜单的名称
          title: '模版',
          toolbar: 'insert',
          panel: {
            css: ['/ckeditor/plugins/templecustomize/css/index.css'], // 插件的样式
            multiSelect: false,
            attributes: { 'aria-label': '模版' }
          },
          init: function () {
            // 点击插件按钮时会触发回调
            this.startGroup('选择模板'); // 下拉分组
            this.add('value', 'label') // 下拉的选项
          },
          onClick: function (value) {
            // 点击下拉选项时会触发回调
            editor.insertHtml(value)
          }
        })
      }
    });
    
    

    效果如下:
    在这里插入图片描述

    这里需要注意的是,无论哪种插件,插件的名称和图标的名称是要和文件夹名称保持一致的,另外文件夹内的结构也是固定的,自定义插件要放在public\ckeditor\plugins\路径下,icons中是要显示的图标,plugin.js是具体代码
    在这里插入图片描述

    展开全文
  • 首先下载好ckeditor5的自定义构建项目,在src目录下新建plugins文件夹存放我们自己写的插件 这里我编写一个emoji表情插件,做为参考,目录如下: 其中index.js内容 import { Plugin } from 'ckeditor5/src/...

    官方文档:https://ckeditor.com/docs/ckeditor5

    查看了官网文档,发现对怎么编写插件写的不是特别明白,于是翻阅源码,举一反三

    首先下载好ckeditor5的自定义构建项目,在src目录下新建plugins文件夹存放我们自己写的插件

    这里我编写一个emoji表情插件,做为参考,目录如下:

    其中index.js内容

    import { Plugin } from 'ckeditor5/src/core';
    
    
    export default class SpecialCharactersEmoji extends Plugin {
    	/**
    	 * @inheritDoc
    	 */
    	static get pluginName() {
    		return 'SpecialCharactersEmoji';
    	}
    	/**
    	 * @inheritDoc
    	 */
    	init() {
    		const editor = this.editor;
    		const t = editor.t;
    
            editor.plugins.get("SpecialCharacters").addItems("Emoji", [
                { title: t("smiley face"), character: "😊" },
                { title: t("rocket"), character: "🚀" },
                { title: t("wind blowing face"), character: "🌬️" },
                { title: t("floppy disk"), character: "💾" },
                { title: t("heart"), character: "❤️" },
              ]);
        }
    
    
    }
    

     title即为符号名称,这里指表情的名称,t()这个方法是ckeditor5专门用来做国际化字符转换的方法,其主要目的是将zh-cn.po文件中的msgid与之匹配,并拿到msgstr替换

    zh-cn.po文件内容如下:

    # Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
    #
    #                                     !!! IMPORTANT !!!
    #
    #         Before you edit this file, please keep in mind that contributing to the project
    #                translations is possible ONLY via the Transifex online service.
    #
    #         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
    #
    #                   To learn more, check out the official contributor's guide:
    #     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
    #
    msgid ""
    msgstr ""
    "Language-Team: Chinese (China) (https://www.transifex.com/ckeditor/teams/11143/zh_CN/)\n"
    "Language: zh_CN\n"
    "Plural-Forms: nplurals=1; plural=0;\n"
    
    
    msgctxt "A label for the \"smiley face\" symbol."
    msgid "smiley face"
    msgstr "笑脸"
    
    msgctxt "A label for the \"rocket\" symbol."
    msgid "rocket"
    msgstr "火箭"
    
    msgctxt "A label for the \"wind blowing face\" symbol."
    msgid "wind blowing face"
    msgstr "吹气"
    
    msgctxt "A label for the \"floppy disk\" symbol."
    msgid "floppy disk"
    msgstr "软盘"
    
    msgctxt "A label for the \"heart\" symbol."
    msgid "heart"
    msgstr "心"
    
    

    接着最外面还有一个contexts.json文件别忘了

    {
      "smiley face": "A label for the \"smiley face\" symbol.",
      "rocket": "A label for the \"rocket\" symbol.",
      "wind blowing face": "A label for the \"wind blowing face\" symbol.",
      "floppy disk": "A label for the \"floppy disk\" symbol.",
      "heart": "A label for the \"heart\" symbol."
    }
    

    最后说一下这个po文件怎么才能被解析,说到这里,我们不得不说一下webpack.config.js文件中的CKEditorWebpackPlugin插件,这个插件在webpack打包ckeditor5启着重要最用,看看里面的参数

     看到options中定义了很多参数,关于这些参数代表的含义我在github上翻译了一下

    那么可以看到packageNamesPattern参数默认存在一个正则表达式,目的就是在wepback打包时,会扫描所有ckeditor5-开头的文件夹下的所有文件,那么看到这里你是否明白了?

    回到我写的插件目录

    只要将插件的目录重命名为ckeditor5-开头的文件夹,那么CKEditorWebpackPlugin插件便会在打包时自动扫描到po文件。

    这里在说一下怎么验证po文件是否生效。在打包完成后,在build目录下生成了ckeditor.js文件,打开搜索一下你翻译的emoji表情名称,比如"笑脸",如果你能搜到就成功啦~

     

     

    展开全文
  • CKEditor5-plugins基于ckeditor5的,适用于自定义构建的插件包。要使用此插件包,则不建议直接使用官方的classic、document、inline、balloon等构建,建议自定义构建features 包含功能├── src│ ├── clear-...
  • 本节只讲在CKEditor实现服务器图片的插入插件实现方法。 CKEditor版本是 ## CKEditor 4.4.4 第一、定义插件 1.在ckeditor\plugins文件夹下,新建serverimg文件夹, 2.在serverimg下新建plugin.js 文件, CKEDITOR....
  • 主要介绍了手把手教你 CKEDITOR 4 扩展插件制作,结合具体实例形式详细分析了CKEditor4插件制作的步骤与相关操作注意事项,需要的朋友可以参考下
  • ckeditor自定义插件在网上查了查,感觉还是比较好用的,写了一个一键给编辑器中的所有图片添加链接。  在ckeditor目录下的plugins下建以插件为名的文件夹,在里边建plugin.js文件,再建立一个dialogs文件夹,里边...

      ckeditor自定义插件在网上查了查,感觉还是比较好用的,写了一个一键给编辑器中的所有图片添加链接。

      在ckeditor目录下的plugins下建以插件为名的文件夹,在里边建plugin.js文件,再建立一个dialogs文件夹,里边建一个插件名.js文件。我的插件名为alink,目录结构:

    images文件夹里边放按钮图标,当然也可以不要用文字显示。

    alink.js:

    (function() {
        CKEDITOR.dialog.add("alink", 
        function(a) {
            return {
                title: '一键添加图片链接',
                minWidth: 300,
                minHeight: 100,
                contents: [              
                    {
                        id: 'alink',
                        label: 'code1',
                        title: 'code1',
                        elements: //elements是定義dialog內部的元件
                            [
                                {
                                    id: 'alinkcontent',
                                    type: 'text',
                                    label: '请输入图片链接',
                                    'default': ''
                                }   
                            ]
                    }
                ],
                onOk: function() {
                    //点击确定按钮后的操作  
                    alink = this.getValueOf('alink', 'alinkcontent');
                    var content=a.getData();
                    var Re=/(<img[^>]*>)/gi;
                    content=content.replace(Re,'<a href='+alink+'>$1</a>');
                    console.log(content)
                    a.setData(content)
                }
            }
        })
    })();

    plugin,js:

    (function() {
        CKEDITOR.plugins.add("alink", {
            requires: ["dialog"],
            init: function(a) {
                a.addCommand("alink", new CKEDITOR.dialogCommand("alink"));
                a.ui.addButton("alink", {
                    label: "一键添加图片链接",//调用dialog时显示的名称
                    command: "alink",
                    icon: this.path + "images/alink.jpg"//在toolbar中的图标
                });
                CKEDITOR.dialog.add("alink", this.path + "dialogs/alink.js")
            }
        })
    })();

    之后再在ckeditor中的config.js中添加一行代码:config.extraPlugins="alink";//注册插件,之后就可以在页面看到了。当然这时如果有图片就是图片图标显示,如果没有图片就是空白,用文字(显示文字是plugin.js里边的label内容)显示需要在插入编辑器的页面上添加如下css代码:

    /*批量添加链接*/
    .cke_button__alink .cke_button_icon{ 
           display:none !important; 
     }
    .cke_button__alink .cke_button_label { 
           display:inline !important; 
    }

    一键导入微信文章也是一样的做法,但这个需要后端一起实现。

     

    转载于:https://www.cnblogs.com/demeter/p/9770643.html

    展开全文
  • CKEditor 添加自定义插件

    千次阅读 2017-05-24 14:31:01
    CKEditor是个强大的编辑器,在很多项目中都是用这个编辑器让user编辑页面。因为接口十分类似Word,所以一般人都能轻易上手。只是最好还是要有Html的底子,不然有时候要排版也是会有困难。    网络上已经有不少人...
  • 如下是ckeditor自定义插件的addButton方法,根据官方文档看来,是有一个label属性可以设置文字,但是结果文字并不能展示,研究后发现了一种方法。 label设置按钮的展示文字后如果不做处理,并且不设置按钮的图标,...
  • 1、ckeditor/plugins/下新建一个uploadImg的目录,并且在里面创建一个plugin.js,把插件的图标放在icons文件夹里(必须命名为icons) 2、注册插件,plugin.js代码如下 var httpUrl = 'XXXXX'; // 图片上传路径 ...
  • ckeditor5 自定义图标

    2021-10-26 17:51:20
    官网自定义插件的方法:Creating a simple plugin - CKEditor 5 Documentation 官方文档前置配置方法:Quick start - CKEditor 5 Documentation 参考:Advanced setup - CKEditor 5 Documentation 这篇文章叙述...
  • CKeditor自定义右键菜单

    千次阅读 2019-05-08 16:10:43
    CKeditor自定义右键菜单 一、在CKeditor的plugins目录中加入自定义的插件 我加入的是自定义的图片裁剪插件Cropper,目录结构如下: 二、在CKeditor的配置文件config.js中加入自定义的插件 加入自定义的插件,如果有...
  • Vue CKEditor5 快速了解并使用,以及 官方使用插件案例。 自定义编辑器的流程:下载官方的源码,然后找到符合要求的基础编辑器包,对它进行修改,安装支持插件等,调整完成之后,对这个编辑器包进行重新打包,就得到...
  • 如果每一个自定义插件都要以json的方式来写页面显然不爽,怎么弹出我自己的页面呢? 下面是个简单的示例,可以弹出自己的页面,没细写。   editor.addCommand( pluginName, {exec:function (e){window.open('/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,571
精华内容 628
关键字:

ckeditor自定义插件