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 getClientRoute = (type) => {
//
//
//   return o[type]
// };

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


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," ");
    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>`;
  }

  /**
   * 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;