1、安裝使用
安裝
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save
?在main.js中引入樣式
import '@wangeditor/editor/dist/css/style.css'
?
在使用編輯器的頁面引入js?
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
components: { Editor, Toolbar },
?模板
<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>
?js
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
? name: "MyEditor",
? components: { Editor, Toolbar },
? data() {
? ? return {
? ? ? editor: null,
? ? ? html: "<p>hello world</p>",
? ? ? toolbarConfig: {},
? ? ? editorConfig: {
? ? ? ? placeholder: "請輸入內(nèi)容...",
? ? ? ? // 所有的菜單配置，都要在 MENU_CONF 屬性下
? ? ? ? MENU_CONF: {},
? ? ? },
? ? };
? },
? methods: {
? ? onCreated(editor) {
? ? ? this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否則會報錯
? ? },
? ? onChange(editor) {
? ? ? console.log("onChange", editor.getHtml()); // onChange 時獲取編輯器最新內(nèi)容
? ? },
? },
? mounted() {},
? beforeDestroy() {
? ? const editor = this.editor;
? ? if (editor == null) return;
? ? editor.destroy(); // 組件銷毀時，及時銷毀 editor ，重要?。?！
? },
};
</script>
?到這一步編輯器就可以正常顯示了文章來源：http://www.zghlxwxcb.cn/news/detail-815277.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-815277.html
到了這里，關(guān)于vue2+wangEditor5富文本編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
