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']

 ueditor.config.js 解决部分常见问题 - 从入门到入土 - 博客园 (cnblogs.com)

posted @ 2022-04-22 14:53  从入门到入土  阅读(285)  评论(0编辑  收藏  举报