最近写后台系统，有编辑器的要求，我在网上看了半天大概这几种知名开源富文本编辑器记录和对比（仅供参考）
1、UEditor 百度的。
优点：插件多，基本满足各种需求，类似贴吧中的回复界面。
缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。
总结：小项目，可以用用，不推荐使用。
2、kindeditor
界面类似百度，效果很像
文档齐全但用例较少，使用还算方便。
缺点：总感觉样子不是很好看，没有现代那种风格，还是老式的传统图标。
http://kindeditor.net/demo.php
3、simditor
样式好看，插件不多，基本满足需求
文档英文，使用较为吃力，如果英文水平不好的话
github上面开源，维护较好
因为文档看起来吃力，所以本人没有考虑继续使用。
4、bootstrap-wysiwyg
利用bootstrap实现的，简洁大方好看。
优点：轻量，好看，使用方便。
缺点：需要一定的浏览器支持，毕竟需要bootstrap
http://www.bootcss.com/p/bootstrap-wysiwyg/
5、wangEditor
js和css实现
优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。
插件基本能满足需求，本人推荐使用。
http://www.wangeditor.com/index.html
6、CKEditor
功能强大，使用较多，可以看他们官网的例子，马上就有感觉。
优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。
缺点：网站访问速度一般，文档英文，需要花时间开发。
7、tinymce
支持图片在线处理，插件多，功能强
编辑能力优秀，界面好看。
同样文档为英文，开发需要花时间。
使用之前需要考虑的点：
1需要插件，是否需要很多的插件，还是说简单的那些功能就行了。
2界面考虑，看你喜欢那个界面了。
3图片是否需要上传图片服务器。
4文档如果为英文是否会影响开发。
5支持浏览器类型和版本。
废话多说了，直接上代码 先创建一个EditorBar.vue文件
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
name: "editorElem",
data() {
return {
editorContent: ""
};
},
props: ["catchData","value"], //接收父组件的方法
mounted() {
var editor = new E(this.$refs.editorElem); //创建富文本实例
editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(html); //把这个html通过catchData的方法传入父组件
};
editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
editor.customConfig.uploadImgServer =
"http://172.16.40.170:8080/upload/image/"; // 配置服务器端地址
editor.customConfig.uploadImgHeaders = {
Accept: "*/*",
Authorization: "JWT " + sessionStorage.token
}; // 自定义 header
editor.customConfig.uploadFileName = "myFileName"; // 后端接受上传文件的参数名
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
editor.customConfig.zindex = 20000;
editor.customConfig.menus = [
//菜单配置
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
"video", // 插入视频
// "code", // 插入代码
"undo", // 撤销
"redo", // 重复
];
//下面是最重要的的方法
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
this.imgUrl = Object.values(result.data).toString();
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function(xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
let url = Object.values(result.data);
// debugger;
JSON.stringify(url);
insertImg(url);
}
};
editor.create();
editor.txt.html(this.value); //回显
}
};
</script>
<style lang="css">
</style>
然后在你需要用到页面引用 需要注意一点 editor.customConfig.uploadFileName = "myFileName";就是后台接收的名字
image
image.png
image
只有做了customInsert: function (insertImg, result, editor){}里的步骤，图片才会在富文本中显示，否则是不会自动显示。
网友评论