简介
wangEditor是开源 Web 富文本编辑器，开箱即用，配置简单。
有三大特点：
-
简洁易用，功能强大
快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。
-
支持 JS Vue React
不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。
-
踩过 5000+ 坑
wangEditor 开源多年，有大量用户使用和反馈，我们已解决了太多的用户问题（详见 github issues）。
兼容性
-
兼容主流的 PC 浏览器，如 Chrome Firefox Safari Edge 等 -
暂不支持移动端编辑（支持移动端查看） -
不再支持 IE 浏览器
安装
npm install @wangeditor/editor @wangeditor/editor-for-vue @wangeditor/plugin-formula -S
npm install jquery
封装组件
<template>
<div>
<div style="border: 1px solid #ccc; margin-top: 10px">
<!-- 工具栏 -->
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
/>
<!-- 编辑器 -->
<Editor
style="height: 400px; overflow-y: hidden"
:defaultConfig="editorConfig"
v-model="html"
@onChange="onChange"
@onCreated="onCreated"
/>
</div>
</div>
</template>
<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
export default {
name: "WangEditor",
components: {Editor, Toolbar},
props: {
html: {
type: String,
default: ""
}
},
data() {
return {
editor: null,
toolbarConfig: {
// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
/* 隐藏哪些菜单 */
excludeKeys: [
//上传图片
"group-image",
//上传视频
"group-video",
],
},
editorConfig: {
placeholder: "",
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {},
},
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
},
onChange(editor) {
let content = editor.getHtml();
this.$emit("receiveContent", content);
},
getEditorText() {
const editor = this.editor;
if (editor == null) return;
console.log(editor.getText()); // 执行 editor API
},
printEditorHtml() {
const editor = this.editor;
if (editor == null) return;
console.log(editor.getHtml()); // 执行 editor API
},
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
}, 1500);
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
使用组件
<wang-editor :html="data.content" @receiveContent="receiveContent"></wang-editor>
//接收内容
receiveContent(content) {
this.data.content = content;
}
原文始发于微信公众号（ssw在路上的蚂蚁）：VUE2整合富文本编辑器 wangEditor
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/209636.html
