vue2使用CKEditor 4富文本

CKEditor 4富文本官方说已经不维护了，相当于报废的产品，但是基本的功能还是可以用的，用在vue里面基本没有什么问题

网上很多的安装CKEditor 4步骤，但是亲身试用没用直接下载包好用

安装：

第一步：点击CKEditor 4 - Download Latest Version下载安装包在vue项目的static文件里面

第二步：按照官网文档还是要安装包到vue ，文档全是英文，

Editor Placeholder | CKEditor 4 Documentation

npm install ckeditor4-vue 

main.js里：

import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

这样安装就差不多了。

最基本的用法：

直接在用的页面引入CKEditor 4   

注意：有时候会未定义，可能是事件问题，用setTimeout可以试试，

<template>

  <div class="index">

    <ckeditor id="editor1" @ready="onEditorReady"></ckeditor>

  </div>

</template>

import CKEditor from 'ckeditor4-vue';

name: "ckeditor1", //当组件用的时候，最好起个名字

components: {

    ckeditor: CKEditor.component

  },

methods: {

        //setData(this.value);设置富文本的内容

        onEditorReady(event) {

                  console.log('标题好了');

              if (this.editorDom) {

                   this.editorDom.setData(this.value);

              }

         },

}

页面加载的时候，初始化

mounted() {

    this.editorDom = CKEDITOR.replace('editor1');

    // setTimeout(()=>{

            if (this.editorDom) {

               // change可能富文本会不停的闪烁，可以换成光标失去焦点事件 blur

              this.editorDom.on('change', () => {

                //getData():获取富文本内容

                this.editorData = this.editorDom.getData()

                //当组件用的时候，子组件给父组件传值

                this.$emit('change', this.editorData)

              })

            }

    // },300)

  },

beforeDestroy() {

    if (this.editorDom) {

      this.editorDom.destroy(); // 销毁编辑器，防止内存泄露

    }

  }

配置富文本：

static==>ckeditor==>config.js 里面配置，下面的配置toolbar只有放大和上传图片按钮，想要跟多的也可以自己配置，方法在下面

/**
 * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

// CKEDITOR.editorConfig = function( config ) {
// 	// Define changes to default configuration here. For example:
// 	// config.language = 'fr';
// 	// config.uiColor = '#AADC6E';
// };
CKEDITOR.editorConfig = function( config ) {
	// config.width=852;
	// config.height=80;
	config.width=730;
	config.height=700;
	// 1.尽量使用ofice粘贴来源，WPS粘贴的标题会自带text-indent:-43.2pt,属性，可能导致标题显示不全的问题，这个问题很坑，ie粘贴就是好的。
	//保证word导入格式
	// config.pasteFromWordPromptCleanupLevel = 'img';
config.pasteFromlordRemoveFontstyles=false;
config.pasteFromlordRemovestyles = false;//是否强制复制来的内容去除格式
config.forcePasteAsPlainText =false;//不去除//允许所有格式
// config.allowedContent =true;
// config.exportPdf_tokenUrl='/path/to/tokenUrl'
// 清楚图片预览	

// config.image_previewText = '1';
// config.uploadUrl = 'http://192.168.0.123:9995/v2/file/upload';
// config.filebrowserUploadUrl = 'http://192.168.0.123:9995/api/v2/file/upload'; // 指定上传到服务器上目标地址  
// config.filebrowserImageUploadUrl = 'http://192.168.0.123:9995/api/v2/file/upload'; // 指定上传的目标地址  

// 启用了剪贴板图像处理功能
config.Clipboard_handleImages=false

config.toolbarGroups = [
	{ name: 'document', groups: [ 'document', 'mode', 'doctools' ] },
	{ name: 'clipboard', groups: [ 'undo', 'clipboard' ] },
	{ name: 'editing', groups: [ 'find', 'spellchecker', 'selection', 'editing' ] },
	{ name: 'forms', groups: [ 'forms' ] },
	{ name: 'basicstyles', groups: [ 'cleanup', 'basicstyles' ] },
	{ name: 'colors', groups: [ 'colors' ] },
	{ name: 'paragraph', groups: [ 'align', 'list', 'indent', 'blocks', 'bidi', 'paragraph' ] },
	{ name: 'styles', groups: [ 'styles' ] },
	{ name: 'insert', groups: [ 'insert' ] },
	{ name: 'tools', groups: [ 'tools' ] },
	'/',
	{ name: 'links', groups: [ 'links' ] },
	'/',
	{ name: 'others', groups: [ 'others' ] },
	{ name: 'about', groups: [ 'about' ] }
];

config.removeButtons = 'Source,NewPage,ExportPdf,Preview,Print,Templates,Cut,Find,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Italic,Underline,Strike,NumberedList,BulletedList,Indent,Outdent,Blockquote,CreateDiv,BidiLtr,BidiRtl,Unlink,Link,Anchor,Table,Smiley,Iframe,PageBreak,BGColor,ShowBlocks,About,Replace,Undo,Redo,Copy,Paste,PasteText,PasteFromWord,SelectAll,CopyFormatting,RemoveFormat,Bold,Subscript,Superscript,TextColor,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,HorizontalRule,SpecialChar,Styles,Font,Language,Format,Save,FontSize';
	// 图片上传需要下载插件
config.extraPlugins = 'image2';
	// config.extraPlugins = 'uploadimage';
// config.extraPlugins= 'uploadimage,uploadwidget,widget,notificationaggregator,filetools'

// 不配置exportPdf_tokenUrl，浏览器要警告
	config.exportPdf_tokenUrl='/'
	// config.exportPdf_tokenUrl=''


	// 4. filebrowserImageBrowseUrl 与 filebrowserBrowseUrl都注释掉的话，【浏览服务器】按钮不展示
	// config.filebrowserBrowseUrl='/apps/ckfinder/3.4.5/ckfinder.html',
	// config.filebrowserImageBrowseUrl='/apps/ckfinder/3.4.5/ckfinder.html?type=Images',


	// 1. 注释掉的话，【上传】按钮不展示
	config.filebrowserImageUploadUrl= 'http://192.168.0.123:9995/v2/file/upload-ck4',
	// 2. 这个配置是用于拖拉拽，贴图
config.uploadUrl = 'http://192.168.0.123:9995/v2/file/upload-ck4';

	// config.filebrowserUploadUrl= '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
};

配置toolbar：

安装下面找到文件夹，找到index.html,用浏览器打开

配置上传图片的插件：

想要上传图片到自己的服务器，就要配置上传路径和下载官方说的需要图片插件uploadimage和image2 这两个插件最好都下载，配置路径上面的代码里面有注释

上传图片什么的可以看看这个文档

Default Image Plugin | CKEditor 4 Documentationmentation

下载插件：

下载uploadimage插件：   Upload Image | CKEditor.com

下载image插件     Image | CKEditor.com

下载好的包都要放在插件文件夹里面

这样基本可以上传图片了

注意：浏览器不出意外会有警告，下载的插件版本问题，下载的时候仔细斟酌。