// 判断是否已引用 export const isInclude = function(name, doc) { doc = doc || document var js = /js$/i.test(name) var es = doc.getElementsByTagName(js ? 'script' : 'link') for (var i = 0; i < es.length; i++) { if (es[i][js ? 'src' : 'href'].indexOf(name) !== -1) return true } return false } // 加载插件所需js export const loadJS_ifrEditArea = function(editor, jsArr) { if (jsArr.length > 0) { const nodeList = document.getElementsByClassName('tox-edit-area__iframe') nodeList.forEach(node => { const ifr = node.contentWindow.document const head = ifr.getElementsByTagName('head')[0] jsArr.forEach(src => { if (!isInclude(src, ifr)) { const script = document.createElement('script') script.type = 'text/javascript' script.src = editor.dom.encode(editor.documentBaseURI.toAbsolute(src)) head.appendChild(script) } }) }) editor.hmPluginScript = (editor.hmPluginScript || []).concat(jsArr) } } // 加载插件所需css export const loadCSS_ifrEditArea = function(editor, cssArr) { if (cssArr.length > 0) { const nodeList = document.getElementsByClassName('tox-edit-area__iframe') nodeList.forEach(node => { const ifr = node.contentWindow.document const head = ifr.getElementsByTagName('head')[0] cssArr.forEach(href => { if (!isInclude(href, ifr)) { const css = document.createElement('link') css.type = 'text/css' css.rel = 'stylesheet' css.href = editor.dom.encode(editor.documentBaseURI.toAbsolute(href)) head.appendChild(css) } }) }) editor.hmPluginCss = (editor.hmPluginCss || []).concat(cssArr) } } /** * 生成dom对象id(取最大值+1) * @param {*} doc document对象 * @param {*} className 样式名(插件名) * @returns */ export const getIdByClassName = function(doc, className) { let i = 0 doc.querySelectorAll('.' + className).forEach(elm => { const j = Number(elm.id && elm.id.replace(className, '') || 0) if (i <= j) { i = j } }) return className + (i + 1) } /** * 判断是否已存在相应的dom对象 * @param {*} doc document对象 * @param {*} attrName 属性名 * @param {*} attrValue 属性值 * @returns */ export const hasElm = function(doc, attrName, attrValue) { return attrValue !== '' && (doc.querySelectorAll(`[${attrName}='${attrValue}']`).length > 0) } /** * 判断element对象 * @param {*} elm element对象 * @param {*} attrName 属性名 * @param {*} attrValue 属性值 * @returns */ export const isElm = function(elm, attrName, attrValue) { // console.log(elm.getAttribute(attrName)) // console.log(elm.hasAttribute(attrName)) // console.log(attrValue) return elm.hasAttribute(attrName) && elm.getAttribute(attrName) === attrValue } /** * 判断插件(根据样式) * @param {*} element dom对象 * @param {*} pluginClassName 插件名 * @returns */ export const isPlugin = function(elm, pluginClassName) { if (elm.className && elm.className.indexOf(pluginClassName) >= 0) { return true } return false } /** * 字典表:样式单位匹配 */ export const styleUnitMap = { width: 'px', height: 'px' } /** * 属性更新 * @param {*} elm dom节点 * @param {*} name 属性名 * @param {*} value 属性值 */ export const updateAttrib = function(elm, name, value) { if (value === '') { elm.removeAttribute(name) } else { elm.setAttribute(name, value) } } /** * 更新dom对象 * @param {*} editor 编辑器 * @param {*} elm dom对象 * @param {*} dataForm 新数据集合对象 * @param {*} initHandler 初始化执行函数 */ export const updateElm = function(editor, elm, className, dataForm, initHandler) { const styleObj = {} let classes = className + ' ' for (const key of Object.keys(dataForm)) { if (key.indexOf('style.') >= 0) { const styleName = key.replace('style.', '') let styleValue = dataForm[key] if (styleName === 'width' || styleName === 'height') { if (dataForm[key].indexOf('%') > 0 || dataForm[key].indexOf('px') > 0) { styleValue = dataForm[key] } else { styleValue = dataForm[key] + 'px' } } styleObj[styleName] = styleValue } else if (key.indexOf('class.') >= 0) { if (dataForm[key] !== '') { classes += dataForm[key] + ' ' } } else { if (dataForm[key] !== editor.dom.getAttrib(elm, key)) { updateAttrib(elm, key, dataForm[key]) } } } editor.dom.setStyles(elm, styleObj) elm.className = classes // 初始化控件 if (initHandler) { initHandler(editor, elm, dataForm) } } /** * 根据数据集合对象转换成dom对象代码片段 * @param {*} dataForm 数据集合对象 * @returns dom对象代码片段 */ export const dataFormToElmPartStr = function(dataForm, className, title, customStyle) { console.log(customStyle) let attributes = '' let styles = '' let classes = className + ' ' for (const key of Object.keys(dataForm)) { if (key.indexOf('style.') === 0) { if (dataForm[key] !== '') { const styleName = key.replace('style.', '') let styleValue = dataForm[key] if (styleName === 'width' || styleName === 'height') { console.log(dataForm[key]) if (dataForm[key].indexOf('%') > 0 || dataForm[key].indexOf('px') > 0) { styleValue = dataForm[key] } else { styleValue = dataForm[key] + 'px' } } styles += `${styleName}:${styleValue};` } } else if (key.indexOf('class.') === 0) { if (dataForm[key] !== '') { classes += dataForm[key] + ' ' } } else { attributes += `${key}="${dataForm[key]}" ` } } return `class="${classes}" style="${styles} ${customStyle}" ${attributes} ` } /** * dom对象提取数据集合对象 * @param {*} editor 编辑器 * @param {*} initDataForm 原始数据对象 * @param {*} pluginClassName 插件名 * @returns 数据集合对象 */ export const elmToDataForm = function(editor, initDataForm, pluginClassName, customHandle) { const elm = editor.selection.getNode() const dataForm = __assign({}, initDataForm) if (isPlugin(elm, pluginClassName)) { for (const key of Object.keys(dataForm)) { if (key.indexOf('style.') >= 0) { const styleName = key.replace('style.', '') dataForm[key] = editor.dom.getStyle(elm, styleName).replace(styleUnitMap[styleName] || '', '') } else if (key.indexOf('class.') >= 0) { dataForm[key] = classMap(elm.className, key) || '' } else { dataForm[key] = editor.dom.getAttrib(elm, key) } } } customHandle ? customHandle(editor, dataForm) : null return dataForm } /** * 根据id获取选项具体信息 * @param {*} id 匹配字段,对应listbox中的value * @returns 对象 */ export const getItemInfo_Field = function(id) { if (window.localStorage.getItem('dictField')) { const dict = Array.from(JSON.parse(window.localStorage.getItem('dictField'))) dict.forEach(item => { if (item.id && item.id === id) { return item } else { item.list.forEach(item2 => { if (item2.id && item2.id === id) { return id } }) } }) } return null } /** * 获取字段字典表的listbox格式的数据 * @returns listbox数组 */ export const getListbox_Field = function() { const selectbox = [{ text: '----无----', value: '' }] if (window.localStorage.getItem('dictField')) { const dict = Array.from(JSON.parse(window.localStorage.getItem('dictField'))) dict.forEach(table => { const obj = { text: '', items: [] } obj.text = table.tableDescription if (table.list && table.list.length > 0) { table.list.forEach(field => { obj.items.push({ text: field.fieldDescription, value: field.id }) }) } selectbox.push(obj) }) } return selectbox } /** * 根据dom的className匹配属性选项值 * 如:className中的【XXX-1】 => dataForm["class.XXX"]=XXX-1 * @param {*} className dom元素的className * @param {*} dataFormKey 需要匹配的属性 * @returns */ export const classMap = function(className, dataFormKey) { const classList = className.split(' ') const temp = dataFormKey.replace('class.', '') for (let i = 0; i < classList.length; i++) { if (classList[i].indexOf(temp + '-') === 0) { return classList[i] } } } // 浅拷贝 export let __assign = function() { __assign = Object.assign || function __assign(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) }