/*! * @plugin tinymce-plugin * @version 0.0.3-beta.22 (2022-8-5) * @description tinymce-plugin * @copyright (2022) Five(Li Hailong) . All rights reserved. https://github.com/tinymce-plugintinymce-plugin */ (function(exports) { "use strict"; let tp$tinymce = tinymce; let global$1 = tp$tinymce.util.Tools; let global$7 = tp$tinymce.html.Node; tp$tinymce.html.Schema; let global$6 = tp$tinymce.util.XHR; let global$11 = tp$tinymce.util.I18n; let tp$Serialize = new tp$tinymce.html.Serializer().serialize; let tp$DomParser = new tp$tinymce.html.DomParser().parse; let tp$State = {}; window.tp$State = tp$State; let tp$getStyleValue = (key, str) => { let m = str ? str.match(new RegExp(key + ':(.+?)"?[;}]')) : ""; return m ? m[1] : false; }; function tp$SetSpecialStyle(editor, _self, specialStyleClass, specialStyleValue) { if (editor.tp$Style.mapping && editor.tp$Style.mapping["" + _self.getAttribute("data-id")]) { editor.tp$Style.mapping["" + _self.getAttribute("data-id")].specialStyle["" + specialStyleClass] = specialStyleValue; } } let tp$Component = { customTags: {} }; let keys = Object.keys; let __assign = function() { __assign = Object.assign || function __assign2(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; let hasOwnProperty = Object.hasOwnProperty; var isNullable = function(a) { return a === null || a === void 0; }; var isNonNullable = function(a) { return !isNullable(a); }; const getFormatStyle = (style) => { if (typeof style === "object") { return JSON.stringify(style).replace(/"([-A-Za-z]+?)":""[,}]/g, "").replace(/,/gi, ";").replace(/{/gi, "").replace(/}/gi, "").replace(/"/gi, ""); } }; const getObjStyle = (style) => { if (typeof style === "string" && style !== "{}") { style = JSON.stringify(style); return JSON.parse(("{" + style.replace(/:/g, '": "').replace(/;\s*/g, '","') + "}").replace(/,\"\"\}$/, "}")); } return style; }; const getStyleSheetClass = (className, content) => { const result = content.match(new RegExp(`.${className}\\s*\\{([\\s\\S]+)\\}`)); return result && result[1] ? result[1].replace(/\}([\s\S]+)/, "").trim() : ""; }; var has = function(obj, key) { return hasOwnProperty.call(obj, key); }; var getDimension = function(node, styles, dimension, defaultValue) { if (defaultValue === void 0) { defaultValue = null; } var value = node.attr(dimension); if (isNonNullable(value)) { return value; } else if (!has(styles, dimension)) { return defaultValue; } else { return null; } }; const toHump = (name) => { return name.replace(/[-|\_](\w)/g, function(all, letter) { return letter.toUpperCase(); }); }; const toLine = (name) => { return name.replace(/([A-Z])/g, "_$1").toLowerCase().replace(/\-/g, "_"); }; const toHyphen = (name) => { return name.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/\_/g, "-"); }; var getCurrentValue = function(block, styleName) { let resValue = ""; if (!block) return ""; styleName = toHump(styleName); while (block.nodeName !== "P" && block.nodeName !== "LI" && block.nodeName !== "DIV" && block.nodeName !== "BODY") { if (block.style[styleName]) { resValue = block.style[styleName]; break; } block = block.parentNode; } return resValue; }; let getButtonsStyle = (obj, style) => { let styleStr = ""; styleStr += obj["tp-buttons"] ? '.tp-buttons[data-tp-style="' + style + '"] {' + obj["tp-buttons"] + "}\n" : ""; styleStr += obj["tp-buttons:hover"] ? '.tp-buttons[data-tp-style="' + style + '"]:hover {' + obj["tp-buttons:hover"] + "}\n" : ""; styleStr += obj["tp-buttons::before"] ? '.tp-buttons[data-tp-style="' + style + '"]::before {' + obj["tp-buttons::before"] + "}\n" : ""; styleStr += obj["tp-buttons::after"] ? '.tp-buttons[data-tp-style="' + style + '"]::after {' + obj["tp-buttons::after"] + "}\n" : ""; return styleStr; }; const setIntervalFn = (func, delay, outTime) => { !outTime && (outTime = delay * 100); let setIntervalObj = { id: null, outTime, outId: null }; setIntervalObj.id = setInterval((obj) => { func(() => { clearTimeout(obj.outId); clearInterval(obj.id); }); }, delay, setIntervalObj); setIntervalObj.outId = setTimeout(() => { setIntervalObj.id && clearInterval(setIntervalObj.id); }, setIntervalObj.outTime); }; let getTp$ComponentFn = function(customTag, fnName) { if (typeof customTag[fnName] === "function") return customTag[fnName]; if (typeof tp$Component.customTags[customTag.name][fnName] === "function") return tp$Component.customTags[customTag.name][fnName]; return function() { }; }; const autoToPX = (data, noPerCent) => { if (!noPerCent) { return typeof data === "string" && data.length > 0 && data.match(/^[0-9]{1,8}$/) ? data + "px" : data; } else { return typeof data === "string" && !data.match(/\s/) && data.length > 0 ? parseInt(data) + "px" : data; } }; const tp$Translate = (text) => { let textList = text.split("_"); return textList.length > 1 ? global$11.translate([textList[0] + " {0}", textList[1]]) : global$11.translate(text); }; tinymce.tp$HtmlPanelFn = window.tp$HtmlPanelFn = function(e, _id, styleName) { tp$State["buttonsStyle"] && (tp$State["buttonsStyle"][_id] = styleName); document.querySelector("#" + _id + "_StyleID").innerHTML = e.nextElementSibling.innerHTML; }; const tp$skt = { count: 0 }; const createSkt = (opt) => { let sktID = new Date().getTime() + "-" + tp$skt.count++; let sktHtml = `

 

 

PP
Powered by Five
`; document.querySelector(opt.selector).outerHTML = sktHtml + document.querySelector(opt.selector).outerHTML; return sktID; }; const createHtmlPanel = (editor, panelID, dataList) => { let buttonsStyleName = ""; buttonsStyleName = tp$State["buttonsStyle"] && tp$State["buttonsStyle"][panelID]; !dataList ? dataList = keys(editor.tp$CustomTags.buttons.styleSheetList) : ""; if (!buttonsStyleName) { buttonsStyleName = tp$State["buttonsStyle"] && (tp$State["buttonsStyle"][panelID] = dataList[0]); } let panelStr = ""; let buttonsStyleInit = ""; let buttonsStyleStr = ""; dataList.forEach((styleName, idx) => { styleName === buttonsStyleName ? buttonsStyleInit = `${tp$Translate(styleName)}` : ""; panelStr += `
  • `; buttonsStyleStr += getButtonsStyle(editor.tp$CustomTags.buttons.styleSheetList[styleName], styleName); }); return `
    ${buttonsStyleInit}

    ${global$11.translate("Select tmplate")}:

    `; }; let tp$getFirstStyleValue = (_block, _styleName) => { let _resValue = ""; if (!_block) return ""; _styleName = toHump(_styleName); while (_block.nodeName && _block.nodeName.toLowerCase() !== "#text") { _resValue = _block.style[_styleName]; _block = _block.firstChild; } return _resValue; }; const toUpdateIndent2em = (editor, value, blocks) => { blocks = blocks || editor.selection.getSelectedBlocks(); global$1.each(blocks, function(block) { if (editor.dom.getStyle(block, "text-indent") || value) { let kv = ""; let kl = ""; if (value === "remove") { -parseInt(editor.dom.getStyle(block, "text-indent")) == parseInt(editor.dom.getStyle(block, "margin-left")) && editor.dom.setStyle(block, "margin-left", null); editor.dom.setStyle(block, "text-indent", null); } else { value = parseInt(value) || 2; if (block && block.firstChild) { kv = tp$getFirstStyleValue(block, "font-size"); kl = tp$getFirstStyleValue(block, "letter-spacing"); if (kv) { kv = (parseInt(kv) + parseInt(kl ? kl : 0)) * value + "px"; } else kv = (parseInt(kl ? kl : 0) + 16) * value + "px"; } value > 0 && -parseInt(editor.dom.getStyle(block, "text-indent")) == parseInt(editor.dom.getStyle(block, "margin-left")) && editor.dom.setStyle(block, "margin-left", null); editor.dom.setStyle(block, "text-indent", kv ? kv : value + "em"); value < 0 && editor.dom.setStyle(block, "margin-left", kv ? kv.replace(/^-/, "") : -value + "em"); } } }); }; const tp$RegisterCommand = (editor) => { var cmd = function(command) { return function() { return editor.execCommand(command); }; }; editor.addCommand("tpLetterspacing", function(ui, value) { editor.formatter.apply("tpLetterspacing", { value }); toUpdateIndent2em(editor); }); editor.addCommand("tpLineheight", function(ui, value) { editor.formatter.apply("tpLineheight", { value }); }); editor.addCommand("tpIndent", function(ui, value) { toUpdateIndent2em(editor, value || 2); }); editor.addCommand("mceTpAlignleft", function(ui, value) { let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse"); editor.dom.setStyle(_dom, "float", "left"); }); editor.addCommand("mceTpAlignright", function(ui, value) { let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse"); editor.dom.setStyle(_dom, "float", "right"); }); editor.addCommand("mceTpAligncenter", function(ui, value) { let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse"); editor.dom.setStyle(_dom, "float", null); editor.dom.setStyle(_dom, "margin-left", "auto"); editor.dom.setStyle(_dom, "margin-right", "auto"); }); editor.ui.registry.addButton("tpalignleft", { tooltip: "Align left", onAction: cmd("mceTpAlignleft"), icon: "align-left" }); editor.ui.registry.addButton("tpalignright", { tooltip: "Align right", onAction: cmd("mceTpAlignright"), icon: "align-right" }); editor.ui.registry.addButton("tpaligncenter", { tooltip: "Align center", onAction: cmd("mceTpAligncenter"), icon: "align-center" }); }; const tp$RegisterFormatter = (editor) => { editor.formatter.register({ alignleft: [ { selector: "figure.image", collapsed: false, classes: "align-left", ceFalseOverride: true, preview: "font-family font-size" }, { selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li", styles: { textAlign: "left" }, inherit: false, preview: false, defaultBlock: "div" }, { selector: "img,table,audio,video,tp-buttons,tp-tabs", collapsed: false, styles: { float: "left" }, preview: "font-family font-size" } ], aligncenter: [ { selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li", styles: { textAlign: "center" }, inherit: false, preview: "font-family font-size", defaultBlock: "div" }, { selector: "figure.image", collapsed: false, classes: "align-center", ceFalseOverride: true, preview: "font-family font-size" }, { selector: "img,audio,video", collapsed: false, styles: { display: "block", marginLeft: "auto", marginRight: "auto" }, preview: false }, { selector: "table,tp-buttons,tp-tabs", collapsed: false, styles: { marginLeft: "auto", marginRight: "auto" }, preview: "font-family font-size" } ], alignright: [ { selector: "figure.image", collapsed: false, classes: "align-right", ceFalseOverride: true, preview: "font-family font-size" }, { selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li", styles: { textAlign: "right" }, inherit: false, preview: "font-family font-size", defaultBlock: "div" }, { selector: "img,table,audio,video,tp-buttons,tp-tabs", collapsed: false, styles: { float: "right" }, preview: "font-family font-size" } ], afterParagraph: { selector: "p,ul,ol,dl,li,table", defaultBlock: "p", deep: false, styles: { "margin-bottom": "%value" } }, beforeParagraph: { selector: "p,ul,ol,dl,li,table", defaultBlock: "p", deep: false, styles: { "margin-top": "%value" } }, borderParagraph: { selector: "p,ul,ol,dl,li,table", defaultBlock: "p", deep: false, styles: { "border-width": "%valueW", "border-style": "%valueS", "border-color": "%valueC" } }, paddingParagraph: { selector: "p,ul,ol,dl,li,table", defaultBlock: "p", deep: false, styles: { "padding": "%value" } }, tpParagraph: { selector: "p,ul,ol,dl,li,table", defaultBlock: "p", deep: false, styles: { "background": "%background", "text-indent": "%indent" } }, tpLetterspacing: { inline: "span", remove_similar: true, styles: { "letter-spacing": "%value" } }, tpLineheight: { selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table", styles: { "line-height": "%value" } } }); editor.on("ExecCommand", function(cmd) { cmd.command === "FontSize" && toUpdateIndent2em(editor); }); }; let tp$ComponentSetStyleMapping = function(editor, _self, cmd, _customTag) { !editor.tp$Style.mapping ? editor.tp$Style.mapping = {} : ""; !editor.tp$Style.mapping["" + _self.getAttribute("data-id")] ? editor.tp$Style.mapping["" + _self.getAttribute("data-id")] = { styleCustomTags: _customTag.name, stylePath: _customTag.name === "buttons" ? "styleSheetList" : "styleSheetLoadList", styleTemplate: _self.getAttribute("data-style") || "default", quantity: _self.children.length - 1, specialStyle: {} } : __assign(editor.tp$Style.mapping["" + _self.getAttribute("data-id")], { styleTemplate: _self.getAttribute("data-tp-style") || "default", quantity: _self.children.length - 1 }); }; const setupWebComponent = (win, doc, editor, _customTag, _tagName) => { const template = doc.createElement("template"); const staticStyle = document.createElement("style"); const customStyle = document.createElement("style"); staticStyle.textContent = `body{ padding: 0; margin: 0; } :host { overflow: hidden; display: block; }`; template.innerHTML = _customTag.template.innerHTML; class TpComponent extends win.HTMLElement { constructor() { super(); this.setAttribute("contenteditable", false); this.setAttribute("data-mce-tp-component", _tagName); this.attachShadow({ mode: "open" }); this.tp$state = typeof _customTag.state === "object" ? JSON.parse(JSON.stringify(_customTag.state)) : {}; tp$ComponentSetStyleMapping(editor, this, "init", _customTag); this.tpComponentDelete = typeof _customTag.tpComponentDelete === "function" ? _customTag.tpComponentDelete.bind(this) : () => { this.remove(); }; this.tpComponentCmd = typeof _customTag.tpComponentCmdFn === "object" ? JSON.stringify(_customTag.tpComponentCmdFn) !== "{}" ? (cmd, props) => { _customTag.tpComponentCmdFn[cmd](this, props); tp$ComponentSetStyleMapping(editor, this, cmd, _customTag); } : (cmd, props) => { tp$Component.customTags[_tagName].tpComponentCmdFn[cmd](this, props); tp$ComponentSetStyleMapping(editor, this, cmd, _customTag); } : () => { console.log("\u65E0\u53EF\u7528cmd"); }; customStyle.id = "tpComponentStyle_" + this.getAttribute("data-id"); if (_tagName == "tabs") { customStyle.textContent = _customTag.styleSheetLoadList && _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"] ? _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"].replace(/.tp-tabs\s*\{/g, ":host {").replace(/.tp-tabs_label\b\s/g, "::slotted(.tp-tabs_label) ").replace(/.tp-tabs_label:hover\b\s/g, "::slotted(.tp-tabs_label:hover) ").replace(/.tp-tabs_label.checked\b\s/g, "::slotted(.tp-tabs_label.checked) ") : ""; } if (_tagName == "collapse") { customStyle.textContent = _customTag.styleSheetLoadList && _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"] ? _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"].replace(/>/g, " ").replace(/.tp-collapse\s*\{/g, ":host {").replace(/label.tp-collapse_label\b\s/g, "::slotted(.tp-collapse_label) ").replace(/label.tp-collapse_label::/g, "::slotted(.tp-collapse_label)::").replace(/.tp-tabs_label:hover\b\s/g, "::slotted(.tp-tabs_label:hover) ").replace(/.tp-tabs_label.checked\b\s/g, "::slotted(.tp-tabs_label.checked) ") : ""; } if (_tagName == "buttons") { customStyle.textContent = _customTag.styleSheetList && _customTag.styleSheetList[this.getAttribute("data-tp-style") || "default"] ? getButtonsStyle(_customTag.styleSheetList[this.getAttribute("data-tp-style") || "default"], this.getAttribute("data-tp-style") || "default").replace(/\[data-tp-style=(.*?)\]/g, "").replace(/>/g, " ").replace(/.tp-buttons\s*\{/g, ":host {").replace(/.tp-buttons:hover\s*\{/g, ":host(:hover) {").replace(/.tp-buttons::before\s*\{/g, ":host(.tp-buttons)::before {").replace(/.tp-buttons::after\s*\{/g, ":host(.tp-buttons)::after {") : ""; } template.content.prepend(customStyle); template.content.prepend(staticStyle); this.shadowRoot.appendChild(template.content.cloneNode(true)); } connectedCallback() { getTp$ComponentFn(_customTag, "headerEditableFn")(this, _customTag.isHeaderEditable, _tagName, editor); getTp$ComponentFn(_customTag, "contentEditableFn")(this, _customTag.isContentEditable, _tagName, editor); getTp$ComponentFn(_customTag, "connectedCallback")(this.shadowRoot, this); } static get observedAttributes() { return ["data-top-bg", "data-mce-tp-component", "data-value"]; } static tp$Delete() { console.log(this); } } try { win.customElements.define("tp-" + _tagName, TpComponent); } catch (_a) { } }; const createComponentsCustomTag = (editor) => { const win = editor.getWin(); const doc = editor.getDoc(); let toolbar = editor.toolbar; let baseSource = editor.baseURI.source; typeof toolbar === "object" && (toolbar = toolbar.jion(" ")); if (/tpIconlists/.test(toolbar)) { global$6.send({ url: baseSource + "plugins/tpIconlists/tpIconlists.css", async: false, dataType: "text", success: function(text) { editor.dom.addStyle(text); } }); } tp$RegisterFormatter(editor); tp$RegisterCommand(editor); const tpComponentStyle = `.mce-content-body [data-mce-tp-component][contenteditable=false][data-mce-selected] { outline: none; cursor: default; box-shadow: 0 0 0 2px #b4d7ff; position: relative; z-index:999; border-color: #B4D7FF; border-style: solid; } .mce-content-body .tp-partition[contentEditable=false], .mce-content-body .tp-partition[contentEditable=false]:focus, .mce-content-body .tp-partition[contentEditable=false]:hover{ outline: none!important; box-shadow: none!important; } .mce-content-body tp-buttons .tp-component_inline>a{ color: inherit; font:inherit; text-decoration: none; } .mce-content-body .tp-collapse .tp-collapse_label>p:first-child{ display: inline-block; } .mce-content-body .tp-component_inline{display: table-cell; margin: 0 } .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus { outline: none!important; } .mce-content-body tp-buttons{ display: inline-block; vertical-align: middle; } .mce-content-body img{ max-width: 100%; } .mce-content-body [data-mce-tp-component]{ border: 1px dashed #bbb; } .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover { outline: none!important; }`; editor.dom.addStyle(tpComponentStyle); editor.tp$Style = {}; editor.getTpStyle = (args) => { return ""; }; let componentList = editor.tp$CustomTags || tp$Component.customTags; global$1.each(componentList, function(item, key) { setupWebComponent(win, doc, editor, item, key); }); editor.parser.addAttributeFilter("data-tp-component", (nodes) => { nodes && nodes.forEach((node) => { let customtag = node.attr("data-tp-component"); componentList[customtag] ? getTp$ComponentFn(componentList[customtag], "parserFn")(node, customtag, editor) : ""; }); }); editor.serializer.addAttributeFilter("data-mce-tp-component", (nodes) => { nodes && nodes.forEach((node) => { let customtag = node.attr("data-mce-tp-component"); componentList[customtag] ? getTp$ComponentFn(componentList[customtag], "serializerFn")(node, customtag, editor) : " "; }); }); editor.setContent(editor.getContent({ source_view: true })); }; const setCustomTags = (customTag, setAttribute, setValue, editor, isAssign) => { if (editor) { !editor.tp$CustomTags && (editor.tp$CustomTags = JSON.parse(JSON.stringify(tp$Component.customTags))); isAssign ? __assign(editor.tp$CustomTags[customTag][setAttribute], setValue) : editor.tp$CustomTags[customTag][setAttribute] = setValue; } else { isAssign ? __assign(tp$Component.customTags[customTag][setAttribute], setValue) : tp$Component.customTags[customTag][setAttribute] = setValue; } }; const createCustomTags = (customTag, init, editor) => { if (editor) { !editor.tp$CustomTags && (editor.tp$CustomTags = JSON.parse(JSON.stringify(tp$Component.customTags))); editor.tp$CustomTags[customTag] = init; } else { tp$Component.customTags[customTag] = init; } }; const setStyleSheetList = (customTag, styleName, text, editor) => { setCustomTags("buttons", "styleSheetList", { [styleName]: { "tp-buttons": getStyleSheetClass("tp-buttons", text), "tp-buttons:hover": getStyleSheetClass("tp-buttons:hover", text), "tp-buttons::before": getStyleSheetClass("tp-buttons::before", text), "tp-buttons::after": getStyleSheetClass("tp-buttons::after", text) } }, editor, true); }; const componentsApi = { custom_elements: "", setCustomTags, createCustomTags, setStyleSheetList, createHtmlPanel }; var tabs = { name: "tabs", styleSheet: { selector: "default", styleSheetList: { default: { "tp-tabs": ``, "tp-tabs_top": ``, "tp-tabs_label.checked": ` `, "tp-tabs_main": ` `, "tp-tab_main.checked": ` ` } } }, styleSheetLoadList: {}, styleFn: () => { }, state: { count: 0 }, tpComponentDeleteFn: function() { console.log(this); }, tpComponentMonitorCmd: () => { }, tpComponentCmdFn: { tabAdd: (_self, _props) => { let partitionEditableWrapper = document.createElement("div"); partitionEditableWrapper.setAttribute("contenteditable", false); partitionEditableWrapper.setAttribute("class", "tp-partition tp-tabs_label"); partitionEditableWrapper.setAttribute("data-idx", _self.tp$state.count); let partitionEditableWrapperChlid = document.createElement("p"); partitionEditableWrapperChlid.setAttribute("class", "tp-component_inline"); partitionEditableWrapperChlid.setAttribute("data-idx", _self.tp$state.count); partitionEditableWrapperChlid.setAttribute("contenteditable", true); partitionEditableWrapperChlid.innerHTML = _props.title; partitionEditableWrapper.appendChild(partitionEditableWrapperChlid); _self.insertBefore(partitionEditableWrapper, _self.lastChild); let partitionEditableMain = document.createElement("div"); partitionEditableMain.setAttribute("class", "tp-tab_main"); partitionEditableMain.setAttribute("style", "overflow: hidden; max-height: 0; transition: all 0s"); partitionEditableMain.innerHTML = _props.content; _self.lastChild.appendChild(partitionEditableMain); _self.tp$state.count++; }, tabDelete: (_self, _props) => { _self.children[--_self.tp$state.count].remove(); _self.lastChild.lastChild.remove(); }, delete: (_self, _props) => { _self.remove(); }, getStyle: (_self, _props) => { }, setStyle: (_self, _props) => { console.log(_self.querySelector(".tp-tabs_top")); _self.setAttribute("data-top-style", _props["tp-tabs_top"]); _self.shadowRoot.querySelector(".tp-tabs_top").setAttribute("style", _props["tp-tabs_top"]); } }, template: { innerHTML: `
    ` }, connectedCallback: (shadowRoot, dom) => { let isChecked = (ele) => { return ele.className && ele.className.indexOf("tp-partition tp-tabs_label") !== -1 || ele.parentNode && (ele.parentNode.className && ele.parentNode.className.indexOf("tp-partition tp-tabs_label") !== -1 || ele.parentNode.parentNode && ele.parentNode.parentNode.className && ele.parentNode.parentNode.className.indexOf("tp-partition tp-tabs_label") !== -1); }; shadowRoot.getElementById("headerID").addEventListener("click", function(e) { if (isChecked(e.target)) { let _idex = e.target.getAttribute("data-idx") || e.target.parentNode.getAttribute("data-idx") || "0"; let _tabsToplist = dom.querySelectorAll("div.tp-partition.tp-tabs_label"); let oldSelectTopDom = dom.querySelector("div.tp-partition.tp-tabs_label.checked"); oldSelectTopDom ? oldSelectTopDom.setAttribute("class", "tp-partition tp-tabs_label") : ""; let newSelectTopDom = _tabsToplist[_idex]; newSelectTopDom ? newSelectTopDom.setAttribute("class", "tp-partition tp-tabs_label checked") : ""; let _tabslist = dom.querySelectorAll("div.tp-tab_main"); let oldSelectDom = dom.querySelector("div.tp-tab_main[contenteditable=true]"); oldSelectDom ? oldSelectDom.setAttribute("contenteditable", false) || (oldSelectDom.style.maxHeight = "0px") : ""; let newSelectDom = _tabslist[_idex]; newSelectDom ? newSelectDom.setAttribute("contenteditable", true) || (newSelectDom.style.maxHeight = "10000px") : ""; } }); }, isContentEditable: true, contentEditableFn: (_self, _isEditable, _customtag) => { if (_self.lastChild && _self.lastChild.className === "tp-" + _customtag + "_main") { const partitionEditableWrapper = document.createElement("div"); partitionEditableWrapper.setAttribute("contenteditable", false); partitionEditableWrapper.setAttribute("class", "tp-partition tp-tabs_main"); partitionEditableWrapper.setAttribute("slot", "content"); if (_self.lastChild.firstChild) { _self.lastChild.firstChild.setAttribute("class", "tp-tab_main"); _self.lastChild.firstChild.setAttribute("style", "overflow: hidden; max-height: 10000px; transition: all 0s"); _isEditable ? _self.lastChild.firstChild.setAttribute("contenteditable", true) : ""; partitionEditableWrapper.setAttribute("style", _self.lastChild.getAttribute("style")); partitionEditableWrapper.appendChild(_self.lastChild.firstChild); } while (_self.lastChild.firstChild) { _self.lastChild.firstChild.setAttribute("class", "tp-tab_main"); _self.lastChild.firstChild.setAttribute("style", "overflow: hidden; max-height: 0; transition: all 0s"); partitionEditableWrapper.appendChild(_self.lastChild.firstChild); } _self.removeChild(_self.lastChild); _self.appendChild(partitionEditableWrapper); } }, isHeaderEditable: true, headerEditableFn: (_self, _isEditable, _customtag) => { let _len = _self.children.length; _self.getAttribute("data-id"); _self.shadowRoot.querySelector("#headerID.tp-tabs_top").setAttribute("style", _self.getAttribute("data-top-style") ? _self.getAttribute("data-top-style") : ""); for (let i = _len - 2; i >= 0; i--) { _self.tp$state.count++; _self.children[i].setAttribute("contenteditable", false); _self.children[i].setAttribute("class", "tp-partition tp-" + _customtag + "_label" + (i === 0 ? " checked" : "")); _self.children[i].setAttribute("data-idx", i); _self.children[i].firstChild.setAttribute("class", "tp-component_inline"); _self.children[i].firstChild.setAttribute("data-idx", i); _isEditable ? _self.children[i].firstChild.setAttribute("contenteditable", true) : ""; } }, parserFn: (node, customtag) => { node.attr({ "data-tp-component": null, "data-mce-tp-component": customtag, "data-top-style": node.firstChild.attr("style") }); while (node.firstChild.name === "input") { node.firstChild.remove(); } let _node = node.firstChild.firstChild; while (_node && _node.name === "label") { let _nextNode = _node.next; let placeTop = new global$7("div", 1); _node.name = "p"; _node.wrap(placeTop); _node = _nextNode; } let tabMainFirst = node.lastChild.firstChild; while (tabMainFirst && tabMainFirst.name === "label") { let tabMainFirstNext = tabMainFirst.next.next; tabMainFirst.remove(); tabMainFirst = tabMainFirstNext; } node.firstChild.unwrap(); node.type = 1; node.name = "tp-" + customtag; }, serializerFn: (node, customtag) => { node.attr({ "data-mce-tp-component": null, "data-tp-component": customtag, "contenteditable": null, "class": "tp-" + customtag }); let placeTop = new global$7("div", 1); placeTop.attr("class", "tp-tabs_top"); placeTop.attr("style", node.attr("data-top-style")); node.attr("data-top-style", null); let _node = node.firstChild; let cloneNodeList = []; while (_node.attr("data-idx")) { let _nextNode = _node.next; _node.firstChild.name = "label"; _node.firstChild.attr({ contenteditable: null, "data-idx": null, class: "tp-" + customtag + "_label", for: node.attr("data-id") + "tab" + _node.attr("data-idx") }); cloneNodeList.push(tp$Serialize(_node.firstChild)); placeTop.append(_node.firstChild); _node.remove(); _node = _nextNode; } let _lastNode = node.lastChild.firstChild; let _count = 0; while (_lastNode && _lastNode.attr("class") === "tp-tab_main") { let _nextNode = _lastNode.next; let placeInput = new global$7("input", 1); placeInput.shortEnded = true; placeInput.attr({ id: node.attr("data-id") + "tab" + _count, type: "radio", name: node.attr("data-id") }); _count == 0 ? placeInput.attr("checked", "") : ""; node.append(placeInput); _lastNode.attr({ contenteditable: null, style: null, class: "tp-tab_main tp-tab_main_" + _count }); if (cloneNodeList[_count]) { node.lastChild.insert(tp$DomParser(cloneNodeList[_count]), _lastNode, true); _count++; } _lastNode = _nextNode; } node.append(placeTop); node.firstChild.attr({ contenteditable: null, class: "tp-tabs_main" }); node.append(node.firstChild); node.type = 1; node.name = "div"; } }; var buttons = { name: "buttons", template: { innerHTML: `
    ` }, styleSheetList: { default: { "tp-buttons": ` display: inline-block; background: rgb(179, 70, 70); padding: 14px 25px; color: #333; border-radius: 8px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: 1px solid transparent; box-sizing: border-box; word-wrap: break-word; cursor: pointer; text-decoration: none;`, "tp-buttons:hover": ` color: rgb(179, 70, 70) ; background: transparent; border-color: rgb(179, 70, 70) ; `, "tp-buttons::before": ` `, "tp-buttons::after": ` ` } }, isContentEditable: true, connectedCallback: () => { }, tpComponentCmdFn: { upData: (_self, _props) => { _self.shadowRoot.children[1].textContent = getButtonsStyle(_props.editor.tp$CustomTags.buttons.styleSheetList[_props.styleName], _props.styleName).replace(/\[data-tp-style=(.*?)\]/g, "").replace(/>/g, " ").replace(/.tp-buttons\s*\{/g, ":host {").replace(/.tp-buttons:hover\s*\{/g, ":host(:hover) {").replace(/.tp-buttons::before\s*\{/g, ":host(::before) {").replace(/.tp-buttons::after\s*\{/g, ":host(::after) {"); } }, contentEditableFn: (_self, _isEditable, _customtag, editor) => { if (_self.firstChild && _self.firstChild.tagName === "A") { const Wrapper = document.createElement("p"); Wrapper.setAttribute("contenteditable", true); Wrapper.setAttribute("class", "tp-component_inline"); _self.firstChild.innerHTML = "" + _self.firstChild.innerHTML + ""; _self.firstChild.setAttribute("href", "javascript:;"); Wrapper.appendChild(_self.firstChild); _self.appendChild(Wrapper); } }, isHeaderEditable: true, parserFn: (node, customtag, editor) => { node.attr({ "data-tp-component": null }); let _text = node.attr("style"); let placeDivStyle = {}; let _tem = ""; _tem = tp$getStyleValue("margin", _text); _tem && (placeDivStyle.margin = _tem); _tem = tp$getStyleValue("padding", _text); _tem && (placeDivStyle.padding = _tem); _tem = tp$getStyleValue("border", _text); _tem && (placeDivStyle.border = _tem); _tem = tp$getStyleValue("background", _text); _tem && (placeDivStyle["background"] = _tem); _tem = tp$getStyleValue("border-radius", _text); _tem && (placeDivStyle["border-radius"] = _tem); _tem = tp$getStyleValue("border-width", _text); _tem && (placeDivStyle["border-width"] = _tem); _tem = tp$getStyleValue("border-style", _text); _tem && (placeDivStyle["border-style"] = _tem); _tem = tp$getStyleValue("border-color", _text); _tem && (placeDivStyle["border-color"] = _tem); let placeDiv = new global$7("div", 1); placeDiv.type = 1; placeDiv.attr({ "data-mce-tp-component": customtag, "data-tp-style": node.attr("data-tp-style") || "default", "style": getFormatStyle(placeDivStyle) || null, "data-id": node.attr("data-id") }); node.attr("class") && placeDiv.attr("class", node.attr("class")); !editor.tp$Style.mapping ? editor.tp$Style.mapping = {} : ""; !editor.tp$Style.mapping["" + node.attr("data-id")] ? editor.tp$Style.mapping["" + node.attr("data-id")] = { styleCustomTags: "buttons", stylePath: "styleSheetList", styleTemplate: node.attr("data-tp-style") || "default", specialStyle: {} } : __assign(editor.tp$Style.mapping["" + node.attr("data-id")], { styleTemplate: node.attr("data-tp-style") || "default" }); node.attr("style", getFormatStyle(__assign(getObjStyle(node.attr("style")) || {}, { margin: "", padding: "", background: "", "border-style": "", "border-color": "", "border-width": "", "border-radius": "", border: "" })) || null); node.attr("data-id", null); node.attr("data-mce-style", null); node.wrap(placeDiv); placeDiv.name = "tp-" + customtag; }, serializerFn: (node, customtag) => { let ATags = node; while (ATags.name !== "a" && ATags.firstChild.name !== "#text") { ATags = ATags.firstChild; } node.attr({ "data-mce-tp-component": null, "data-tp-component": customtag, "contenteditable": null, "data-tp-style": node.attr("data-tp-style") || "default", "href": ATags && ATags.attr("href") ? ATags.attr("href") : null, "style": ATags && ATags.attr("style") ? getFormatStyle(__assign(getObjStyle(node.attr("style")) || {}, getObjStyle(ATags.attr("style")) || {})) : node.attr("style"), "target": ATags && ATags.attr("target") ? ATags.attr("target") : null, "rel": ATags && ATags.attr("rel") ? ATags.attr("rel") : null, "title": ATags && ATags.attr("title") ? ATags.attr("title") : null }); node.firstChild.unwrap(); ATags && ATags.unwrap(); node.name = "a"; } }; var collapse = { name: "collapse", template: { innerHTML: `
    ` }, isContentEditable: true, connectedCallback: () => { }, tpComponentCmdFn: { upData: (_self, _props) => { let _style = _props.style; let padding_style = tp$getStyleValue("padding", _style); let border_style = tp$getStyleValue("border", _style); let borderWidth_style = tp$getStyleValue("border-width", _style); tp$SetSpecialStyle(_props.editor, _self, "tp-collapse_main", (padding_style ? "padding: " + padding_style + "!important; " : "") + (border_style ? "border: " + border_style + "!important;" : "") + (borderWidth_style ? "border-width: " + borderWidth_style + "!important;" : "")); } }, contentEditableFn: (_self, _isEditable, _customtag, editor) => { const partitionEditableWrapper = document.createElement("div"); partitionEditableWrapper.setAttribute("contenteditable", false); partitionEditableWrapper.setAttribute("class", "tp-partition tp-collapse_main"); _isEditable ? _self.lastChild.setAttribute("contenteditable", true) : ""; if (_self.lastChild.getAttribute("class") === "tp-collapse_main") { let _style = _self.lastChild.getAttribute("style"); let padding_style = tp$getStyleValue("padding", _style); let border_style = tp$getStyleValue("border", _style); let borderWidth_style = tp$getStyleValue("border-width", _style); tp$SetSpecialStyle(editor, _self, "tp-collapse_main", (padding_style ? "padding: " + padding_style + "!important; " : "") + (border_style ? "border: " + border_style + "!important;" : "") + (borderWidth_style ? "border-width: " + borderWidth_style + "!important;" : "")); } partitionEditableWrapper.appendChild(_self.lastChild); _self.appendChild(partitionEditableWrapper); }, isHeaderEditable: true, headerEditableFn: (_self, _isEditable, _customtag, editor) => { if (_self.firstChild.contenteditable !== "true") { const headerWrapper = document.createElement("div"); _isEditable ? headerWrapper.setAttribute("contenteditable", true) : ""; headerWrapper.setAttribute("slot", "header"); headerWrapper.setAttribute("class", "tp-collapse_label"); headerWrapper.setAttribute("style", "min-height: 20px; " + _self.getAttribute("data-top-style")); while (_self.firstChild && _self.firstChild.className !== "tp-" + _customtag + "_main") { headerWrapper.appendChild(_self.firstChild); } _self.insertBefore(headerWrapper, _self.firstChild); } }, parserFn: (node, customtag) => { node.attr({ "data-tp-component": null, "data-mce-tp-component": customtag }); node.attr("data-id", node.firstChild.attr("id")); node.firstChild.remove(); node.lastChild.attr("class", "tp-" + customtag + "_main"); node.type = 1; node.name = "tp-" + customtag; }, serializerFn: (node, customtag) => { node.attr({ "data-mce-tp-component": null, "data-tp-component": customtag, "contenteditable": null, "class": "tp-" + customtag }); node.firstChild.type = 1; node.firstChild.name = "label"; node.firstChild.attr({ contenteditable: null, for: node.attr("data-id") }); let mainStyle = node.lastChild.attr("style"); node.lastChild.unwrap(); node.lastChild.attr({ contenteditable: null, class: "tp-" + customtag + "_main", style: mainStyle }); let placeInput = new global$7("input", 1); placeInput.shortEnded = true; placeInput.attr({ id: node.attr("data-id"), type: "checkbox" }); node.insert(placeInput, node.firstChild, true); node.attr("data-id", null); node.type = 1; node.name = "div"; } }; const getSktType = (name) => { return /select$/.test(name); }; const splitObj = { "forecolor": true, "backcolor": true, tpLetterspacing: true, tpIconlists: true, tpColumns: true, table: true }; const menubarObj = { title: { file: { zh_CN: "\u6587\u4EF6", en_US: "File" }, edit: { zh_CN: "\u7F16\u8F91", en_US: "Edit" }, view: { zh_CN: "\u67E5\u770B", en_US: "View" }, insert: { zh_CN: "\u63D2\u5165", en_US: "Insert" }, format: { zh_CN: "\u683C\u5F0F", en_US: "Format" }, table: { zh_CN: "\u8868\u683C", en_US: "Table" }, tools: { zh_CN: "\u5DE5\u5177", en_US: "Tools" }, help: { zh_CN: "\u5E2E\u52A9", en_US: "Help" } }, items: { code: "tools", spellchecker: "tools", spellcheckerlanguage: "tools", wordcount: "tools", image: "insert", link: "insert", media: "insert", hr: "insert", template: "insert", codesample: "insert", charmap: "insert", inserttable: "table", emoticons: "insert", pagebreak: "insert", nonbreaking: "insert", anchor: "insert", toc: "insert", insertdatetime: "insert", bold: "format", italic: "format", underline: "format", strikethrough: "format", blockquote: "format", subscript: "format", superscript: "format", removeformat: "format", formatselect: "format", fontselect: "format", fontsizes: "format", forecolor: "format", backcolor: "format", fontformats: "format", blockformats: "format", codeformat: "format", align: "format", table: "table", lineheight: "format", help: "help" } }; const menubarTitle = { file: true, view: true, edit: true }; const getToolbarGroups = (toolbar) => { let toolbar_groups = []; let toolbarList = toolbar.split("|"); toolbarList.forEach((item) => { let toolbarItem = item.split(" "); let toolbarGroup = []; toolbarItem.forEach((cItem) => { cItem && toolbarGroup.push({ isSelect: getSktType(cItem), name: cItem }); cItem && menubarObj.items[cItem] && (menubarTitle[menubarObj.items[cItem]] = true); }); toolbarGroup.length > 0 && toolbar_groups.push(toolbarGroup); }); return toolbar_groups; }; const getMenubarGroups = (menubar) => { let menubar_groups = []; let menubarList = menubar.split("|"); menubarList.forEach((item) => { let menubarItem = item.split(" "); let menubarGroup = []; menubarItem.forEach((cItem) => { cItem && menubarGroup.push({ isSelect: getSktType(cItem), name: cItem }); }); menubar_groups.push(menubarGroup); }); return menubar_groups; }; const getStyle = () => { return `.skt-tox-tinymce{ border: 1px solid #ccc; border-radius: 0; box-shadow: none; box-sizing: border-box; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; overflow: hidden; position: relative; visibility: inherit!important; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; -webkit-tap-highlight-color: transparent; text-decoration: none; text-shadow: none; text-transform: none; vertical-align: initial; white-space: normal; height: 200px; } .skt-tox-editor-container{ display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } .skt-tox-editor-header{ box-shadow: none; transition: box-shadow .5s; z-index: 1; } .skt-tox-anchorbar{ display: flex; flex: 0 0 auto; border-top: 1px solid #ccc; } .skt-tox-tinymce .skt-tox-statusbar{ align-items: center; background-color: #fff; border-top: 1px solid #ccc; color: rgba(34,47,62,.7); display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 400; height: 18px; overflow: hidden; padding: 0 8px; position: relative; text-transform: uppercase; } .skt-tox-tinymce .skt-tox-toolbar,.skt-tox-tinymce .skt-tox-menubar{ background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff; background-color: #fff; display: flex; flex: 0 0 auto; flex-shrink: 0; flex-wrap: wrap; padding: 0 0; } .skt-tox-mbtn{ align-items: center; background: 0 0; border: 0; border-radius: 3px; box-shadow: none; color: #222f3e; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: 400; height: 34px; justify-content: center; margin: 2px 0 3px 0; outline: 0; overflow: hidden; padding: 0 4px; text-transform: none; width: auto; } .skt-tox-mbtn__select-label { cursor: default; font-weight: 400; margin: 0 4px; } .skt-tox-tbtn.skt-tox-split-button{ border: 0; border-radius: 3px; box-sizing: border-box; display: flex; width: 50px; margin: 2px 0 3px 0; overflow: hidden; } .skt-tox-split-button .skt-tox-tbtn__select-chevron{ margin-left: 5px; } .skt-tox-toolbar__group{ border-right:1px solid #ccc; align-items: center; display: flex; flex-wrap: wrap; margin: 0 0; padding: 0 4px 0 4px; } .skt-tox-toolbar__group:last-child { border-right: 0px; } .skt-tox-sidebar-wrap-box{ display: flex; flex: 0 0 auto; flex-direction: column; flex-shrink: 0; height: 100%; overflow: hidden; position: relative; width: 100%; } .skt-tox-sidebar-wrap-box p{ height: 16px; width: calc(100% - 40px); margin: 5px 20px; } .skt-tox-sidebar-wrap-box p:first-child{ width: calc(100% - 74px)!important; margin-top: 20px; margin-left: 54px!important; } .skt-tox-sidebar-wrap-box p:nth-child(3n+2){ width: 90%; margin-right:8%; } .skt-tox-sidebar-wrap-box p:nth-child(3n+3){ width: calc(100% - 74px); margin-left: 54px } .skt-tox-sidebar-wrap-box p:nth-child(3n+1){ width: 75%; margin-right:8%; } .skt-tox-sidebar-wrap-box p:last-child{ width: 65%!important; margin-left: 20px; } .skt-tox-tbtn{ align-items: center; background: 0 0; border: 0; border-radius: 3px; box-shadow: none; color: #222f3e; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: 400; height: 34px; justify-content: center; margin: 2px 0 3px 0; outline: 0; overflow: hidden; padding: 0; text-transform: none; width: 34px; } .skt-tox-tbtn--select{ margin: 2px 0 3px 0; padding: 0 4px; padding-right: 3px; width: auto; } .skt-tox-tbtn__select-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; font-weight: 400; margin: 0 4px; } .skt-tox-tbtn__select-chevron{ align-items: center; display: flex; justify-content: center; width: 10px; height: 14px; } .skt-tox-icon { display: inline-block; width: 24px; height: 24px; } @-webkit-keyframes skeleton-ani { 0% { left: -90% } to { left: 120% } } @keyframes skeleton-ani { 0% { left: -90% } to { left: 120% } } .skt{ display: none; width: 100%; top:0; position: absolute; z-index: 99; background: #fff; } .skt.skt-loading{ display: block; } .skt-loading .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: rgba(0, 0, 0, 0) !important; background-image: none !important; pointer-events: none; } .skt-loading .skeleton:after { content: ""; position: absolute; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; background-color: #ebf1f8; display: block } .skt-loading .skeleton:not(.not-round):after { border-radius: 4px } .skt-loading .tox-tbtn__select-chevron{ display: inline-block; width: 8px; height: 18px; } .skt-loading .tox-icon { display: inline-block; width: 24px; height: 24px;} .skt-loading .skeleton:not(.not-before):before { position: absolute; top: 0; width: 30%; height: 100%; content: ""; background: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0))); background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 100%); background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0)); -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); z-index: 99; -webkit-animation: skeleton-ani 1s ease infinite; animation: skeleton-ani 1s ease infinite; display: block } .skt-loading .skeleton.badge:after { background-color: #f8fafc }`; }; const getDarkStyle = () => { return `[data-isdark] .skt-tox-tinymce{ border: 1px solid #000; border-radius: 0; box-shadow: none; box-sizing: border-box; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; overflow: hidden; position: relative; visibility: inherit!important; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; -webkit-tap-highlight-color: transparent; text-decoration: none; text-shadow: none; text-transform: none; vertical-align: initial; white-space: normal; height: 200px; } .skt-tox-editor-container{ display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } .skt-tox-editor-header{ box-shadow: none; transition: box-shadow .5s; z-index: 1; } [data-isdark] .skt-tox-anchorbar{ display: flex; flex: 0 0 auto; border-top: 1px solid #000; } [data-isdark] .skt-tox-tinymce .skt-tox-statusbar{ align-items: center; background-color: #222f3e; border-top: 1px solid #000; color: rgba(34,47,62,.7); display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 400; height: 18px; overflow: hidden; padding: 0 8px; position: relative; text-transform: uppercase; } [data-isdark] .skt-tox-tinymce .skt-tox-toolbar,[data-isdark] .skt-tox-tinymce .skt-tox-menubar{ background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e; background-color: #222f3e; display: flex; flex: 0 0 auto; flex-shrink: 0; flex-wrap: wrap; padding: 0 0; } [data-isdark] .skt-tox-tinymce .skt-tox-mbtn{ align-items: center; background: 0 0; border: 0; border-radius: 3px; box-shadow: none; color: #fff; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: 400; height: 34px; justify-content: center; margin: 2px 0 3px 0; outline: 0; overflow: hidden; padding: 0 4px; text-transform: none; width: auto; } .skt-tox-mbtn__select-label { cursor: default; font-weight: 400; margin: 0 4px; } .skt-tox-tbtn.skt-tox-split-button{ border: 0; border-radius: 3px; box-sizing: border-box; display: flex; width: 50px; margin: 2px 0 3px 0; overflow: hidden; } .skt-tox-split-button .skt-tox-tbtn__select-chevron{ margin-left: 5px; } [data-isdark] .skt-tox-tinymce .skt-tox-toolbar__group{ border-right:1px solid #000; align-items: center; display: flex; flex-wrap: wrap; margin: 0 0; padding: 0 4px 0 4px; } .skt-tox-toolbar__group:last-child { border-right: 0px; } .skt-tox-sidebar-wrap-box{ display: flex; flex: 0 0 auto; flex-direction: column; flex-shrink: 0; height: 100%; overflow: hidden; position: relative; width: 100%; } .skt-tox-sidebar-wrap-box p{ height: 16px; width: calc(100% - 40px); margin: 5px 20px; } .skt-tox-sidebar-wrap-box p:first-child{ width: calc(100% - 74px)!important; margin-top: 20px; margin-left: 54px!important; } .skt-tox-sidebar-wrap-box p:nth-child(3n+2){ width: 90%; margin-right:8%; } .skt-tox-sidebar-wrap-box p:nth-child(3n+3){ width: calc(100% - 74px); margin-left: 54px } .skt-tox-sidebar-wrap-box p:nth-child(3n+1){ width: 75%; margin-right:8%; } .skt-tox-sidebar-wrap-box p:last-child{ width: 65%!important; margin-left: 20px; } [data-isdark] .skt-tox-tinymce .skt-tox-tbtn{ align-items: center; background: 0 0; border: 0; border-radius: 3px; box-shadow: none; color: #fff; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: 400; height: 34px; justify-content: center; margin: 2px 0 3px 0; outline: 0; overflow: hidden; padding: 0; text-transform: none; width: 34px; } .skt-tox-tbtn--select{ margin: 2px 0 3px 0; padding: 0 4px; padding-right: 3px; width: auto; } .skt-tox-tbtn__select-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; font-weight: 400; margin: 0 4px; } .skt-tox-tbtn__select-chevron{ align-items: center; display: flex; justify-content: center; width: 10px; height: 14px; } .skt-tox-icon { display: inline-block; width: 24px; height: 24px; } @-webkit-keyframes skeleton-ani { 0% { left: -90% } to { left: 120% } } @keyframes skeleton-ani { 0% { left: -90% } to { left: 120% } } .skt[data-isdark]{ display: none; width: 100%; top:0; position: absolute; z-index: 99; background: #222f3e } .skt.skt-loading{ display: block; } .skt-loading .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: rgba(0, 0, 0, 0) !important; background-image: none !important; pointer-events: none; } .skt-loading .skeleton:after { content: ""; position: absolute; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; background-color: #ebf1f8; display: block } .skt-loading .skeleton:not(.not-round):after { border-radius: 4px } .skt-loading .tox-tbtn__select-chevron{ display: inline-block; width: 8px; height: 18px; } .skt-loading .tox-icon { display: inline-block; width: 24px; height: 24px;} .skt-loading .skeleton:not(.not-before):before { position: absolute; top: 0; width: 30%; height: 100%; content: ""; background: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0))); background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 100%); background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0)); -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); z-index: 99; -webkit-animation: skeleton-ani 1s ease infinite; animation: skeleton-ani 1s ease infinite; display: block } .skt-loading .skeleton.badge:after { background-color: #f8fafc }`; }; const createSkeleton = (opt) => { if (!document.querySelector("style#skt-tox-style")) { let style = document.createElement("style"); style.type = "text/css"; style.id = "skt-tox-style"; try { style.appendChild(document.createTextNode(getStyle())); } catch (ex) { style.styleSheet.cssText = getStyle(); } let head = document.getElementsByTagName("head")[0]; head.appendChild(style); } if (!document.querySelector("style#skt-dark-tox-style")) { let style = document.createElement("style"); style.type = "text/css"; style.id = "skt-dark-tox-style"; try { style.appendChild(document.createTextNode(getDarkStyle())); } catch (ex) { style.styleSheet.cssText = getDarkStyle(); } let head = document.getElementsByTagName("head")[0]; head.appendChild(style); } let toolbar_groups = []; if (typeof opt.toolbar === "string") { toolbar_groups = getToolbarGroups(opt.toolbar); } else if (Array.isArray(opt.toolbar)) { opt.toolbar.forEach((ele) => { toolbar_groups.push(...getToolbarGroups(ele)); }); } let menubar_groups = []; if (opt.menubar === false) ; else if (typeof opt.menubar === "string") { menubar_groups = getMenubarGroups(opt.menubar); } else { for (let key in menubarObj.title) { menubarTitle[key] && menubar_groups.push(menubarObj.title[key][opt.language || "en_US"]); } } let height = opt.min_height || opt.height || 200; let placeholderList = []; let placeholderLen = height - 150; for (let i = 0; i < placeholderLen; i += 50) placeholderList.push("1"); let sktSelector = opt.selector ? document.querySelector(opt.selector).parentNode : opt.target.parentNode; let sktDom = document.createElement("div"); sktDom.className = "skt skt-loading"; if (/dark$/.test(opt.skin)) { sktDom.setAttribute("data-isdark", "true"); } sktDom.innerHTML = createTemplate({ selector: opt.selector, toolbar: toolbar_groups, menubar: menubar_groups, branding: opt.branding === false ? false : true, placeholderList, height }); sktSelector.style.position = "relative"; sktSelector.style.minHeight = height + "px"; sktSelector.append(sktDom); return sktDom; }; const createMenubarTemplate = (data) => { let strHtml = ""; data.forEach((item) => { if (typeof item === "object") { item.forEach((cItem) => { strHtml += '\n"; }); } else { strHtml += '\n"; } }); return strHtml; }; const createToolbarTemplate = (data) => { let strHtml = ""; data.forEach((item) => { strHtml += '
    \n'; item.forEach((ele) => { strHtml += '\n"; }); strHtml += "
    \n"; }); return strHtml; }; const createWrapBoxTemplate = (data) => { let strHtml = ""; data.forEach((item) => { strHtml += '

    \n'; }); return strHtml; }; const createTemplate = (sktData) => { return `
    ${createMenubarTemplate(sktData.menubar)}
    ${createToolbarTemplate(sktData.toolbar)}

     

    ${createWrapBoxTemplate(sktData.placeholderList)}

    PP
    ${sktData.branding ? 'Powered by Five ' : ""}
    `; }; tp$Component.customTags[tabs.name] = tabs; tp$Component.customTags[buttons.name] = buttons; tp$Component.customTags[collapse.name] = collapse; let styleCheckedConvert = (className, styleValue, quantity) => { let _output = "\n"; for (let i = 0; i < quantity; i++) { _output += `.tp-${className} > input:nth-child(${i + 1}):checked ~ .tp-${className}_top > .tp-${className}_label:nth-child(${i + 1}){${styleValue}} .tp-${className} > input:nth-child(${i + 1}):checked ~ .tp-${className}_main .tp-tab_main_${i}{ max-height: 10000px; } `; } return _output; }; let tp$createSpecialStyle = (_output, classNameMapping) => { let styleStr = ""; keys(_output.specialStyle).forEach((_obj) => { styleStr += _output.specialStyle[_obj] ? "\n " + classNameMapping[_obj] + " { " + _output.specialStyle[_obj] + "} " : ""; }); return styleStr; }; let createTpComponentStyleSheet = (editor) => { editor.tp$OutputStyle = ""; let maxQuantity = 2; let _outputStyle = ""; let _outputButtonsStyle = ""; let _outputCollapseStyle = ""; let _outputCollapseSpecialStyle = ""; let _outputTabsList = {}; let _outputCollapseList = {}; let _buttonsStyleList = {}; if (editor.tp$Style && editor.tp$Style.mapping) { !editor.tp$CustomTags && (editor.tp$CustomTags = JSON.parse(JSON.stringify(tp$Component.customTags))); keys(editor.tp$Style.mapping).forEach((obj) => { let _output = editor.tp$Style.mapping[obj]; if (_output.styleCustomTags === "tabs") { if (!_outputTabsList[_output.styleTemplate]) { _outputStyle = editor.tp$CustomTags[_output.styleCustomTags][_output.stylePath][_output.styleTemplate]; _outputTabsList[_output.styleTemplate] = true; } maxQuantity < _output.quantity ? maxQuantity = _output.quantity : ""; } if (_output.styleCustomTags === "collapse") { if (!_outputCollapseList[_output.styleTemplate]) { _outputCollapseStyle += editor.tp$CustomTags[_output.styleCustomTags][_output.stylePath][_output.styleTemplate]; _outputCollapseList[_output.styleTemplate] = true; } _outputCollapseSpecialStyle += _output.specialStyle ? tp$createSpecialStyle(_output, { "tp-collapse_main": '.tp-collapse > input[id="' + obj + '"]:checked + .tp-collapse_label + .tp-collapse_main' }) : ""; } if (_output.styleCustomTags === "buttons" && !_buttonsStyleList[_output.styleTemplate]) { _outputButtonsStyle += getButtonsStyle(editor.tp$CustomTags[_output.styleCustomTags][_output.stylePath][_output.styleTemplate], _output.styleTemplate); _buttonsStyleList[_output.styleTemplate] = true; } }); } let _getChecked = ""; let _outputChecked = ""; if (_outputStyle) { _outputStyle = _outputStyle.replace(/.tp-tabs\s*{/g, "div.tp-tabs[data-id] {").replace(/\n.tp-tabs\s/g, "\n.tp-tabs[data-id] ") + ".tp-tabs[data-id] > input { display: none;} \n .tp-tabs .tp-tabs_main .tp-tab_main { overflow: hidden;max-height: 0px;}"; _getChecked = _outputStyle.match(/.tp-tabs_label.checked\s*{\n([\s\S]+)\n}/)[1]; _outputChecked = _getChecked ? styleCheckedConvert("tabs", _getChecked, maxQuantity) : ""; } editor.tp$OutputStyle = (_outputButtonsStyle ? `@font-face { font-family: "iconfont"; /* Project id 2627438 */ src: url('//at.alicdn.com/t/font_2627438_tl87y8epxj.woff2?t=1630480852428') format('woff2'), url('//at.alicdn.com/t/font_2627438_tl87y8epxj.woff?t=1630480852428') format('woff'), url('//at.alicdn.com/t/font_2627438_tl87y8epxj.ttf?t=1630480852428') format('truetype'); }` : "") + _outputButtonsStyle + _outputCollapseStyle + _outputCollapseSpecialStyle + _outputStyle + _outputChecked; }; const tp$PanelComponents = { iframeLayout: `
    X