bxf
/
ducha-qianduan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							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(`
    <section
    id="${domId}container"
     class="rich-text-container"
    style="width:${width}px;background:#fff;border:1px solid #ccc;overflow:hidden;"
 >`);
  arr.push(`
    <header id="${domId}headerClick"
    style="width:${width}px;display:flex;flex-wrap:wrap;"
 >`);
  for (let i = 0; i < headerList.length; i++) {
    let item = headerList[i];
    let img = iconBase64[`${item.type}Img`];
    arr.push(`
    <span class="rich-text-outicon" data-type="${item.type}" title="${item.name}" 
    style="width:28px;height:28px;margin:5px;background-image:url(${img});background-repeat:no-repeat;background-size:100% 100%;cursor:pointer;opacity:1;"
    unselectable="on"></span>
    `);
  }
  arr.push("</header>");

  let iframe = `<iframe  style="margin:0;padding:0;border:0;display:block;" id="${domId}-iframe" width="${
    width - 2
  }" height="${height}"></iframe>`;
  arr.push(iframe);
  let textarea = `<textarea id="${domId}-textarea" hidefocus="true" style="width:${
    width - 7
  }px;height:${height}px;display:none;resize:none;overflow:auto;"></textarea>`;
  arr.push(textarea);
  arr.push("</section>");
  return arr.join("\n");
};
//初始化Iframe
let initIframe = (width, height, domId) => {
  let html = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title></title>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
          html{
            margin:0;
            padding:0;
          }
          body{
            margin:0;
            padding:5px;
            border:1px solid #ccc;
            line-height:1.5;
            color:#333;
          }
          body,td{
            font-size:16px;
          }
          body,p,div{
            word-break:break-all;
          }
          p{
            margin:5px 0;
          }
          img{
            border:0;
          }
          table {
            border-collapse:collapse;
          } 
      </style>
    </head>
    <body class="rich-text-content" contenteditable="true" style="min-height:${
      height - 12
    }px"></body></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 };