直接做成一個組件，在需要的地方直接調用即可，能夠自動將內容轉換為帶有標簽

<template><div class="editor-wrapper"><div :id="editorId" class="editor-div"></div></div> </template><script> import Editor from 'wangeditor'; // import 'wangeditor/release/wangEditor.min.css';export default {name: 'Editor',props: {value: {type: String,default: ''},/*** 綁定的值的類型, enum: ['html']*/valueType: {type: String,default: 'html'},/*** @description 設置change事件觸發時間間隔*/changeInterval: {type: Number,default: 200},/*** @description 是否開啟本地存儲*/cache: {type: Boolean,default: false}},data() {return {};},computed: {editorId() {return `editor${this._uid}`;}},watch: {value(newValue, oldValue) {// console.log(newValue);// 解決頁面第一次加載后獲取的數據無法渲染到富文本的問題this._setHtmlOnce(newValue);}},methods: {setHtml(val) {this.editor.txt.html(val);},setEditorHeight() {let el = document.querySelector('.w-e-text-container');el.style.minHeight = '300px';el.style.height = '';},_setHtmlOnce(val) {if (!this.__setHtmlCount) {this.editor.txt.html(val);this.__setHtmlCount = 1;}}},mounted() {this.editor = new Editor(`#${this.editorId}`);this.editor.customConfig.onchange = html => {let text = this.editor.txt.text();// if (this.cache) localStorage.editorCache = html;this.$emit('input', this.valueType === 'html' ? html : text);this.$emit('on-change', html, text);};this.editor.customConfig.onchangeTimeout = this.changeInterval;this.editor.customConfig.showLinkImg = false;// this.editor.customConfig.uploadImgShowBase64 = true;// create這個方法一定要在所有配置項之后調用this.editor.create();// this.setEditorHeight();// 如果本地有存儲加載本地存儲內容// let html = this.value || localStorage.editorCache;let html = this.value;if (html) this.editor.txt.html(html);} }; </script>

頁面js中直接調用

import Editor from '@/components/editor/index'; export default {components: {Editor},}

頁面上直接渲染

<template><div class="page-Challenge-rule"><Editor v-model="value" /></div> </template>

效果圖

總結

以上是生活随笔為你收集整理的适合vue的富文本框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。