提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue富文本编辑器-Ckeditor4

Vue 文本编辑
2023-06-13 09:15:18 时间

Ckeditor4的下载

link: https://ckeditor.com/ckeditor-4/download/

下载好后解压,

打开index,

打开后就是配置界面

在这里进行增删移动，看自己需求,调整好后

这里就是配置文件了，复制

导入

将整个目录放在你的项目下

在需要用到的地方引用

<script src="../static/ckeditor/ckeditor.js"></script>

vue主要在index.html

需要的界面通过id引入

 <div>
  <textarea :id="id"></textarea>
</div>

之后再mounted周期里面

mounted: function () {
   const self = this;
   // 渲染编辑器
   self.ckeditor = window.CKEDITOR.replace(self.id, {
     toolbarGroups: [
       { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
       {
         name: "paragraph",
         groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
       },
       { name: "links", groups: ["links"] },
       { name: "insert", groups: ["insert"] },

       { name: "styles", groups: ["styles"] },
       { name: "colors", groups: ["colors"] },
       { name: "tools", groups: ["tools"] }
       // { name: 'others', groups: ['others'] },
     ],
     // eslint-disable-next-line
     removeButtons:
"Save,NewPage,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,HiddenField,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Flash,HorizontalRule,PageBreak,Iframe,About,Maximize"
   });

   // 设置初始内容
   // self.ckeditor.setData(self.value)

   // 监听内容变更事件
   self.ckeditor.on("change", function () {
     console.log('change')
    
   });

   self.ckeditor.on("instanceReady", function () {
    
   });
 },

removeButtons可以隐藏不需要的按钮；这里面可以通过change事件来监听内容，从而实现 图片上传。

instanceReady 事件来实现数据缓存载入

self.ckeditor.on("instanceReady", function () {
      if (window.localStorage.getItem("ckeditorContent")) {
        console.log('击中内容缓存')
        self.ckeditor.setData(window.localStorage.getItem("ckeditorContent"));
      } else {
        self.ckeditor.setData(self.value);
      }
    });

self.ckeditor.setData 事件进行内容赋值；其他事件见官方文档。

config.js

原文件如下：

/**
 * @license Copyright (c) 2003-2022, 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 complete reference see:
	// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

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

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
};

config.toolbarGroups 在mounted 配置过了，这儿删掉，

/**
 * @license Copyright (c) 2003-2022, 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 = 'zh-CN';
	// config.uiColor = '#AADC6E';
	config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
	config.allowedContent = true;
	config.removePlugins = 'elementspath';
	config.toolbarCanCollapse = true,
	config.pasteFilter = null

};
CKEDITOR.dtd.$removeEmpty.span = 0;

config.language 设置语言；当前我的配置文件加了行高，

扩展

行高

具体参考 ：

ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距

图片上传

编辑器默认使用base64存储图片，可能造成内容字符过长

self.ckeditor.on("change", function () {
    console.log('change')
    self.$emit("input", self.ckeditor.getData());
    window.localStorage.setItem("ckeditorContent", self.ckeditor.getData());
    setTimeout(async function () {
      var p = self.ckeditor.document.find("p");
      // 复制图片上传
      let imgList = self.ckeditor.document.find("img");
      for (let i = 0; i < imgList.count(); i++) {
        if (imgList.getItem(i)) {
          let baseUrl = imgList.getItem(i).$.dataset.ckeSavedSrc; //获取img的src
          if (baseUrl.substring(0, 4) == "data") {
            let resUrl = await self.uploadImg(baseUrl);
            imgList.getItem(i).$.src = resUrl;
            imgList.getItem(i).$.dataset.ckeSavedSrc = "";
          }
        }
      }
    }, 500);
  });

相关文章