CKEditor集成Vue项目

1.下载模块化依赖并引入

npm i ckeditor4-vue
import CKEditor from "ckeditor4-vue";


：使用
components: {
		ckeditor: CKEditor.component
	},

2.下载代码包

地址：https://ckeditor.com/ckeditor-4/download/ 在解压后放入本项目或者CDN上

3.标签使用方式

<ckeditor
			@ready="editorReady"
			@focus="editorFocus"
			:editor-url="editorUrl"
			v-model="editorData"
			:config="editorConfig"
			ref="editor"
		>
</ckeditor>

备注 @ready
     @focus
     :editor-url
     :config
     ref="editor"
  这几个属性必传，但v-model可以不传，由于延迟或异步会导致无法实时同步取到编辑器的值，所以使用ref来取值

 4.重要的实例：

editorUrl:'',	解压包中ckeditor.js的访问路径	
editorConfig: {
				title: "welcome to use editor!!",
				language: "zh-cn",
				filebrowserImageUploadUrl: "/apis/content/upload-file",
				//extraPlugins: ["uploadfile", "uploadimg"], //自定义上传的按钮
				toolbar: [
					// [ 'Source', '-', 'Save', 'NewPage', 'Print', '-', 'Templates' ] ,
					[
						"Undo",
						"Redo",
						"-",
						"Cut",
						"Copy",
						"Paste",
						"PasteText",
						"PasteFromWord"
					],
					[/*'Find', 'Replace', '-',*/ "SelectAll" /* '-', 'Scayt'*/],
					// [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] ,
					[
						"Table",
						"HorizontalRule",
						"Smiley",
						"SpecialChar" /* 'PageBreak',*/
					],
					[/*'ShowBlocks',*/ "Maximize"],
					"/",
					["Link", "Unlink" /* 'Anchor'*/],
					[
						"Bold",
						"Italic",
						"Underline",
						"Strike",
						"TextColor",
						"BGColor",
						"Subscript",
						"Superscript",
						"-",
						"CopyFormatting",
						"RemoveFormat"
					],
					["uploadfile", "uploadimg"],
					[
						"NumberedList",
						"BulletedList",
						"-",
						"Outdent",
						"Indent",
						"-",
						"Blockquote",
						"CreateDiv",
						"-",
						"JustifyLeft",
						"JustifyCenter",
						"JustifyRight",
						"JustifyBlock",
						"-",
						"BidiLtr",
						"BidiRtl"
					],
					"/",
					["Styles", "Format", "Font", "FontSize"]
				]
			}

5.ckeditor自定义按钮的方法：

   （1）在解压包plugins目录下新建目录，可以命名为功能名称

   （2）在新建的目录下新建icon.png图标文件和plugin.js

    

(function(){
    //Section 1 : 按下自定义按钮时执行的代码
    var action = {
        exec:function(editor){
            editor.uploadimgHook(editor);
        }
    },
    //Section 2 : 创建自定义按钮、绑定方法
    type = 'uploadimg';
    CKEDITOR.plugins.add(type,{
        init:function(editor){
            editor.addCommand(type,action);
            editor.ui.addButton('uploadimg',{
                label:'上传图片',
                icon: this.path + 'icon.png',
                command:type
            });
        }
    });
})();

6.在代码中引入自定义i模块

步骤3的数组：extraPlugins，切记名称一定要对上

7.在代码中使用刚刚自定义模块，

定义一个函数用于刚刚的钩子函数并在editorReady事件中绑定：

editor.uploadimgHook = this.uploadimgHook;

好了，现在可以在uploadimgHook方法里使用自定义按钮了

bye~~~