前言本文主要使用CKEditor4版本
CKEditor4下载地址
https://ckeditor.com/ckeditor-4/download/
官方文档
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
CKEditor5下载地址
https://ckeditor.com/ckeditor-5/download/
官方文档
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html
该编辑器有以下几种模式
使用CKEditorVue Cli调用本地把下载的包放在 public文件夹下
index.html中添加
代码语言：javascript复制页面中
代码语言：javascript复制
代码语言：javascript复制.warp_editor {
position: relative;
width: 800px;
height: 200px;
border: 1px solid #eee;
margin-top: 120px;
}
.cke_editable {
width: 100%;
height: 100%;
overflow-y: auto;
text-align: left;
}初始化代码语言：javascript复制window.CKEDITOR.inline('editor', {height: '300px', width: '100%', toolbar: 'full'})或者
代码语言：javascript复制window.CKEDITOR.replace('editor', {height: '300px', width: '100%', toolbar: 'full'})取值赋值获取富文本
代码语言：javascript复制let html1 = window.CKEDITOR.instances["editor"].getData();
let html2 = myeditor.getData();
console.info("html1", html1);
console.info("html2", html2);获取纯文本内容：
代码语言：javascript复制// inline模式(div包含)
const content = CKEDITOR.instances["editor"].container.getText();
// stand模式
const content =CKEDITOR.instances["editor"].document.getBody().getText(); //取得纯文本如果要赋值那么就是
代码语言：javascript复制myeditor.setData("需要赋值的内容");监听值变化代码语言：javascript复制let myeditor = window.CKEDITOR.inline('editor', {height: '100%', width: '100%', toolbar: 'full'})
myeditor.on('change', () => {
this.editorData = myeditor.getData();
});自定义组件InlineEditor.vue
代码语言：javascript复制
使用
代码语言：javascript复制
使用ckeditor4-vue这种方式支持的功能较少
并且扩展性不好，建议自己引用
结合VUE
代码语言：javascript复制npm install --save ckeditor4-vuemain.js引入
代码语言：javascript复制import CKEditor from 'ckeditor4-vue';
Vue.use(CKEditor);页面中
代码语言：javascript复制
class="warp_editor" v-model="editorData" :config="editorConfig" type="inline" >
上传图片到服务器默认的编辑器配置是支持粘贴的图片自动转Base64的
要想图片上传至服务器就要把 config.js中添加
代码语言：javascript复制config.filebrowserImageUploadUrl = "";如下
代码语言：javascript复制CKEDITOR.editorConfig = function (config) {
config.removeButtons = "Source,Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,Copy,Find,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,Language,Link,Unlink,Anchor,Flash,Smiley,PageBreak,Iframe,ShowBlocks,Maximize,About,Paste,PasteText,PasteFromWord,Undo,Redo,Replace,SelectAll,CopyFormatting,RemoveFormat,Styles,Format,Font,FontSize,TextColor,BGColor,NumberedList,BulletedList,Outdent,Indent,BidiLtr,BidiRtl,Table,HorizontalRule,SpecialChar";
config.language = "zh-cn";
config.image_previewText = " ";
config.exportPdf_tokenUrl = " ";
config.removeDialogTabs = "html5video:advanced;image:advanced;image:Link"; //隐藏“超链接”与“高级选项”只留上传和预览按钮
config.extraPlugins = "uploadimage,editorplaceholder";
config.filebrowserImageUploadUrl = ""; //上传图片的服务器地址
//config.filebrowserHtml5videoUploadUrl = ""; //上传视频的服务器地址";
config.removePlugins = "elementspath,easyimage,cloudservices"; //隐藏左下角提示
config.allowedContent = true; //允许所有标签
};上传图片转Base64默认的编辑器配置是支持粘贴的图片自动转Base64的
我们想点击图片上传按钮后选中图片确定也用base64保存，就要自定义插件。
在plugins文件夹下添加zimage文件夹
添加以下文件
plugins/zimage/plugin.jsplugins/zimage/dialog/dialog.jsplugins/zimage/icons/zimage.png注意其中
第1项名称不能变。
第3项的图片名称要和定义插件时指定的名称相同，建议使用插件的名称。
plugins/zimage/plugin.js
代码语言：javascript复制CKEDITOR.plugins.add('zimage', {
icons: 'zimage',
init: function (editor) {
// 给自定义插件注册一个调用命令
editor.addCommand('zimage', new CKEDITOR.dialogCommand('zimageDialog'));
editor.ui.addButton('zimage', {
// label为鼠标悬停时展示的字
label: '添加图片',
command: 'zimage',
// 将插件放在哪一组toolbar， 像我这样写的话，将放在'insert'组的第一个，后面的数字是这个数据的下标
toolbar: 'insert,0'
});
// 加载自定义窗口，'zimageDialog'跟上面调用命令的'zimageDialog'一致;
CKEDITOR.dialog.add('zimageDialog', this.path + 'dialog/dialog.js');
}
});plugins/zimage/dialog/dialog.js
代码语言：javascript复制CKEDITOR.dialog.add('zimageDialog', function (editor) {
return {
title: '上传本地图片',
minWidth: 400,
minHeight: 100,
contents: [
{
id: 'Upload',
label: '上传',
elements: [
// 我这里需要一个tab页面，所以elements数组只有一个对象
{
// type为html表示html代码
type: 'html',
// 接下来html属性就可以直接写html代码了
html: '
+ ''
+ ''
+ '
// 那要怎么拿到自定义窗口的元素呢？在ckeditor自带的自定义窗口里并不容易拿到，这时候我们得用到onLoad函数了
onLoad: function () {
// 在自定义窗口展示的时候会触发这条函数;而我们就能在这条函数里写我们的代码了;
var ele = document.getElementById('zfileupload');
// 给id为'zfileupload'的input绑定change事件
ele.addEventListener('change', function () {
// 当用户没选或者点取消的时候直接return
if (this.files.length == 0) return;
var imageData = this.files[0];
// 检测后缀名
var lastIndex = imageData.name.lastIndexOf('.');
var imageSuffix = imageData.name.substring(lastIndex + 1);
// 判断后缀名
if (!(imageSuffix == 'png' || imageSuffix == 'jpg' || imageSuffix == 'jpeg' || imageSuffix == 'bmp')) {
alert('图片格式只支持"png/jpg/jpeg/bmp格式"');
return
}
// 大小不能超过1m
if (imageData.size > 5 * 1024 * 1024) {
alert('图片大小不能超过5M');
return
}
// 使用FileReader接口读取图片
var reader = new FileReader();
reader.addEventListener('load', function () {
var imageBase64 = reader.result;
sessionStorage.setItem('z_image', imageBase64)
})
// 将图片转成base64格式
reader.readAsDataURL(imageData)
})
}
}
]
}
],
onOk: function () {
// this这里就是自定窗口了，ckeditor内部封装好了。
var dialog = this;
// 创建img标签
var image = editor.document.createElement('img');
// 给img标签设置class类
image.setAttribute('class', 'insert-image');
var imageData = sessionStorage.getItem('z_image');
// 将图片数据赋予img标签
image.setAttribute('src', imageData);
// 利用ckeditor提供的接口将标签插入到富文本框中
editor.insertElement(image);
},
};
}); config.js中extraPlugins添加我们的插件名
如下
代码语言：javascript复制CKEDITOR.editorConfig = function (config) {
config.removeButtons = "Source,Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,Copy,Find,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,Language,Link,Unlink,Anchor,Flash,Smiley,PageBreak,Iframe,ShowBlocks,Maximize,About,Paste,PasteText,PasteFromWord,Undo,Redo,Replace,SelectAll,CopyFormatting,RemoveFormat,Styles,Format,Font,FontSize,TextColor,BGColor,NumberedList,BulletedList,Outdent,Indent,BidiLtr,BidiRtl,Table,HorizontalRule,SpecialChar";
config.language = "zh-cn";
config.image_previewText = " ";
config.exportPdf_tokenUrl = " ";
config.removeDialogTabs = "html5video:advanced;image:advanced;image:Link"; //隐藏“超链接”与“高级选项”只留上传和预览按钮
config.extraPlugins = "uploadimage,editorplaceholder,zimage";
config.filebrowserImageUploadUrl = ""; //上传图片的服务器地址
//config.filebrowserHtml5videoUploadUrl = ""; //上传视频的服务器地址";
config.removePlugins = "elementspath,easyimage,cloudservices"; //隐藏左下角提示
config.allowedContent = true; //允许所有标签
};
费城76人队
充电宝无法充电的真正原因及解决方法