import iconBase64 from "./iframe/headerButton/iconBase64.js";
import initHeaderIcon from "./iframe/headerButton/initHeaderIcon.js";
//import UTILS from "./utils/utils.js";
//import initListenerInput from "./iframe/htmlEditor/initListenerInput.js";
import htmlContent from "./iframe/htmlEditor/htmlContent.js";
import useTemplate from "./iframe/template/useTemplate.js";
let RichTextTool = {};
//初始化事件
let initHeaderClick = (headerList) => {
for (let i = 0; i < headerList.length; i++) {
let item = headerList[i];
document.getElementsByClassName("rich-text-outicon")[i].onclick =
item.onClick;
}
};
//初始化htmlDom
let initHtmlDom = (headerList, width, height, domId) => {
let arr = [];
arr.push(`
`);
arr.push(`
");
let iframe = ``;
arr.push(iframe);
let textarea = ``;
arr.push(textarea);
arr.push("");
return arr.join("\n");
};
//初始化Iframe
let initIframe = (width, height, domId) => {
let html = `
`;
document.getElementById(domId + "-iframe").contentDocument.write(html);
};
//初始化头部head
let initHead = () => {
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.href = "/css/richIndex.css";
link.setAttribute("rel", "stylesheet");
link.setAttribute("media", "all");
link.setAttribute("type", "text/css");
head.appendChild(link);
};
const initRichText = (
domId,
isTemplate = true,
defaultHeader = [],
customHeader = []
) => {
//支持浏览器
//暴露图片传输
//暴露获取，设置html;
//暴露，自定义按钮事件
initHead();
let dom = document.getElementById(domId);
let width = dom.offsetWidth || 385;
let height = dom.offsetHeight || 450;
let headerList = initHeaderIcon(domId, defaultHeader, customHeader);
let html = initHtmlDom(headerList, width, height, domId);
dom.innerHTML = html;
initIframe(width, height, domId); //初始化dom
initHeaderClick(headerList); //点击事件
let doc = document.getElementById(domId + "-iframe").contentDocument;
doc.body.focus();
doc.execCommand("styleWithCSS", null, true);
//想使用不同的段落分隔符
//doc.execCommand("defaultParagraphSeparator", false, "br");
//initListenerInput(domId); //监听输入
//UTILS._getBase64();
if (isTemplate && dom.style.position === "") {
useTemplate(domId);
}
//暴露出去api
RichTextTool = {
getDocument(id) {
return document.getElementById(domId + "-iframe").contentDocument;
},
getWindow(id) {
return document.getElementById(domId + "-iframe").contentWindow;
},
getHtml(id) {
return htmlContent.getHtml(id);
},
setHtml(id, val) {
htmlContent.setHtml(id, val);
},
bindClick(id, item, fn) {
// item = {
// name: "一键排版",
// type: "",//唯一类型id
// img: "",//base64或者地址
// };
let span = document.createElement("span");
span.id = `${id}${item.type}`;
span.className = "rich-text-outicon";
span.dataset.type = item.type;
span.title = item.name;
span.style.cssText = `width:28px;height:28px;margin:5px;background-image:url(${item.img});background-repeat:no-repeat;background-size:100% 100%;cursor:pointer;opacity:1;`;
span.unselectable = "on";
document.getElementById(`${id}headerClick`).appendChild(span);
document.getElementById(`${id}${item.type}`).onclick = (e) => {
fn(e);
};
},
};
};
//module.exports.RichTextTool = RichTextTool;
//module.exports.initRichText = initRichText;
export { initRichText, RichTextTool };