361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
layui.define(["jquery", "component", "http"], function (exports) {
|
|
"use strict";
|
|
|
|
var $ = layui.$;
|
|
// 创建UEditorPlus组件
|
|
var ueditorPlus = layui.component({
|
|
name: "ueditor",
|
|
// 组件配置项
|
|
config: {
|
|
// 默认配置
|
|
UEDITOR_HOME_URL: "/assets/library/ueditor/",
|
|
serverUrl: "/ueditor", // 上传接口地址
|
|
loadConfigFromServer: true,
|
|
|
|
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",
|
|
"letterspacing",
|
|
"|",
|
|
"customstyle",
|
|
"paragraph",
|
|
"fontfamily",
|
|
"fontsize",
|
|
"|",
|
|
"directionalityltr",
|
|
"directionalityrtl",
|
|
"indent",
|
|
"|",
|
|
"justifyleft",
|
|
"justifycenter",
|
|
"justifyright",
|
|
"justifyjustify",
|
|
"|",
|
|
"touppercase",
|
|
"tolowercase",
|
|
"|",
|
|
"link",
|
|
"unlink",
|
|
"anchor",
|
|
"|",
|
|
"imagenone",
|
|
"imageleft",
|
|
"imagecenter",
|
|
"imageright",
|
|
"|",
|
|
"simpleupload",
|
|
"insertimage",
|
|
"emotion",
|
|
"scrawl",
|
|
"insertvideo",
|
|
"insertaudio",
|
|
"attachment",
|
|
"insertframe",
|
|
"insertcode",
|
|
"pagebreak",
|
|
"template",
|
|
"background",
|
|
"formula",
|
|
"|",
|
|
"horizontal",
|
|
"date",
|
|
"time",
|
|
// "spechars", // 特殊字符
|
|
"wordimage",
|
|
"|",
|
|
"inserttable",
|
|
"deletetable",
|
|
"insertparagraphbeforetable",
|
|
"insertrow",
|
|
"deleterow",
|
|
"insertcol",
|
|
"deletecol",
|
|
"mergecells",
|
|
"mergeright",
|
|
"mergedown",
|
|
"splittocells",
|
|
"splittorows",
|
|
"splittocols",
|
|
"|",
|
|
"print",
|
|
"preview",
|
|
"searchreplace",
|
|
"|",
|
|
"contentimport",
|
|
"ai",
|
|
"help",
|
|
],
|
|
],
|
|
toolbarShow: {
|
|
ai: false,
|
|
},
|
|
toolbarCallback: function (cmd, editor) {
|
|
// switch(cmd){
|
|
// case 'insertimage':
|
|
// editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
|
|
// console.log('toolbarCallback',cmd, editor)
|
|
// return true;
|
|
// case 'insertvideo':
|
|
// editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
|
|
// console.log('toolbarCallback',cmd, editor)
|
|
// return true;
|
|
// }
|
|
},
|
|
imageConfig: {
|
|
// 禁止本地上传
|
|
disableUpload: false,
|
|
// 禁止在线管理
|
|
disableOnline: false,
|
|
// 自定义选择按钮
|
|
selectCallback: null,
|
|
// selectCallback: function(editor,cb){
|
|
// console.log('selectCallback',cb);
|
|
// setTimeout(function(){
|
|
// cb({
|
|
// path:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
|
// name:'测试图片'
|
|
// });
|
|
// },1000);
|
|
// }
|
|
},
|
|
videoConfig: {
|
|
// 禁止本地上传,
|
|
disableUpload: false,
|
|
// 自定义选择按钮
|
|
selectCallback: null,
|
|
// selectCallback: function(editor,cb){
|
|
// console.log('selectCallback',cb);
|
|
// setTimeout(function(){
|
|
// cb({
|
|
// path:'https://www.bilibili.com/video/BV1y44y1g7NR?spm_id_from=333.1007.tianma.1-1-1.click',
|
|
// name:'测试视频'
|
|
// });
|
|
// },1000);
|
|
// }
|
|
},
|
|
formulaConfig: {
|
|
// 公式渲染链接模板
|
|
imageUrlTemplate: "https://latex.codecogs.com/svg.image?{}",
|
|
// 为了更稳定的公式渲染服务，可以使用
|
|
// 魔众官方公式转图片渲染引擎 https://api.tecmz.com
|
|
},
|
|
autoSaveEnable: true,
|
|
autoSaveRestore: true,
|
|
autoSaveKey: null,
|
|
initialContent: "<p>初始化内容</p>",
|
|
uploadServiceEnable: false,
|
|
uploadServiceUpload: function (type, file, callback, option) {
|
|
var i = 0;
|
|
var call = function () {
|
|
i++;
|
|
if (i > 3) {
|
|
callback.success({
|
|
state: "SUCCESS",
|
|
url: "https://ms-assets.modstart.com/demo/modstart.jpg",
|
|
});
|
|
return;
|
|
}
|
|
setTimeout(function () {
|
|
callback.progress(0.3 * i);
|
|
call();
|
|
}, 500);
|
|
};
|
|
call();
|
|
},
|
|
focus: true,
|
|
initialStyle: "p{line-height:1.5em}",
|
|
iframeCssStylesAddition: ["body { background-color: #f0f0f0; }", ".custom-class { font-size: 14px; color: #333; }", "p { line-height: 1.8; }"],
|
|
initialFrameWidth: "100%", // 初始宽度
|
|
initialFrameHeight: 320, // 初始高度
|
|
readonly: false,
|
|
enableContextMenu: true,
|
|
|
|
autoHeightEnabled: true, // 自动高度
|
|
autotypeset: {
|
|
// 合并空行
|
|
mergeEmptyline: true,
|
|
// 去掉冗余的class
|
|
removeClass: true,
|
|
// 去掉空行
|
|
removeEmptyline: false,
|
|
// 段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
|
|
textAlign: "left",
|
|
// 图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
|
|
imageBlockLine: "center",
|
|
// 根据规则过滤没事粘贴进来的内容
|
|
pasteFilter: false,
|
|
// 去掉所有的内嵌字号，使用编辑器默认的字号
|
|
clearFontSize: false,
|
|
// 去掉所有的内嵌字体，使用编辑器默认的字体
|
|
clearFontFamily: false,
|
|
// 去掉空节点
|
|
removeEmptyNode: false,
|
|
// 可以去掉的标签
|
|
removeTagNames: { div: 1 },
|
|
// 行首缩进
|
|
indent: false,
|
|
// 行首缩进的大小
|
|
indentValue: "2em",
|
|
// 全角转半角
|
|
bdc2sb: false,
|
|
// 半角转全角
|
|
tobdc: false,
|
|
},
|
|
// UEditorPlus文件路径配置
|
|
},
|
|
|
|
// 常量定义
|
|
CONST: {
|
|
MOD_NAME: "ueditor",
|
|
ELEM: "layui-ueditor-plus",
|
|
CLASS_EDITOR: "layui-ueditor-editor",
|
|
},
|
|
|
|
render: function (options) {
|
|
var that = this;
|
|
const { access_token } = layui.http.getTokens();
|
|
that.config.serverHeaders = {
|
|
Authorization: "Bearer " + access_token,
|
|
};
|
|
var config = $.extend(true, {}, this.config, options);
|
|
if (!config.elem) {
|
|
layui.hint().error("UEditorPlus组件: elem参数不能为空");
|
|
return that;
|
|
}
|
|
var elem = $(config.elem);
|
|
if (!elem.length) {
|
|
layui.hint().error("UEditorPlus组件: 元素 " + config.elem + " 不存在");
|
|
return that;
|
|
}
|
|
var id = config.id; //|| "ueditor-plus-" + that.index;
|
|
// 缓存配置
|
|
that.cache[id] = config;
|
|
// 创建编辑器容器
|
|
// var editorContainer = $('<div class="' + "layui-ueditor-editor" + '" id="' + id + '-container"></div>');
|
|
// elem.html(editorContainer);
|
|
|
|
that.loadUEditorPlus(config, function () {
|
|
that.initEditor(id, config);
|
|
});
|
|
return ueditorPlus.getInst(id);
|
|
},
|
|
beforeInit: function (options) {},
|
|
beforeRender: function (options) {},
|
|
extendsInstance: function (that) {
|
|
return {
|
|
close: function () {
|
|
that.remove(); // 调用组件原型中的 remove 方法
|
|
},
|
|
setContent: function (id,content) {
|
|
var that = ueditorPlus.getInst(id);
|
|
return that.ueditor.setContent(content);
|
|
},
|
|
getContent: function (id) {
|
|
var that = ueditorPlus.getInst(id);
|
|
return that.ueditor.getContent();
|
|
},
|
|
destroy: function (id) {
|
|
var that = ueditorPlus.getInst(id);
|
|
if (!that) return this;
|
|
that.ueditor.destroy();
|
|
},
|
|
getEditor: function (id) {
|
|
var that = ueditorPlus.getInst(id);
|
|
return that.ueditor || null;
|
|
},
|
|
reload: function (params) {},
|
|
};
|
|
},
|
|
});
|
|
// 获取构造器
|
|
var Class = ueditorPlus.Class;
|
|
|
|
// 初始化编辑器
|
|
Class.prototype.initEditor = function (id, config) {
|
|
var that = this;
|
|
var container = document.getElementById(id);
|
|
if (!container || !window.UE) {
|
|
layui.hint().error("UEditorPlus组件: 初始化失败，容器或编辑器未就绪");
|
|
return;
|
|
}
|
|
try {
|
|
// // 创建编辑器实例
|
|
var editor = UE.getEditor(id, config);
|
|
// 缓存编辑器实例
|
|
that.cache[id].editor = that.ueditor = editor;
|
|
} catch (e) {
|
|
layui.hint().error("UEditorPlus组件: 初始化异常 - " + e.message);
|
|
}
|
|
};
|
|
|
|
Class.prototype.ueditor = null;
|
|
Class.prototype.loadUEditorPlus = function (config, callback) {
|
|
var that = this;
|
|
// 检查是否已加载
|
|
if (window.UEDITOR_CONFIG || window.UEditorPlus) {
|
|
callback && callback();
|
|
return;
|
|
}
|
|
// 设置UEditorPlus全局配置
|
|
window.UEDITOR_HOME_URL = config.UEDITOR_HOME_URL || "./ueditor-plus/";
|
|
layui.link(window.UEDITOR_HOME_URL + "themes/default/css/ueditor.css");
|
|
// 加载配置文件
|
|
that.loadScript(window.UEDITOR_HOME_URL + "ueditor.config.js", function () {
|
|
// 加载编辑器主文件
|
|
that.loadScript(window.UEDITOR_HOME_URL + "ueditor.all.js", function () {
|
|
// 加载完成后执行回调
|
|
setTimeout(function () {
|
|
callback && callback();
|
|
}, 100);
|
|
});
|
|
});
|
|
};
|
|
// 动态加载JS文件
|
|
Class.prototype.loadScript = function (url, callback) {
|
|
var script = document.createElement("script");
|
|
script.type = "text/javascript";
|
|
script.src = url;
|
|
script.onload = script.onreadystatechange = function () {
|
|
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
|
|
callback && callback();
|
|
script.onload = script.onreadystatechange = null;
|
|
}
|
|
};
|
|
script.onerror = function () {
|
|
layui.hint().error("UEditorPlus组件: 加载文件失败: " + url);
|
|
};
|
|
document.getElementsByTagName("head")[0].appendChild(script);
|
|
};
|
|
|
|
// 输出组件
|
|
exports(ueditorPlus.CONST.MOD_NAME, ueditorPlus);
|
|
});
|