<style lang="less" scoped>
.toolbarContainer{
width: 100%;
height: 50px;
}
.toolbar{
width: 100%;
height: 50px;
overflow: auto;
padding: 0px;
}
.toolbar::-webkit-scrollbar{ //去掉滚动条
display:none;
}
</style>
<template>
<div>
<div ref="toolbarContainer" class="toolbarContainer" slot="toolbarContainer">
<div ref="toolbar" class="toolbar" slot="toolbar">
<Toolbar ref="toolbarComponent" :instance="instance" style="min-width:780px;"></Toolbar>
</div>
</div>
<div style="padding-left:32px;padding-right:32px;">
<script :id="randomId" name="content" type="text/plain"></script>
</div>
</div>
</template>
<script>
import Toolbar from './editor-toolbar.vue'
import jQuery from './jquery-plugin.js'
export default {
name: 'VueUEditor',
props: {
ueditorPath: {
// UEditor 代码的路径
type: String,
default: '/ueditor/'
},
ueditorConfig: {
// UEditor 配置项
type: Object,
default: function () {
return {};
}
}
},
mounted(){
this.ueditorConfig.toolbars = [ //@king:切勿调整顺序，自定义工具栏中用到了对应顺序的id
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
];
},
data () {
return {
// 为了避免麻烦，每个编辑器实例都用不同的 id
randomId: 'editor_' + (Math.random() * 100000000000000000),
instance: null,
// scriptTagStatus -> 0:代码未加载，1:两个代码依赖加载了一个，2:两个代码依赖都已经加载完成
scriptTagStatus: 0,
showFixedToolbar: false,
$$cloneToolbar: null
};
},
created () {
if (window.UE !== undefined) {
// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
this.scriptTagStatus = 2;
this.initEditor();
} else {
// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
this.insertScriptTag();
}
},
beforeDestroy () {
// 组件销毁的时候，要销毁 UEditor 实例
if (this.instance !== null && this.instance.destroy) {
this.instance.destroy();
}
},
methods: {
insertScriptTag () {
let editorScriptTag = document.getElementById('editorScriptTag');
let configScriptTag = document.getElementById('configScriptTag');
// 如果这个tag不存在，则生成相关代码tag以加载代码
if (editorScriptTag === null) {
configScriptTag = document.createElement('script');
configScriptTag.type = 'text/javascript'; configScriptTag.src = this.ueditorPath + 'ueditor.config.js'; configScriptTag.id = 'configScriptTag';
editorScriptTag = document.createElement('script');
editorScriptTag.type = 'text/javascript'; editorScriptTag.src = this.ueditorPath + 'ueditor.all.js'; editorScriptTag.id = 'editorScriptTag';
let s = document.getElementsByTagName('head')[0];
console.log(editorScriptTag)
s.appendChild(configScriptTag);
s.appendChild(editorScriptTag);
}
// 等待代码加载完成后初始化编辑器
if (configScriptTag.loaded) {
this.scriptTagStatus++;
} else {
configScriptTag.addEventListener('load', () => {
this.scriptTagStatus++;
configScriptTag.loaded = true;
this.initEditor();
});
}
if (editorScriptTag.loaded) {
this.scriptTagStatus++;
} else {
editorScriptTag.addEventListener('load', () => {
this.scriptTagStatus++;
editorScriptTag.loaded = true;
this.initEditor();
});
}
this.initEditor();
},
initEditor () {
// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
if (this.scriptTagStatus === 2 && this.instance === null) {
// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
// 所以，我们只能在 nextTick 里面初始化 UEditor
this.$nextTick(() => {
this.instance = window.UE.getEditor(this.randomId, {});
// 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
this.instance.addListener('ready', () => {
this.$emit('ready', this.instance);
});
});
}
},
// fixToolbar(isFix, scrollDom){
// if(isFix){
// this.$refs['toolbarComponent'].hideAllFloatPanel();
// if(this.$$cloneToolbar){
// this.$$cloneToolbar.show();
// }else{
// let toolbar_jQuery = jQuery(this.$refs['toolbar'].$el);
// this.$$cloneToolbar = jQuery(toolbar_jQuery).clone(true);
// let scroll_jQuery = jQuery(scrollDom);
// scroll_jQuery.append(this.$$cloneToolbar);
// this.$$cloneToolbar.css({
// 'position': 'fixed',
// 'left': scroll_jQuery.offset().left + parseInt(scroll_jQuery.css('border-left-width')),
// 'top': scroll_jQuery.offset().top,
// 'z-index': '999999999999999',
// 'width': toolbar_jQuery.outerWidth(),
// 'height': toolbar_jQuery.outerHeight()
// });
// // console.log(toolbar_jQuery.width(), toolbar_jQuery.height(), scroll_jQuery.offset().left, scroll_jQuery.offset().top, scroll_jQuery.position().left, scroll_jQuery.position().top);
// toolbar_jQuery.resize(()=>{
// this.$$cloneToolbar.css({
// 'position': 'fixed',
// 'left': scroll_jQuery.offset().left + parseInt(scroll_jQuery.css('border-left-width')),
// 'top': scroll_jQuery.offset().top,
// 'z-index': '999999999999999',
// 'width': toolbar_jQuery.outerWidth(),
// 'height': toolbar_jQuery.outerHeight()
// });
// this.$refs['toolbarComponent'].hideAllFloatPanel();
// });
// }
// }else{
// if(this.$$cloneToolbar){
// this.$$cloneToolbar.hide();
// }
// }
// this.showFixedToolbar = isFix;
// }
fixToolbar(isFix, scrollDom){
let toolbar_jQuery = jQuery(this.$refs['toolbar']);
let toolbarContainer_jQuery = jQuery(this.$refs['toolbarContainer']);
if(isFix){
this.$refs['toolbarComponent'].hideAllFloatPanel();
let scroll_jQuery = jQuery(scrollDom);
toolbar_jQuery.css({
'position': 'fixed',
// 'left': scroll_jQuery.offset().left + parseInt(scroll_jQuery.css('border-left-width')),
'top': scroll_jQuery.offset().top,
'z-index': '99999999999999',
'width': toolbar_jQuery.outerWidth(),
'height': toolbar_jQuery.outerHeight()
});
scroll_jQuery.resize(()=>{
if(this.$refs['toolbarComponent']){
this.$refs['toolbarComponent'].hideAllFloatPanel();
}
toolbar_jQuery.css({
'position': 'fixed',
// 'left': scroll_jQuery.offset().left + parseInt(scroll_jQuery.css('border-left-width')),
'top': scroll_jQuery.offset().top,
'z-index': '99999999999999',
'width': scroll_jQuery.width(),
// 'height': scroll_jQuery.height()
});
// toolbar_jQuery.css({
// 'position': 'static'
// });
// toolbar_jQuery.css({
// 'position': 'fixed'
// });
});
}else{
toolbar_jQuery.css({
'position': 'static'
});
}
this.showFixedToolbar = isFix;
},
resetToolbar(){
let toolbar_jQuery = jQuery(this.$refs['toolbar']);
toolbar_jQuery.css({
'position': 'static'
});
},
execCommand(command, param){
if(this.instance){
this.instance.execCommand(command, param);
}
}
},
components:{
Toolbar
}
};
</script>