Toolbar，mode=”simple”
取消了选中文字的悬浮菜单
@wangeditor/editor@5

  1. "@wangeditor/editor": "^5.1.23",
  2. "@wangeditor/editor-for-react": "^1.0.6",

�

WangEditor编辑器简洁版预览
1190px宽度，编辑器UI效果
image.png

865px宽度，编辑器UI效果
image.png

WangEditor 编辑器

  1. import {
  2.   useState,
  3.   useEffect,
  4.   useMemo
  5. } from 'react';
  6. import {
  7.   string,
  8.   number,
  9.   object,
  10.   array,
  11.   func,
  12.   oneOf,
  13.   oneOfType
  14. } from "prop-types";
  15. import { merge, noop, isEqual } from "lodash-es";
  16. import cls from 'classnames';
  17. import { Editor, Toolbar } from '@wangeditor/editor-for-react';
  18. import {
  19.   IDomEditor,
  20.   IEditorConfig,
  21.   IToolbarConfig
  22. } from '@wangeditor/editor';
  24. WangEditor.propTypes = {
  25.   value: oneOfType([array, string]),
  26.   onChange: func,
  27.   height: number,
  28.   placeholder: string,
  29.   mode: oneOf(["simple", "default"]),
  30.   className: oneOfType([string, object]),
  31.   style: object,
  32. };
  33. WangEditor.defaultProps = {
  34.   value: "",
  35.   onChange: noop,
  36.   height: 200,
  37.   placeholder: "请输入内容...",
  38.   mode: "simple"
  39. };
  41. function WangEditor(props) {
  42.   const {
  43.     value,
  44.     onChange,
  45.     height,
  46.     placeholder,
  47.     mode,
  48.     className,
  49.     style
  50.   } = props;
  52.   // editor 编辑器实例
  53.   const [editorInst, setEditorInst] = useState<IDomEditor | null>(null);
  55.   // 编辑器内容
  56.   const [content, setContent] = useState(value);
  58.   // useEffect 是在render结束之后才执行的
  59.   useEffect(() => {
  60.     // 及时销毁 editorInst 重要！
  61.     return () => {
  62.       if (!editorInst) return;
  63.       editorInst.destroy();
  64.       setEditorInst(null);
  65.     };
  66.   }, [editorInst]);
  68.   // value 改变，设置 content
  69.   useEffect(() => {
  70.     if (isEqual(value, content)) return;
  71.     setContent(value);
  72.   }, [value]);
  74.   // 工具栏配置
  75.   const toolbarConfig: Partial<IToolbarConfig> = useMemo(() => ({}), []);
  77.   // 编辑器配置
  78.   const editorConfig: Partial<IEditorConfig> = useMemo(() => ({
  79.     placeholder,
  80.     // scroll: false, // 禁止编辑器滚动
  81.     // maxLength: 1000,
  82.     // onMaxLength(editor) {
  83.     //   console.log('Trigger maxlength callback')
  84.     // },
  85.     MENU_CONF: {
  86.       // onChange(editor: any) {
  87.       //   console.log(editor.getHtml());
  88.       // },
  89.       uploadImage: {
  90.         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  91.         fieldName: 'your-custom-name',
  92.         // 单个文件的最大体积限制，默认为 2M
  93.         maxFileSize: 2 * 1024 * 1024, // 1M
  94.         // 最多可上传几个文件，默认为 100
  95.         maxNumberOfFiles: 10,
  96.         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  97.         allowedFileTypes: ['image/*'],
  99.         /**
  100.          * 小于该值就插入 base64 格式（而不上传），默认为 0
  101.          * 1MB 兆 = 1024KB 千字节 * 1024B 比特 = 1048576 kb 字节
  102.          * 1MB = 1024KB
  103.          * 1KB = 1024B
  104.          * 10 * 1024 * 1024, // 10M 以下插入 base64
  105.          */
  106.         // 10 * 1024 * 1024 // 10M 以下
  107.         base64LimitSize: 5 * 1024, // 5kb
  109.         // 跨域是否传递 cookie ，默认为 false
  110.         withCredentials: true,
  112.         // 超时时间，默认为 10 秒
  113.         timeout: 5 * 1000, // 5 秒
  115.         // 自定义增加 http  header
  116.         headers: {
  117.           Accept: 'text/x-json',
  118.           otherKey: 'xxx',
  119.         },
  121.         // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  122.         meta: {
  123.           token: 'xxx',
  124.           otherKey: 'yyy',
  125.         },
  126.       },
  127.       // fontSize: { // 覆盖默认的配置
  128.       //   fontSizeList: [
  129.       //     { name: '26px', value: '26px' },
  130.       //   ],
  131.       // }
  132.     }
  133.   }), [placeholder]);
  135.   function handleChange(editor: IDomEditor) {
  136.     // const html = editor.getHtml(); // 获取 HTML
  137.     // const text = editor.getText(); // 获取纯文本，默认带换行符
  138.     // const text = editor.getText().replace(/\n|\r/mg, '');
  139.     const json = editor.children; // 获取 JSON []
  141.     // editor.getSelectionText() // 选中的文字
  142.     setContent(json);
  143.     onChange(json, editor);
  144.   }
  146.   const EditorStyle = useMemo(() => {
  147.     return merge({ height, overflow: "hidden auto" }, style);
  148.   }, [style, height]);
  150.   return (
  151.     <div className={cls('z-100', className)}>
  152.       {/*工具栏组件*/}
  153.       <Toolbar
  154.         editor={editorInst}
  155.         defaultConfig={toolbarConfig}
  156.         mode={mode}
  157.       />
  159.       {/*编辑器组件*/}
  160.       <Editor
  161.         defaultConfig={editorConfig}
  162.         content={content}
  163.         onCreated={setEditorInst}
  164.         // 编辑器内容改变
  165.         onChange={handleChange}
  166.         style={EditorStyle}
  167.         mode={mode}
  168.       />
  169.     </div>
  170.   );
  171. }
  172. export default WangEditor;

value

value，默认只支持 html标签 string字符串格式
html字符串细节

  • html字符串存储是没有样式的，需要自己维护 css样式
  • html必须是 WangEditor生成的 html字符串，不能是自定义的 html，自定义的可能解析失败
  • 自定义的 html无法全部兼容，例如行内的样式，就会解析失败

content

json格式，需要设置 content，而不是 value

@wangeditor.css

global.less引入 编辑器全局样式
@import “./assets/css/@wangeditor.css”;
样式自定义参考 import “@wangeditor/editor/dist/css/style.css”;

  1. .w-e-text-container {
  2.   position: relative;
  3.   height: 100%;
  4.   border: 1px solid var(--w-e-toolbar-border-color);
  5.   border-top: none;
  6.   background-color: var(--w-e-textarea-bg-color);
  7.   color: var(--w-e-textarea-color);
  8. }
  10. .w-e-toolbar {
  11.   flex-wrap: wrap;
  12.   position: relative;
  13.   border-radius: 8px 8px 0 0;
  14.   background-color: var(--w-e-toolbar-border-color);
  15. }