wangEditorComponent.js

/**
 * 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 './uploadFile';
import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
import PdfMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/PdfMenu';
import VideoMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/VideoMenu';
let editor = null;
export default function ZydCmsWangEditor({
	height,
	zIndex,
	placeholder,
	focus,
	value,
	domKey,
	onChangeValue,
}) {
	useEffect(() => {
		editor = new WangEditor(`#wangEditor${domKey}`);
    editor.menus.extend('PdfMenuKey', PdfMenu);
    editor.menus.extend('video', VideoMenu);
    editor.config.zIndex = 20;
    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) {
			// 重写上传图片的方法
      compressImage(resultFiles[0], (fileNew) => {
        // return ;
        uploadFile({ file: fileNew }).then((y) => {
          if (y && y.url) {
            insertImgFn(y.url);
          }
        });
      })

			// insertImgFn(imgUrl);
		};

		editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
		editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
		editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
    // editor.config.uploadImgShowBase64 = true;
    editor.config.menus = [
			// 配置菜单
			'head',
			'bold',
			'fontSize',
			'fontName',
			'italic',
			'underline',
			'strikeThrough',
			'indent',
			'lineHeight',
			'foreColor',
			'backColor',
			'link',
			'list',
			'justify',
			'quote',
			// 'emoticon',
			'image',
			'video',
			'table',
			// 'code',
			'splitLine',
      'PdfMenuKey',
			// 'undo',
			// 'redo',
		];

		editor.create();
		if (value && value.indexOf('wangEditorHtml') > -1) {
			editor.txt.html(value);
		} else {
			editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
		}

		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}`} />;
}