ChickenDreamFactory/fe-question

ueditor使用和坑

Opened this issue · 0 comments

webVueBlog commented

一.下载ueditor

Ueditor项目下载地址：ueditor.baidu.com/website/

因为我使用的是vue，所以使用了这个插件vue-ueditor-wrap，安装改插件

<template>
  <div>
    <script id="editor" type="text/plain" ></script>
  </div>
</template>

<script>
  import '../../../public/UEditor/ueditor.config'
  import '../../../public/UEditor/ueditor.all'
  import '../../../public/UEditor/ueditor.parse'
  import '../../../public/UEditor/lang/zh-cn/zh-cn'
  export default {
    name: "UEditor",
    props: {
      id: {
          type: String
      },
      config: {
          type: Object
      }
    },
    data() {
      return {
        editor: null
      }
    },
    mounted() {
       //初始化UE
      let _this = this;
      _this.editor=window.UE.getEditor('editor',_this.config);
        //设置编辑器的内容
      _this.editor.addListener("ready", function () {
        //将 editor 传到父组件
        _this.$emit('getEditor',_this.editor)
        // _this.editor.setContent('<p>454646</p>'); // 确保UE加载完成后，放入内容。
      });
    },
    destoryed() {
      this.editor.destory();
    },
    methods:{
      getUEContent: function(){
          //获取内容方法 返回给父组件
       return this.editor.getContent();
      },
      getContentTxt: function(){
        return this.editor.getContentTxt();
      }
    }
  }
</script>
  • 如果当前页面的模块加载模式是AMD的 则定义模块
  • 如果是CommonJs的，则输出到模块 ZeroClipboard
  • 否则 把ZeroClipboard 定义为全局变量
  • 解决它网上有两种方法，但是我这里就用简单暴力的方法
    直接注释掉上面的判断，不使用模块加载模式来使用这个功能

EDITOR_HOME_URL 参数配置错误导致的。在 vue cli 2.x 生成的项目中使用本组件，默认值是 '/static/UEditor/'，在 vue cli 3.x 生成的项目中，默认值是 process.env.BASE_URL + 'UEditor/' 。

总而言之：无论本地开发和部署到服务器，你所指定的 UEditor 资源文件是需要真实存在的，vue-ueditor-wrap也会在 JS 加载失败时通过 console 输出它试图去加载的资源文件的完整路径，你可以借此分析如何填写。当需要区分环境时，你可以通过判断 process.env.NODE_ENV 来分别设置。

vue-cli3的区别

将下载好的压缩包解压并命名为UEditor放入你的public目录下

配置UEDITOR_HOME_URL的时候写成'/UEditor/'，

ueditor编辑html问题总结

table和td都会被ueditor加上间距，使原本的html样式变乱

image

ueditor默认会把很多标签过滤替换掉，改变原本的html结构

image

table嵌套table，的样式会乱掉

image

在ueditor destroy后，并没有注销window.onscroll事件(ueditor为了实现操作栏顶部吸附的效果注册的)，导致报错

image