vue使用百度富文本教程

我会带着你远行 2022-12-26 04:45 202阅读 0赞

众所周知，富文本插件市面上多的很，国外的我们不谈，国内的也多如牛毛！！不得不说的是，百度自家的产品还是很不错的》》虽然早就不维护了。也比一些小流的好用，功能全。虽然操作起来复杂的多

> 直接贴代码  
> 引入就不废话了，直接全局挂载

引入

import '../static/ue/ueditor.config.js'
    import '../static/ue/ueditor.all.js'
    import '../static/ue/lang/zh-cn/zh-cn.js'
    import '../static/ue/ueditor.parse.min.js'

模板

<template>
      <div>
        <script id="editor" type="text/plain"></script>
      </div>
    </template>
    <script>
      export default { 
        name: 'UE',
        data () { 
          return { 
            editor: null
          }
        },
        props: { 
          defaultMsg: { 
            type: String
          },
          config: { 
            type: Object
          }
        },
        mounted() { 
          const _this = this;
          this.editor = UE.getEditor('editor', this.config); // 初始化UE
          this.editor.addListener("ready", function () { 
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
          });
        },
        methods: { 
          getUEContent() {  // 获取内容方法
            return this.editor.getContent()
          }
        },
        destroyed() { 
          this.editor.destroy();
        }
      }
    </script>

这里注册个组件

<template>
      <div>
              <div class="editor-container" >
                <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
              </div>
      </div>
    </template>
    <script>
    
      import UE from '../components/ue'
      export default { 
    components: { UE},
        data() { 
          return { 
            defaultMsg: '',
            config: { 
              initialFrameWidth: 800,
              initialFrameHeight: 350
            },
            data:'',
            ruleForm: { 
              content:''
            },
           
        },
        watch: { },
        methods: { 
          getUEContent() { 
                this.ruleForm.content = this.$refs.ue.getUEContent();     
                //console.log(this.ruleForm.content)
              },
          // 获取编辑信息
          article() { 
           this.$get('td/noticeInfo' + '/' + this.$route.query.id).then(res => { 
              if (res.code == 200) { 
                //console.log(res)
                this.ruleForm = res.data
                if (res.data.disabled === 'true') { 
                  this.ruleForm.disabled = true
                } else { 
                  this.ruleForm.disabled = false
                }
                this.defaultMsg = res.data.content
              }
            })
          },
        
        created() { 
          this.app_ids()
          this.id = this.$route.query.id
        },
        mounted () { 
          this.$nextTick(()=> { 
            //console.log('加载完毕')
             if (this.$route.query.id) { 
                  this.article()
              }
          })
         
       }
      };
    </script>
    
    <style scoped>
    
    
    </style>