vue中使用百度编辑器Ueditor

1.下载Ueditor文件

https://ueditor.baidu.com/website/download.html

 

2.安装

       vue-editor-wrap
  npm i vue-ueditor-wrap 


3. 配置下载好的Ueditor文件

1.将下载好的文件解压后放到static文件夹内

2. 找到ueditor.config.js文件并打开,

   找到window.UEDITOR_HOME_UR 将它设置为:window.UEDITOR_HOME_URL = "/项目名/static/ue/";

   然后找到serverUrl,删掉或者注释

3.在main.js 引用 UEditor

 

4.创建 UEditor VUE 组件

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  import '../../static/UE/ueditor.config.js'
  import '../../static/UE/ueditor.all.min.js'
  import '../../static/UE/lang/zh-cn/zh-cn.js'
  import '../../static/UE/ueditor.parse.min.js'
  // UEDITOR_CONFIG.UEDITOR_HOME_URL = '../../static/UE/'
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object,
        toolbars: [
          ['customstyle', 'paragraph', 'fontfamily', 'fontsize']
        ]
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor',{initialFrameHeight:250,
         //功能按钮列表
        toolbars:[['undo', 'redo', '|',
          'bold', 'italic', 'underline','customstyle', 'paragraph', 'fontfamily', 'fontsize','|','print','preview']]},this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      },
      delUEContent(name){
        return this.editor.setContent(name,false)
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>
<style scoped lang="less">
  div{
    width:100%;
  }
</style>

 效果图: 

因为我要只需用到这几个功能按钮,如果需要其它可以去ueditor.config.js文里查看或直接百度 

 

5.引用UEditor

<template>
  <div>
<div style="overflow-y: auto;">
                <div class="edit_container" style="width:75%;height:350px;">
                  <UE :defaultMsg=defaultMsg :config=config ref="ue" v-model="types.body"></UE>
                </div>
              </div>
  </div>
</template>
<script>
  import UE from '../../../components/Ueditor.vue'
  export default {
    name: "productType",
    components: {
      UE
    },
    data(){
      return{
        defaultMsg: '',
     //设置高度
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 300,
          autoHeightEnabled: true,
          autoFloatEnabled: true
        },
        body:'',
      }
    },
    methods: {
      add(name){
        //调用组件方法 获取编辑器输入的内容
        var UEContent = this.$refs.ue.getUEContent
        this.types.body = UEContent()
       //清空编辑器输入的内容
        var delUE=this.$refs.ue.delUEContent
        delUE(this.defaultMsg,false)
          
      },
    },
    mounted() {
     
    },
    activated(){
      
    }
  }
</script>

 

 

 

 

 

原文链接:加载失败,请重新获取