ueditor在vue中的使用
2019-10-17 本文已影响0人
gem_Y
1、从官网上 下载 ueditor :
http://ueditor.baidu.com/website/download.html
2、解压复制到static下
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>