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

最新推荐文章于 2024-09-10 10:55:39 发布

丝月

最新推荐文章于 2024-09-10 10:55:39 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/SHUIYI_24/article/details/103858123

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成百度的UEditor富文本编辑器，包括下载、配置、组件化及定制功能的过程。通过具体步骤与代码示例，展示了如何解决跨域图片显示问题，以及如何通过配置实现编辑器功能的个性化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载

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

下载Jsp 版本 UTF-8版

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

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

在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>
    <!--下面通过传递进来的id完成初始化-->
    <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>

最终效果如图：

五、配置

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

有两种方式

初始化时添加配置，如下

<script type="text/javascript">
    //实例化编辑器
    var ue = UE.getEditor('editor', {
    toolbars: [
        [
            'undo', //撤销
            'bold', //加粗
            'underline', //下划线
            'preview', //预览
            'horizontal', //分隔线
            'inserttitle', //插入标题
            'cleardoc', //清空文档
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'attachment', //附件
            'music', //音乐
            'inserttable', //插入表格
            'emotion', //表情
            'insertvideo', //视频
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'fullscreen', //全屏
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            'template', //模板
             ]
        ]
    });
</script>

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