vue中安裝wangEditor?

?

cnpm install wangeditor

創建公用組件：在src/vue/components文件夾中創建wangEditor.vue?

<template lang="html"><div class="wangeditor"><div ref="toolbar" class="toolbar"></div><div ref="wangeditor" class="text"></div></div>
</template><script>
import E from "wangeditor";
export default {data() {return {wangEditor: null,wangEditorInfo: null};},model: {prop: "value",event: "change"},props: {value: {type: String,default: ""},isClear: {type: Boolean,default: false}},watch: {isClear(val) {// 觸發清除文本域內容if (val) {this.wangEditor.txt.clear();this.wangEditorInfo = null;}},value: function(value) {if (value !== this.wangEditor.txt.html()) {this.isClear = false;this.wangEditor.txt.html(this.value); //value為編輯框輸入的內容，這里我監聽了一下值，當父組件調用得時候，如果給value賦值了，子組件將會顯示父組件賦給的值}}},mounted() {this.initEditor();this.wangEditor.txt.html(this.value);},methods: {initEditor() {this.wangEditor = new E(this.$refs.toolbar, this.$refs.wangeditor);this.wangEditor.customConfig.uploadImgShowBase64 = true; // base64存儲圖片（推薦）//this.wangEditor.customConfig.uploadImgServer = "https://jsonplaceholder.typicode.com/posts/"; // 配置服務器端地址（不推薦）this.wangEditor.customConfig.uploadImgHeaders = {}; // 自定義headerthis.wangEditor.customConfig.uploadFileName = "file"; // 后端接受上傳文件的參數名this.wangEditor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 將圖片大小限制為（默認最大支持2M）this.wangEditor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上傳6張圖片this.wangEditor.customConfig.uploadImgTimeout = 1 * 60 * 1000; // 設置超時時間（默認1分鐘）// 配置菜單this.wangEditor.customConfig.menus = ["head", // 標題"bold", // 粗體"fontSize", // 字號"fontName", // 字體"italic", // 斜體"underline", // 下劃線"strikeThrough", // 刪除線"foreColor", // 文字顏色"backColor", // 背景顏色"link", // 插入鏈接"list", // 列表"justify", // 對齊方式"quote", // 引用"emoticon", // 表情"image", // 插入圖片"table", // 表格"video", // 插入視頻"code", // 插入代碼"undo", // 撤銷"redo", // 重復"fullscreen" // 全屏];this.wangEditor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入圖片失敗回調},success: (xhr, editor, result) => {// 圖片上傳成功回調},timeout: (xhr, editor) => {// 網絡超時的回調},error: (xhr, editor) => {// 圖片上傳錯誤的回調},customInsert: (insertImg, result, editor) => {// 圖片上傳成功，插入圖片的回調（不推薦）insertImg(result.url);}};this.wangEditor.customConfig.onchange = html => {this.wangEditorInfo = html;this.$emit("change", this.wangEditorInfo); // 將內容同步到父組件中};// 創建富文本編輯器this.wangEditor.create();}}
};
</script><style lang="scss">
.wangeditor {border: 1px solid #e6e6e6;box-sizing: border-box;.toolbar {border-bottom: 1px solid #e6e6e6;box-sizing: border-box;}.text {min-height: 300px;}
}
</style>

在父組件中調用

<template><div><wangEditor v-model="wangEditorDetail" :isClear="isClear" @change="wangEditorChange"></wangEditor></div>
</template>
<script>
import wangEditor from "@/vue/components/wangEditor";
export default {data() {return {isClear: false,//設置為true的時候，這個可以用this.wangEditorDetail=''來替代wangEditorDetail: ""};},mounted() {this.wangEditorDetail = "wangEditorDetail默認值"; //設置富文本框默認顯示內容},components: { wangEditor },methods: {wangEditorChange(val) {console.log(val);}}
};
</script>

總結

以上是生活随笔為你收集整理的Vue项目中使用wangEditor富文本输入框（推荐）的全部內容，希望文章能夠幫你解決所遇到的問題。

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