vue中安裝wangEditor?

?

cnpm install wangeditor

創(chuàng)建公用組件：在src/vue/components文件夾中創(chuàng)建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) {// 觸發(fā)清除文本域內(nèi)容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為編輯框輸入的內(nèi)容，這里我監(jiān)聽(tīng)了一下值，當(dāng)父組件調(diào)用得時(shí)候，如果給value賦值了，子組件將會(huì)顯示父組件賦給的值}}},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存儲(chǔ)圖片（推薦）//this.wangEditor.customConfig.uploadImgServer = "https://jsonplaceholder.typicode.com/posts/"; // 配置服務(wù)器端地址（不推薦）this.wangEditor.customConfig.uploadImgHeaders = {}; // 自定義headerthis.wangEditor.customConfig.uploadFileName = "file"; // 后端接受上傳文件的參數(shù)名this.wangEditor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 將圖片大小限制為（默認(rèn)最大支持2M）this.wangEditor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上傳6張圖片this.wangEditor.customConfig.uploadImgTimeout = 1 * 60 * 1000; // 設(shè)置超時(shí)時(shí)間（默認(rèn)1分鐘）// 配置菜單this.wangEditor.customConfig.menus = ["head", // 標(biāo)題"bold", // 粗體"fontSize", // 字號(hào)"fontName", // 字體"italic", // 斜體"underline", // 下劃線"strikeThrough", // 刪除線"foreColor", // 文字顏色"backColor", // 背景顏色"link", // 插入鏈接"list", // 列表"justify", // 對(duì)齊方式"quote", // 引用"emoticon", // 表情"image", // 插入圖片"table", // 表格"video", // 插入視頻"code", // 插入代碼"undo", // 撤銷(xiāo)"redo", // 重復(fù)"fullscreen" // 全屏];this.wangEditor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入圖片失敗回調(diào)},success: (xhr, editor, result) => {// 圖片上傳成功回調(diào)},timeout: (xhr, editor) => {// 網(wǎng)絡(luò)超時(shí)的回調(diào)},error: (xhr, editor) => {// 圖片上傳錯(cuò)誤的回調(diào)},customInsert: (insertImg, result, editor) => {// 圖片上傳成功，插入圖片的回調(diào)（不推薦）insertImg(result.url);}};this.wangEditor.customConfig.onchange = html => {this.wangEditorInfo = html;this.$emit("change", this.wangEditorInfo); // 將內(nèi)容同步到父組件中};// 創(chuàng)建富文本編輯器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>

在父組件中調(diào)用

<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,//設(shè)置為true的時(shí)候，這個(gè)可以用this.wangEditorDetail=''來(lái)替代wangEditorDetail: ""};},mounted() {this.wangEditorDetail = "wangEditorDetail默認(rèn)值"; //設(shè)置富文本框默認(rèn)顯示內(nèi)容},components: { wangEditor },methods: {wangEditorChange(val) {console.log(val);}}
};
</script>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。