百度富文本vue项目中的使用回显及无法编译问题

百度富文本vue项目中的使用回显及无法编译问题

百度富文本配置这里不做过多的说明,详情请参看官网文档,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; 
            },


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容