百度富文本vue项目中的使用回显及无法编译问题
文章 4990 0 0 0
发布时间:2018年08月17日

百度富文本配置这里不做过多的说明,详情请参看官网文档,http://fex.baidu.com/ueditor/#start-config

1.ue.vue模板组件

<template>
    <script  ref="editor" type="text/plain"></script>
</template>
<script>
/ eslint-disable /
import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.js'
import '../../static/ueditor/lang/zh-cn/zh-cn.js'
export default {
    name:"ueditor",
    data() {
        return {
            id:'ueditorId'+Math.random().toString(16).substring(2) ,
            editor:null
        };
    },
    props: {
        value: {
            type: String,
            default: null,
        },
        config: {
            type: Object,
            default: function(){
                return {
                    autoHeightEnabled: false,
                    autoFloatEnabled: true,
                    initialContent: "",
                    autoClearinitialContent: true,
                    initialFrameWidth: null,
                    initialFrameHeight: 450,
                    BaseUrl: "",
                    UEDITOR_HOME_URL: "static/ueditor/"
                }
            },
        }
    },
    watch: {
    },
    mounted() {
        this.$nextTick(function f1() {
        // 保证 this.$el 已经插入文档
        this.$refs.editor.id = this.id;
        this.editor= UE.getEditor(this.id, this.config);
        this.editor.ready(function f() {
        }.bind(this));
        });
    },
    methods: {
        getUEContent: function () { //对外暴露的获取富文本内容接口
            return this.editor.getContent();
        },
        setUEContent: function (data) {  //对外暴露的获取富文本内容接口
            this.editor.ready(function f() {
                this.editor.setContent('<p>'+data+'</p>', false);
            }.bind(this));
        },
        destroyUE(){ //对外暴露销毁组件接口
        // this.editor1.destroy();
        }
    }
}
</script>

2.在update.vue组件中引用

//引入

inport ueditorOne from '组件位置'

//template部分

<ueditorOne ref="diseaseFileUeditor"></ueditorOne>

//使用

this.$refs.diseaseFileUeditor.setUEContent('要加载的数据。。。。。')
this.$refs.diseaseFileUeditor.getUEContent() //获取富文本编辑后的内容

写到这你会发现虽然百度富文本编辑器可以使用了,当你用富文本提交数据时试正常的,但是在那到数据放到富文本当中的时候却出现了问题,html标签无法被转义直接把转义标签回显到富文本当中追梦猪,想了很多办法也无济于事,所以采用方法过滤

HTMLDecode(text) {//转换为html
    var temp = document.createElement("div"); 
    temp.innerHTML = text; 
    var output = temp.innerText || temp.textContent; 
    temp = null; 
    return output; 
},
评论专区