1.import 引入ueditor时，在封装组件中引入，不要在mian.js内引入，在main.js内引入会造成
1.Uncaught SyntaxError: Unexpected token :
这种错误，属于是跨域问题，目前不清楚是什么原因和原理，但是引入时尽量在使用的组件中引入，不要全局引入
2.使用ueditor时，需要注意在引入编辑器的样式，在ueditor.config.js内 添加代码：
window.UEDITOR_HOME_URL = "static/ueditor/";
因为解压后ueditor文件放在Vue项目的static下，ueditor是放到项目的ueditor编辑器的文件夹名，所以路径如上
项目代码：
ue.vue：
<template>
<div>
<script :id=id type="text/plain"></script>
</div>
</template>
<script>
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
id: {
type: String
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
},
getUEContentTxt() { // 获取纯文本内容方法
return this.editor.getContentTxt()
}
},
destroyed() {
this.editor.destroy();
}
}
</script>
ueditorDemo.vue:
<template>
<div id="app">
<div>
<UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue1"></UE>
</div>
</div>
</template>
<script>
import UE from '@/components/ueditor/ueditor.vue'
export default{
components: {UE},
data() {
return {
//---- start ----- ue 编辑器相关
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
toolbars: [
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help']
],//'simpleupload',单个图片上传，不显示
},
defaultMsg: '',
ue1: "ue1", // 不同编辑器必须不同的id
//---- end----- ue 编辑器相关
}
},
methods: {
// 获取内容方法
// this.$refs.uel.getUeContent();
}
}
</script>
UEditor中的方法：
1. 实例化编辑器到id为 container 的 dom 容器上：
var ue = UE.getEditor('container');
2. 设置编辑器内容：
ue.setContent('<p>hello!</p>');
3. 追加编辑器内容：
ue.setContent('<p>new text</p>', true);
4. 获取编辑器html内容：
var html = ue.getContent();
5. 获取纯文本内容：
ue.getContentTxt();
6. 获取保留格式的文本内容：
ue.getPlainTxt();
7. 判断编辑器是否有内容：
ue.hasContents();
8. 让编辑器获得焦点：
ue.focus();
9. 让编辑器失去焦点
ue.blur();
10. 判断编辑器是否获得焦点：
ue.isFocus();
11. 设置当前编辑区域不可编辑：
ue.setDisabled();
12. 设置当前编辑区域可以编辑：
ue.setEnabled();
13. 隐藏编辑器：
ue.setHide();
14. 显示编辑器：
ue.setShow();
15. 清空内容：
ue.execCommand('cleardoc');
16. 读取草稿箱：
ue.execCommand('drafts');
17. 清空草稿箱：
ue.execCommand('clearlocaldata');methods:{
getUEContent: function(){
return this.editor.getContent();
},
getContentTxt: function(){
return this.editor.getContentTxt();
},
setUEContent:function (data) {
let _this = this;
this.editor.addListener('ready',function () {// 添加监听事件，否则会报错"cannot set property 'innerHTML' of null" ready 编辑器准备就绪后会触发该事件
_this.editor.setContent(data);
});2.vue使用ueditor时，打包后样式丢失问题
封装ue组件来初始化ueditor后，在要引入ue组件的父组件中定义config时在里面加上
UEDITOR_HOME_URL: 'static/ueditor/'，这样打包就不会丢失样式了，例如：
第一个箭头id一定要有，并且不重复
第二个箭头就是上面所说的，解决打包后样式不丢失的办法
特别注意不要手贱在static的前面加上/
3.后端图片上传的配置：以下是上传到本地Tomcat为例
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "http://192.168.1.118:8080", /* 图片访问路径前缀 */
"localSavePathPrefix":"D:\\Program Files\\apache-tomcat-8.0.50\\webapps",
"imagePathFormat": "/ueImg/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
上传的具体代码中：
state.putInfo( "title", picName);//文件名填入此处
state.putInfo( "group", "");//所属group填入此处
state.putInfo( "url", savePath);//文件访问的url填入此处
return state;
红色地方重要，是上传完后返回到前端的访问路径