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样式变乱
ueditor默认会把很多标签过滤替换掉,改变原本的html结构
table嵌套table,的样式会乱掉
在ueditor destroy后,并没有注销window.onscroll事件(ueditor为了实现操作栏顶部吸附的效果注册的),导致报错