上一篇我们已经创建了wangEdit.vue子组件，在里面编译如下：
dom结构中需要引入工具栏和编辑器两部分，如图所示：
代码部分：
<script>
import store from '@/store'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
export default {
name: 'wangEditor',
components: {Editor, Toolbar},
props: [
'editorParams'
],
data() {
return {
// 富文本编辑器对象
editor: null,
// 富文本内容
content: null,
// 富文本占位内容
placeholder: null,
// 富文本上传图片的地址
uploadImageUrl: null,
// 富文本最小高度
height: '300px',
// 富文本是否禁用
isDisabled: false,
// 工具栏配置
toolbarConfig: {
// 显示指定的菜单项
// toolbarKeys: [],
// 隐藏指定的菜单项
excludeKeys: [
// 隐藏全屏按钮
"fullScreen"
],
},
// 编辑器配置
editorConfig: {
placeholder: '请输入内容......',
MENU_CONF: ['uploadImage']
}
}
},
watch: {
/**
* 深度监听富文本参数
*/
'editorParams': {
handler: function (newVal, oldVal) {
if (newVal != null) {
this.content = newVal.content
this.editorConfig.placeholder = this.placeholder
this.uploadImageUrl = newVal.uploadImageUrl
this.setUploadImageConfig()
this.height = newVal.height
this.isDisabled = newVal.isDisabled
}
},
immediate: true,
deep: true
}
},
methods: {
/**
* 实例化富文本编辑器
*/
onCreated(editor) {
this.editor = Object.seal(editor)
this.setIsDisabled()
},
/**
* 监听富文本编辑器
*/
onChange(editor) {
// console.log('onChange =>', editor.getHtml())
},
/**
* this.editor.getConfig().spellcheck = false
* 由于在配置中关闭拼写检查，值虽然设置成功，但是依然显示红色波浪线
* 因此在富文本编辑器组件挂载完成后，操作 Dom 元素设置拼写检查 spellcheck 为假
*/
async setSpellCheckFasle() {
let doms = await document.getElementsByClassName('w-e-scroll')
for (let vo of doms) {
if (vo) {
if (vo.children.length > 0) {
vo.children[0].setAttribute('spellcheck', 'false')
}
}
}
},
/**
* 设置富文本是否禁用
*/
async setIsDisabled() {
if (this.editor) {
this.isDisabled ? (this.editor.disable()) : (this.editor.enable())
}
},
/**
* 上传图片配置
*/
setUploadImageConfig() {
this.editorConfig.placeholder = this.placeholder
this.editorConfig.MENU_CONF['uploadImage'] = {
fieldName: 'file', // 文件字段名（后端需要对应的字段）， 默认值 'wangeditor-uploaded-image'
maxFileSize: 6 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M，此次设置为 6M
maxNumberOfFiles: 30, // 最多可上传几个文件，默认为 100
allowedFileTypes: ['image/*'], // 选择文件时的类型限制，默认为 ['image/*'] ，若不想限制，则设置为 []
meta: {// 自定义上传参数，例如传递验证的 token 等，参数会被添加到 formData 中，一起上传到服务端
'TENANT-ID': store.getters.userInfo.tenantId,
Authorization: 'Bearer ' + store.getters.access_token
},
metaWithUrl: false, // 将 meta 拼接到 URL 参数中，默认 false
headers: {// 设置 HTTP 请求头信息
'TENANT-ID': store.getters.userInfo.tenantId,
Authorization: 'Bearer ' + store.getters.access_token
},
server: this.uploadImageUrl, // 上传图片接口地址
withCredentials: false, // 跨域是否传递 cookie ，默认为 false
timeout: 5 * 1000, // 超时时间，默认为 10 秒，此次设置为 5 秒
// 自定义插入图片
customInsert(res, insertFn) {
// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
// 注意此处将返回的文件路径拼接出来放入,注意应该是完整地址，res为上传后接口返回的数据
let file_url = '';
insertFn(file_url, res.data.fileName, file_url);
},
// 上传之前触发
onBeforeUpload(file) {
return file
},
// 上传进度的回调函数
onProgress(progress) {
console.log('progress', progress)
},
// 单个文件上传成功之后
onSuccess(file, res) {
console.log(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) {
console.log(`${file.name} 上传失败`, res)
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
console.log(`${file.name} 上传出错`, err, res)
}
}
},
/**
* 获取编辑器文本内容
*/
getEditorText() {
const editor = this.editor
if (editor != null) {
return editor.getText()
}
},
/**
* 获取编辑器Html内容
*/
getEditorHtml() {
const editor = this.editor
// 下方三行用来获取编辑器工具栏分组
// const toolbar = DomEditor.getToolbar(this.editor)
// const curToolbarConfig = toolbar.getConfig()
// console.log( curToolbarConfig.toolbarKeys )
if (editor != null) {
return editor.getHtml()
}
},
/**
* 填充编辑器Html内容
*/
setEditorHtml(html) {
const editor = this.editor
if (editor != null) {
editor.setHtml(html)
}
}
},
created() {
},
mounted() {
this.setSpellCheckFasle() // 设置拼写检查 spellcheck 为假
document.activeElement.blur() // 取消富文本自动聚焦且禁止虚拟键盘弹出
},
/**
* 销毁富文本编辑器
*/
beforeDestroy() {
const editor = this.editor
if (editor != null) {
editor.destroy()
}
}
}
script>
<style src="@wangeditor/editor/dist/css/style.css">style>
<style lang="less" scoped>
.w-e-full-screen-container {
z-index: 99;
}
.w-e-for-vue {
margin: 0;
border: 1px solid #ccc;
.w-e-for-vue-toolbar {
border-bottom: 1px solid #ccc;
}
.w-e-for-vue-editor {
height: auto;
/deep/ .w-e-text-container {
.w-e-text-placeholder {
top: 6px;
color: #666;
}
pre {
code {
text-shadow: unset;
}
}
p {
margin: 5px 0;
font-size: 14px; // 设置编辑器的默认字体大小为14px
}
}
}
}
style>
有关子组件传值的内容可以点击此链接>>查看。
到这里，拥有完整功能的富文本编辑器就完成了。
