Vue中使用wangeditor富文本编辑的问题

wangeditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。
在我们实际项目上还是比较频繁应用到的，下面出个案例供大家参考学习…

wangEdITor文档：https://www.wangeditor.COM/

富文本编辑器截图：

!--富文本编辑器。http://www.wangeditor.com/使用示例：ApPEditor v-model="content">
    /AppEditor>
    -->
    template>
     article ref="editor" class="AppEditor-root">
    /article>
    /template>
    script>
     const E = require('wangeditor');
 export default {
  name: 'AppEditor',  model: {
   PRop: 'value',   event: 'update:value',  }
,  props: {
   // value值，v-model绑定   value: {
type: String, default: ''}
,   // 菜单选项   menus: {
    type: Array,    default(){
         return [      'bold', // 粗体      'italic',//斜体      'underline',//下划线      'fontSize', // 字号      'strikeThrough',//删除线      'image', // 插入图片      'undo', // 撤销      // 'fontName', // 字体      // 'italic', // 斜体      // 'underline', // 下划线      // 'strikeThrough', // 删除线      // 'foreColor', // 文字颜色      // 'backColor', // 背景颜色      // 'link', // 插入链接      // 'list', // 列表      // 'justify', // 对齐方式      // 'quote', // 引用      // 'emoticon', // 表情      // 'image', // 插入图片      // 'table', // 表格      // 'video', // 插入视频      // 'code', // 插入代码      // 'undo', // 撤销      // 'redo', // 重复     ];
    }
,   }
,  }
,  data(){
   return {
    editor: {
}
, // 编辑器对象    _value: '', // 内容备份，用于watch时候判断，只在编辑器输入时改变   }
    ;
  }
,  computed: {
}
,  mounted(){
       this.initEditor();
  }
,  watch: {
   value(newValue, oldValue){
    // 编辑器onchange更改的不处理，只处理父组件传来的，防止文字回退bug    if (newValue != this._value) {
         this.editor.txt.htML(newValue);
    }
   }
,  }
,  methods: {
   initEditor(){
        let editor = new E(this.$refs.editor);
    Object.assign(editor.customconfig, {
         menus: this.menus,     zIndex: 100,     height: 200,     pastefilterstyle: false,     onchange: (html) =>
 {
          this._value = html;
     // 更新 _value      this.$emit('update:value', html);
 // 更新 value     }
    ,     customUploadimg:((file, insert)=>
 {
      if(this.$utils.iSEMpty(file)){
           return;
      }
      const msg = this.$Message.loading({
       content: '亲，图片正在拼命地上传中，请稍等...',       duration: 0      }
    );
          VAR params = new FormData();
          params.append('img', file[0]);
          this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res =>
 {
           insert(res.data.imgUrl)       setTimeout(msg, 0);
           this.$Message.success('上传成功');
      }
)     }
),     uploadImgHooks:{
      customInsert: function (insertImg, result, editor) {
       insertImg(result.url)      }
     }
    }
    );
        editor.create();
        editor.txt.html(this.value);
     // 针对数据异步获取的这里无法立即绑定，在watch判断处理    this.editor = editor;
   }
,  }
, }
    ;
    /script>
    style scoped lang="scss">
 .AppEditor-root{
     border: 1px solid #f0f0f0;
     height: 400px !important;
  /deep/ .w-e-toolbar{
     border: none !important;
     border-bottom: 1px solid #f0f0f0 !important;
     background-color: #fff !important;
  }
  /deep/ .w-e-text-container{
     height: calc(100% - 43px) !important;
     border: none !important;
     z-index:1 !important;
   .w-e-text{
     height: 100%;
     overflow-y: auto !important;
}
  }
 }
    /style>
    

到此这篇关于Vue中使用wangeditor富文本编辑的问题的文章就介绍到这了,更多相关wangeditor富文本编辑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 在vue中获取wangeditor的html和text的操作
• Vue 中使用富文本编译器wangEditor3的方法
• 轻量级富文本编辑器wangEditor结合vue使用方法示例
• vue中wangEditor的使用及回显数据获取焦点的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！