huazhi-article/entry/editor.js

import Parse from '../parse';
import { helperGetLastLIne } from '../helpers';
import { isObject } from '../utils';

const getUrlType = (url) => {
  if (url.includes('guihuazhi.com')) {
    if (url.includes('article')) {
      return 'article';
    } else if (url.includes('topic')) {
      return 'topic';
    } else {
      return 'other';
    }
  } else {
    return 'other';
  }
};

let routes = {
  article: {
    route: '/app/article/detail',
    id: 'aid'
  },
  topic: {
    route: '/app/topic/detail',
    id: 'topicId'
  },
  other: {
    route: '',
    id: 'id'
  }
};

const getId = (url) => {
  let str = url.split('?')[0].split('/').pop();
  return str.slice(0, -5);
};

const textToJson = (element) => {
  return {
    type: 'string',
    content: element.nodeValue
  };
};

const strongToJson = (element) => {
  return {
    type: 'string',
    bold: 1,
    content: element.innerText
  };
};

const aToJson = (element) => {
  let link = element.href;
  let type = getUrlType(link);
  let info = routes[type];
  return {
    type: 'link',
    content: element.innerText,
    route: {
      route: info.route,
      webUrl: link,
      params: {
        [info.id]: getId(link)
      }
    }
  };
};

const getValue = (element) => {
  let elementList = element.childNodes;
  let length = elementList.length;
  let value = [];
  for (let i = 0; i < length; i++) {
    let element = elementList[i];
    let elementType = element.nodeName;
    let func = elementListToJsonMap[elementType];
    if (func) {
      let result = func(element);
      value.push(result);
    }
  }
  return value;
};

const blockElementToJson = (element) => {
  let o = {
    type: 'text'
  };
  if (element.nodeName === 'H2') {
    o.head = 1;
  } else if (element.nodeName === 'BLOCKQUOTE') {
    o.block = 1;
  }
  if (element.classList.contains('ql-align-center')) {
    o.center = 1;
  }
  o.value = getValue(element);
  return o;
};

const hrToJson = () => {
  return {
    type: 'line'
  };
};

const imageToJson = (element) => {
  let o = {
    type: 'image'
  };
  let height = element.getAttribute('height');
  let width = element.getAttribute('width');
  let size = element.getAttribute('size');
  let format = element.getAttribute('format');
  let url = element.getAttribute('url');
  let value = element.getAttribute('value');
  o = Object.assign(o, {height, width, size, format, url, desc: value});
  return o;
};

const videoToJson = (element) => {
  let o = {
    type: 'video'
  };
  let result = JSON.parse(element.getAttribute('result'));
  o = Object.assign(o, result);
  return o;
};

const divToJson = (element) => {
  if (element.classList.contains('huazhi-image')) {
    return imageToJson(element);
  } else if (element.classList.contains('huazhi-video')) {
    return videoToJson(element);
  }
};

const listToJson = (element) => {
  let o = {};
  let value = [];
  if (element.nodeName === 'UL') {
    o.type = 'ul'
  } else if (element.nodeName === 'OL') {
    o.type = 'ol'
  }
  let elementList = element.childNodes;
  let length = elementList.length;
  for (let i = 0; i < length; i++) {
    let element = elementList[i];
    let result = getValue(element);
    value.push(result);
  }
  o.value = value;
  return o;
};

const elementListToJsonMap = {
  '#text': textToJson,
  'STRONG': strongToJson,
  'A': aToJson,
  'P': blockElementToJson,
  'H2': blockElementToJson,
  'BLOCKQUOTE': blockElementToJson,
  'HR': hrToJson,
  'DIV': divToJson,
  'VIDEO': videoToJson,
  'UL': listToJson,
  'OL': listToJson
};

const removeSpace = (json) => {
  // 清除后换行
  let length = json.length;
  let count1 = 0;
  let count2 = length;
  for (let i = 0; i < length; i++) {
    if (json[i].value && json[i].value.length === 0) {
      count1 += 1;
    } else {
      break;
    }
  }
  for (let i = length - 1; i >= 0; i--) {
    if (json[i].value && json[i].value.length === 0) {
      count2 -= 1;
    } else {
      break;
    }
  }
  return json.slice(count1, count2);
};


class WebRich extends Parse {
  constructor(option) {
    super(option);
  }

  renderImage(props) {
    // 适配quill自定义图片样式
    let {format, height, width, size, url, desc = ''} = props;
    let o = {format, height, width, size, url};
    let value = desc.replace(/ /g,"&nbsp;");
    return `<div class="huazhi-image" image=${JSON.stringify(o)} value=${value}></div>`;
  }

  renderLink(props) {
    // return `<p><a href="${props.route.webURL}" target="_blank">${props.content}</a></p>`;
    return `<a class="huazhi-link" target="_blank" href="${props.route.webUrl || props.route.webURL}">${props.content}</a>`;
  }

  renderVideo(props) {
    return `<video class="huazhi-video" src="${props.url}" controls="controls" result=${JSON.stringify(props)}></video>`;
  }


  /**
   * elementList => json
   * 富文本编辑内容格式化
   * @param {array} elementList
   * @return {array} json结构
   */
  elementListToJson(elementList) {
    let length = elementList.length;
    let json = [];
    for (let i = 0; i < length; i++) {
      let element = elementList[i];
      let elementType = element.nodeName;
      let func = elementListToJsonMap[elementType];
      if (func) {
        let result = func(element);
        json.push(result);
      }
    }
    json = removeSpace(json);
    return json;
  };

  /**
   * ops => json
   * 富文本编辑内容格式化
   * @param {object} source html字符串/detail结构
   * @param {boolean} isJSonString 是否转为json-string
   * @return {array<object>|string} json结构
   */
  opsToHTML(source, isJSonString = false) {
    let results = [];

    let tmp = null;
    for (let i = 0, l = source.length; i < l; i++) {
      let { insert, attributes = {} } = source[i];
      // 文本
      if (typeof insert === 'string') {
        const { bold, header, blockquote, link } = attributes;
        if (!tmp) {
          tmp = {
            type: 'text',
            value: []
          };
        }

        // 标题或者引用
        if (header === 2 || blockquote === true) {
          let lastLine = helperGetLastLIne(tmp.value);

          if (tmp.value.length) {
            results.push(tmp);
          }

          tmp = null;
          let block = {
            type: 'text',
            value: lastLine
          };
          if (header === 2) block.head = 1;

          if (blockquote === true) block.block = 1;

          results.push(block);
        } else if (bold) {
          tmp.value.push({ type: 'string', bold: 1, content: insert });
        } else if (link) {
          // 链接处理
          let type = getUrlType(link);
          let info = routes[type];
          let value = {
            type: 'link',
            content: insert,
            route: {
              route: info.route,
              webUrl: link,
              params: {
                [info.id]: getId(link)
              }
            }
          };
          tmp.value.push(value);
        } else {
          tmp.value.push({ type: 'string', content: insert });
        }

        // 非文本
      } else if (isObject(insert)) {
        // 清理文本
        if (tmp && tmp.value.length) {
          results.push(tmp);
          tmp = null;
        }

        // 图片提取
        if (insert.image && this.isImage(insert.image)) {
          results.push({ ...insert.image, type: 'image' });
        }

        // 分割线
        if (insert.hr === true) {
          results.push({
            type: 'line'
          });
        }

        // 视频提取
        if (insert.simpleVideo && insert.simpleVideo.url) {
          results.push({ ...insert.simpleVideo, type: 'video' });
        }
      }

      // 末尾不考虑其他因素
      if (i === l - 1 && tmp) {
        results.push(tmp);
      }
    }
    return isJSonString ? JSON.stringify(results) : results;
  }
}

export default WebRich;