OneStopWangEditor.js 3.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
/**
 * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
 * 钟是志
 * 2020年11月5日 16:56:23
 *
 **/
/**
 * key: 组件的key // 同一页面渲染应该只有一个唯一的key
 * height: number // 编辑区域的高度 单位px
 * zIndex: number // 默认为 10000 可自行设置
 * placeholder: string // 提示文字,
 * focus: boolean, // 是否获取焦点
 * value: string // 富文本的值
 * 更多配置项 参考 http://www.wangeditor.com/doc/
 * */
import React, { useState, useEffect } from 'react';
import WangEditor from './includes/wangEditor.min';
import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
19
import { queryApiActionPath, queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
20 21
import PdfMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/PdfMenu';
import VideoMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/VideoMenu';
22
let editor = null;
钟是志's avatar
钟是志 committed
23 24 25 26




27 28 29 30 31 32 33 34
export default function Index({
                                height,
                                zIndex,
                                placeholder,
                                focus,
                                value,
                                domKey,
                                onChangeValue,
35
                                menus,
36 37 38
                              }) {
  useEffect(() => {
    editor = new WangEditor(`#wangEditor${domKey}`);
39 40
    editor.menus.extend('PdfMenuKey', PdfMenu);
    editor.menus.extend('video', VideoMenu);
41
    editor.config.zIndex = 20;
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
    if (height) {
      editor.config.height = height; // 编辑器高度
    }
    if (zIndex) {
      editor.config.zIndex = zIndex; // 编辑器 z-index
    }
    if (placeholder) {
      editor.config.placeholder = placeholder; // placeholder
    }
    if (focus) {
      editor.config.focus = focus;
    }
    editor.config.onchange = function(newHtml) {
      onChangeValue(newHtml);
    };

    editor.config.onchangeTimeout = 500; // html内容改变时的 timeOut 配置

    editor.config.customUploadImg = function(resultFiles, insertImgFn) {
      // 重写上传图片的方法
62 63
      uploadFile(resultFiles[0]).then((y) => {
        if (y && y.length) {
64
          insertImgFn(queryFileUrl(y));
65 66 67 68 69 70 71 72
        }
      });
      // insertImgFn(imgUrl);
    };

    editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
    editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
钟是志's avatar
钟是志 committed
73
    editor.config.showFullScreen = false; // 关闭全局变量
74
    editor.config.menus = menus || [
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
      // 配置菜单
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'justify',
      'quote',
      // 'emoticon',
      'image',
      'video',
94
      'table',
95 96
      // 'code',
      'splitLine',
97
      'PdfMenuKey',
98 99 100 101 102
      // 'undo',
      // 'redo',
    ];

    editor.create();
钟是志's avatar
钟是志 committed
103 104 105 106 107 108 109
    editor.txt.html(value);

    // if (value && value.indexOf('wangEditorHtml') > -1) {
    //   editor.txt.html(value);
    // } else {
    //    editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
    // }
110 111 112 113 114 115 116 117 118 119 120 121 122

    return () => {
      console.log('是否销毁了editor');
      editor.destroy();
    };
  }, []);
  // useEffect(() => {
  //   if (value && editor && editor.txt) {
  //     editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
  //   }
  // }, [value]);
  return <div id={`wangEditor${domKey}`} />;
}