vue中使用百度富文本编辑器

不念不忘少年蓝@ 2023-06-27 11:22 44阅读 0赞

一、下载

[https://ueditor.baidu.com/website/download.html\#ueditor][https_ueditor.baidu.com_website_download.html_ueditor]

下载Jsp 版本 [UTF-8版][UTF-8]

二、下载完成后将文件放入vue项目中的静态资源文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

按照自己的实际路径修改ueditor.config.js中的window.UEDITOR\_HOME\_URL配置，如下图：

![20200106152000925.png][]

在main.js中引用如下

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

三、编辑器组件

<template>
      <div>
        
        <script :id="randomId" type="text/plain"></script>
      </div>
    </template>
    
      <script>
    export default {
      name: "UE",
      props: {
        value: {
          default: function() {
            return "";
          }
        },
        //配置可以传递进来
        config: Object
      },
      data() {
        return {
          //每个编辑器生成不同的id,以防止冲突
          randomId: "editor_" + Math.random() * 100000000000000000,
          //编辑器实例
          instance: null,
          ready: false
        };
      },
      watch: {
        value: function(val, oldVal) {
          if (val != null && this.ready) {
            this.instance = UE.getEditor(this.randomId, this.config);
            this.instance.setContent(val);
          }
        }
      },
      //此时--el挂载到实例上去了,可以初始化对应的编辑器了
      mounted() {
        this.initEditor();
    
      },
    
      beforeDestroy() {
        // 组件销毁的时候，要销毁 UEditor 实例
        if (this.instance !== null && this.instance.destroy) {
          this.instance.destroy();
        }
      },
      methods: {
        initEditor() {
          const _this = this;
          //dom元素已经挂载上去了
          this.$nextTick(() => {
            this.instance = UE.getEditor(this.randomId, this.config);
            // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
            this.instance.addListener("ready", () => {
              this.ready = true;
              this.$emit("ready", this.instance);
            });
          });
        },
        setText(con) {
          this.instance = UE.getEditor(this.randomId, this.config);
          this.instance.setContent(con);
        },
        getUEContent() {
          // 获取内容方法
          return this.instance.getContent();
        }
      }
    };
    </script>
    
    <style scoped>
    #edui1 {
      width: 100%;
    }
    </style>

四、调用组件

<template>
      <div class="components-container">
        <button @click="getUEContent()">获取内容</button>
        <button @click="setText()">设置内容</button>
        <div class="editor-container">
          <UE :value="defaultMsg" :config="config" ref="ue"></UE>
        </div>
      </div>
    </template>
    <style>
    
    </style>
    <script>
      import UE from '../../components/ue.vue';
      export default {
        components: {UE},
        data() {
          return {
            defaultMsg: '这里是UE测试',
            config: {
              initialFrameWidth: null,
              initialFrameHeight: 500
            }
          }
        },
        methods: {
          getUEContent() {
            let content = this.$refs.ue.getUEContent();
            console.log(content)
          },
          setText(){
            let content = this.$refs.ue.setText();
          }
        }
      };
    </script>

最终效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1][]

五、配置

实例化后的初始编辑器,里面的功能有很多,其中有一部分可能是我们完全用不到的,百度提供了可以定制的功能

有两种方式

初始化时添加配置，如下

想定制什么功能,只需要参照上面下载的编辑器demo内的ueditor.config.js文件中toolbars属性,将对应的字符串添加进去即可:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2][]

ueditor.config.js文件可以定制编辑器的很多功能,只需要将对应属性前面的'//'去掉,true为开启,false为关闭进行设置即可.比如:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3][]

实际应用时我们还有可能在一个域名下上传百度编辑器编辑的内容(例如:在www.52lnamp.com域名下上传了一张图片)，而需求不单单是要在这域名下展示,还需要可以在其它域名下展示,这时就会出现图片不存在的情况，

这是因为百度编辑器的配置文件中默认的上传路径是相对路径，也就是说上面上传的图片的地址是相对于当前的域名进行上传的,只有在你上传的域名下可以展示,其它域名是显示不出来的,

如果要在另外一个域名上展示的话只需要修改配置文件为绝对路径就可以了，打开上面下载的demo，找到php/config.json文件,打开后你会看到

![format_png][]

其中imageUrlPrefix这个属性加上域名即可:"imageUrlPrefix": "http://www.xxx.com", /\* 图片访问路径前缀 \*/

需要注意的是添加域名的时候必须带上http or https,只有这样写出来的才能正常显示,不加的话在你引用的时候会在前面重复加上一个域名,基本了解了这些足以应对日常的需求,有其它另类的需求可以参考[百度编辑器文档][Link 1]

图片上配置参考如下

[https://blog.csdn.net/weixin\_42310713/article/details/100113018][https_blog.csdn.net_weixin_42310713_article_details_100113018]

[https_ueditor.baidu.com_website_download.html_ueditor]: https://ueditor.baidu.com/website/download.html#ueditor
[UTF-8]: https://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106151717734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[20200106152000925.png]: https://img-blog.csdnimg.cn/20200106152000925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106153348248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200106154036513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200106154200387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQxMzI5OS8yMDE4MDYvMTQxMzI5OS0yMDE4MDYyNzEwNTI1ODQ5OC0xMzU3NzQzNzgxLnBuZw?x-oss-process=image/format,png
[Link 1]: http://fex.baidu.com/ueditor/
[https_blog.csdn.net_weixin_42310713_article_details_100113018]: https://blog.csdn.net/weixin_42310713/article/details/100113018