ueditor在vue中的使用

1、从官网上 下载 ueditor :
http://ueditor.baidu.com/website/download.html

image.png

2、解压复制到static下

image.png
5、文档
http://fex.baidu.com/ueditor/#start-toolbar
上传图片等后台相关的功能需要部署后端:
http://fex.baidu.com/ueditor/#server-deploy

4、代码

<template>
  <div class="hf-home__container">
    <div class="hf-home__tit">
      编辑器
      <div :id="editorId" name="content" type="text/plain" class="editor"></div>
    </div>
  </div>
</template>

<script>
import '../../../static/ueditor/ueditor.config'
import '../../../static/ueditor/ueditor.all'
import '../../../static/ueditor/lang/zh-cn/zh-cn'

/**
 * 百度ueditor插件，由于应用场景特殊，修改了部分源码：
 * 1. 为了便于后台获取用户上传的文件，ueditor.all.js 24802行，上传附件去掉icon img标签，同时添加hf-attachment属性，并将此属性添加至xss白名单；
 * 2. 为了便于后台获取用户上传的图片，给生成的img标签添加了hf-image属性，同时将此属性添加至xss白名单
 * 3. 图片上传仅支持从本地上传，所以删掉了/dialog/image/image.html下的其他tab；
 * 4. 文件上传仅支持从本地上传，所以删掉了/dialog/attachment/attachment.html下的其他tab；
 * 5. 为了解决插入图片后不发生contentchange事件，在ueditor.all.js 23832行调用 me.fireEvent('contentchange');；
*/

export default {
  name: 'editor-index',
  data() {
    return {
      ue: '',
      UE: null,
    }
  },
  computed: {
    editorId() {
      const date = new Date().getTime();
      const rom = Math.random() * 100;// 加个随机数 避免重复id
      return `ueditor-${date + rom}`;
    },
  },
  methods: {
  },
  mounted() {
    this.UE = window.UE;
    const self = this;
    const api = 'http://xxx:8080';
    const opts = {
      BaseUrl: '',
      initialFrameWidth: '100%',
      UEDITOR_HOME_URL: '/static/ueditor/',
      fileUrlPrefix: api, // 附件上传
      imageUrlPrefix: 'http://xxx:8100/fileUpload/uploadFile', // 本地图片上传
      scrawlUrlPrefix: api, // 涂鸦上传
      videoUrlPrefix: api, // 视频上传
      snapscreenUrlPrefix: api, // 截图上传
      catcherUrlPrefix: api,
      serverUrl: `http://xxxx:8100/fileUpload/uploadFile`, // 服务器统一请求接口路径
      catchRemoteImageEnable: false,
      toolbars: [
        [
          'source',
          'customstyle',
          'paragraph',
          'bold',
          'italic',
          'fontsize',
          'underline',
          'fontborder',
          'strikethrough',
          'superscript',
          'subscript',
          'removeformat',
          'formatmatch',
          'autotypeset',
          'blockquote',
          'pasteplain',
          '|',
          'forecolor',
          'backcolor',
          'insertorderedlist',
          'insertunorderedlist',
          'selectall',
          'cleardoc',
          'insertimage',
          'attachment',
          'kityformula',
          'inserttable',
          'deletetable',
          'insertparagraphbeforetable',
          'insertrow',
          'deleterow',
          'insertcol',
          'deletecol',
          'mergecells',
          'mergeright',
          'undo', //撤销
          'redo', //重做
        ],
      ],
    };

    this.ue = this.UE.getEditor(this.editorId, Object.assign(opts, this.opts));

    // 如果已经有这个编辑器，直接赋值
    if (this.UE[this.editorId]) {
            // 设置内容
      this.ue.setContent('设置的内容哒哒哒哒哒哒');
      this.ue.ready(() => {
        this.ue.setContent(self.initContent);
      });
    }

    // 第一次加载时，等ready后再设置编辑器里的内容
    this.ue.addListener('ready', () => {
      // 设置内容
      this.ue.setContent('<h1>设置的内容哒哒哒哒哒哒</h1>');
      if (self.initContent) {
        this.ue.setContent(self.initContent);
      }
    });

    // 监听内容变化
    this.ue.addListener('contentchange', () => {
      console.log('getContent', this.ue.getContent());
    });
  }
};
</script>

<style lang="scss">
@import './index.scss';
</style>