1.效果圖
?2.安裝依賴
npm install wangeditor
?3.在main.js 全局引入 富文本組件
import editorBar from "@/components/editor/editor.vue";
Vue.component('editorBar', editorBar)?
全局引入頁面使用?
<editor-bar v-model="form.nr" :flag="false" @change="getcontent" />
mothods:{
? ? ?//獲取富文本內(nèi)容
? ? getcontent (content) {
? ? ? ?this.form.nr = content;
? ? },
}
或者直接在組件中使用
<editor-bar v-model="form.nr" :flag="false" @change="getcontent" />
import EditorBar from "@/components/editor/editor";?
components: {
? ? EditorBar,
? },
mothods:{
? ? ?//獲取富文本內(nèi)容
? ? getcontent (content) {
? ? ? ?this.form.nr = content;
? ? },
}
4.封裝富文本文件? ?在src公共文件下新建一個命名為editor.vue的文件
詳情可參考：富文本編輯器安裝使用_editor-bar_可不&可以的博客-CSDN博客
?
<template>
? <div id="wangeditor" class="editor">
? ? <div ref="toolbar" class="toolbar"></div>
? ? <div ref="editor" class="text"></div>
? </div>
</template><script>
import E from 'wangeditor'
import {
? uploadPictures
} from '@/api/user'
export default {
? model: {
? ? prop: 'value',
? ? event: 'change',
? },
? props: {
? ? value: {
? ? ? type: String,
? ? ? required: true,
? ? },? ? //是否禁用
? ? flag: {
? ? ? type: Boolean,
? ? ? required: true,
? ? },
? },
? data () {
? ? return {
? ? ? editor: null,
? ? ? info_: null,
? ? ? tableHeight: '600px',
? ? ? uploadurl: process.env.VUE_APP_BASE_API + '/cs/localStorage/pictures',
? ? }
? },? watch: {
? ? value (newval) {
? ? ? if (newval !== this.editor.txt.html()) {
? ? ? ? this.editor.txt.html(newval)
? ? ? }
? ? },
? ? flag: {
? ? ? immediate: true,
? ? ? handler: function (newval) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.editor.$textElem.attr('contenteditable', newval)
? ? ? ? })
? ? ? },
? ? ? deep: true,
? ? },
? },
? mounted () {
? ? //初始化富文本編輯器
? ? this.seteditor();
? ? // 這一步非常重要，用于富文本修改信息的時候，數(shù)據(jù)回顯
? ? // this.value是父子傳參，動態(tài)傳值的
? ? this.editor.txt.html(this.value);
? },
? methods: {
? ? seteditor () {
? ? ? let that = this
? ? ? that.editor = new E(that.$refs.toolbar, that.$refs.editor)
? ? ? that.editor.customConfig.uploadImgShowBase64 = false
? ? ? that.editor.customConfig.pasteFilterStyle = true? ? ? // 配置菜單
? ? ? that.editor.customConfig.menus = [
? ? ? ? 'head', // 標(biāo)題
? ? ? ? 'bold', // 粗體
? ? ? ? 'fontSize', // 字號
? ? ? ? 'fontName', // 字體
? ? ? ? 'italic', // 斜體
? ? ? ? 'underline', // 下劃線
? ? ? ? 'strikeThrough', // 刪除線
? ? ? ? 'foreColor', // 文字顏色
? ? ? ? 'backColor', // 背景顏色
? ? ? ? 'link', // 插入鏈接
? ? ? ? 'list', // 列表
? ? ? ? 'justify', // 對齊方式
? ? ? ? 'quote', // 引用
? ? ? ? // 'emoticon', // 表情
? ? ? ? 'image', // 插入圖片
? ? ? ? 'table', // 表格
? ? ? ? // 'video', // 插入視頻
? ? ? ? // 'code', // 插入代碼
? ? ? ? 'undo', // 撤銷
? ? ? ? 'redo', // 重復(fù)
? ? ? ? // 'fullscreen', // 全屏
? ? ? ]
? ? ? that.editor.customConfig.onchange = (html) => {
? ? ? ? that.info_ = html // 綁定當(dāng)前逐漸地值
? ? ? ? that.$emit('change', that.info_) // 將內(nèi)容同步到父組件中
? ? ? }
? ? ? // 字號
? ? ? // console.log(this.editor)
? ? ? that.editor.customConfig.uploadImgServer = that.uploadurl
? ? ? that.editor.customConfig.uploadFileName = 'file'? ? ? //自定義圖片上傳
? ? ? that.editor.customConfig.customUploadImg = function (files, insert) {
? ? ? ? // file是是input中選中的文件列表?
? ? ? ? // ?insert是獲取圖片url后，插入到編輯器中的方法
? ? ? ? var formData = new FormData();
? ? ? ? var obj = {};
? ? ? ? for (var i = 0; i < files.length; i++) {
? ? ? ? ? obj = files[i]
? ? ? ? }
? ? ? ? //后端所需的參數(shù)
? ? ? ? formData.append('file', obj);
? ? ? ? uploadPictures(formData).then(result => {
? ? ? ? ? let url = 'http://192.168.2.40:8080/cs/file/' + result.type + '/' + result.realName
? ? ? ? ? insert(url);
? ? ? ? })
? ? ? };
? ? ? // 創(chuàng)建富文本編輯器
? ? ? that.editor.create()
? ? }
? }
}
</script><style lang="scss" scoped>
.editor {
? width: 100%;
? margin: 0 auto;
? position: relative;
? z-index: 0;
}::v-deep table {
? border-collapse: collapse;
}.toolbar {
? border: 1px solid #ccc;
}.text {
? border: 1px solid #ccc;
}::v-deep .w-e-text-container {
? height: 500px !important;
}::v-deep #wangeditor {
? .w-e-text-container {
? ? z-index: 1 !important;
? ? // table {
? ? // margin-left: 0 !important;
? ? // }
? }? .w-e-toolbar {
? ? flex-wrap: wrap;
? }? .w-e-menu {
? ? z-index: auto !important;文章來源：http://www.zghlxwxcb.cn/news/detail-537682.html? ? .w-e-droplist {
? ? ? z-index: 2 !important;
? ? }
? }
}
</style>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-537682.html
到了這里，關(guān)于vue使用富文本編輯器 Wangeditor 可顯示編輯新增回顯禁用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
