title of text
1. Installation
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save
Two, use
1.1. Template
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 500px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>
1.2、script
<script>
import {
Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
components: {
Editor, Toolbar },
data() {
return {
editor: null,
html: "<p>hello</p>",
toolbarConfig: {
},
editorConfig: {
placeholder: "请输入内容..." },
mode: "default" // or 'simple'
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
}
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
}, 1500);
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器
}
};
</script>
1.3, introduce style
main.jsAdd the following code in
import "@wangeditor/editor/dist/css/style.css";
write at the end
If you feel that the article is not good
//(ㄒoㄒ)//, just leave a message in the comment section, and the author will continue to improve;o_O???
if you think the article is a little bit useful, you can give the author a like;\\*^o^*//
if you want to make progress with the author, you can scan the QR code on WeChat , pay attention to the front-end old L ;~~~///(^v^)\\\~~~
thank you readers(^_^)∠※! ! !