UEditor vue代码,不识别部分标签问题
<template> <vue-ueditor-wrap :config="myConfig" v-model="copyContent" :editor-id="editorId"></vue-ueditor-wrap> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap'; export default { name: 'Editor', components: { VueUeditorWrap }, data() { return { editorId: `editor-${new Date().getTime()}`, //唯一id,防止editor缓存 copyContent: '' //内容 }; }, props: { // 富文本高度 initialFrameHeight: { type: Number, default() { return 400; } }, // 富文本内容 content: { type: String, default: '' }, // 富文本是否只读状态 readonly:{ type:Boolean, default:false } }, computed: { myConfig() { return { // 如果需要上传功能,找后端小伙伴要服务器接口地址,否则无法上传,上传功能需后端配合。 serverUrl: '', // 你的UEditor资源存放的路径,相对于打包后的index.html(路由使用history模式注意使用绝对路径或者填写正确的相对路径) UEDITOR_HOME_URL: './ueditor/', // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: this.initialFrameHeight, // 初始容器宽度 initialFrameWidth: '100%', // 关闭自动保存 enableAutoSave: true, // 是否启用元素路径,默认是true显示 elementPathEnabled: false, // 是否开启字数统计 wordCount: false, zIndex:1, readonly: this.readonly }; } }, model: { prop: 'content', event: 'change' }, watch: { copyContent(val) { let me = this; me.$emit('change', val); }, content:{ immediate:true, handler(val){ let me = this; me.copyContent = val; } } } }; </script> <style lang="scss"> .translate-edit-production .edui-default.edui-toolbar{ div{ height: 22px!important; } } </style>
编辑器下载地址 Release 发布 v1.4.3.3 · fex-team/ueditor · GitHub
vue中使用在public目录下创建ueditor文件夹,将解压后的文件复制进来
不识别标签可能是因为白名单问题,比如source标签
在ueditor.config.js中配置
找到whitList,配置
source: ['src']
![](https://img2022.cnblogs.com/blog/2506251/202207/2506251-20220728185657198-989542918.png)