美文网首页
react hook结合Ueditor实现富文本编辑器

react hook结合Ueditor实现富文本编辑器

作者: 一个被程序员耽误的厨师 | 来源:发表于2020-12-31 10:39 被阅读0次

    首先在官网上下载相关插件,但是有几点需要改动,那我直接把我改好的贴出出来吧,希望可以帮到大家。

    点击下载Ueditor

    然后在index.html页面里引入js和css

    
        <!-- 百度富文本脚本 -->
        <script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.config.js'%>"></script>
        <script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.all.js'%>"></script>
    

    二次封装组件代码如下

    /* eslint-disable func-names */
    /* eslint-disable prefer-const */
    /* eslint-disable @typescript-eslint/no-use-before-define */
    import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
    
    let editor = null;
    
    const toolbars = [
      [
        'source',
        '|',
        'undo',
        'redo',
        '|',
        'bold',
        'italic',
        'underline',
        // 'fontborder',
        'strikethrough',
        'removeformat',
        // 'formatmatch',
        // 'autotypeset',
        'blockquote',
        // 'pasteplain',
        '|',
        'forecolor',
        'backcolor',
        'insertorderedlist',
        'insertunorderedlist',
        '|',
        'paragraph',
        'fontfamily',
        'fontsize',
        '|',
        'indent',
        'justifyleft',
        'justifycenter',
        'justifyright',
        'justifyjustify',
        '|',
        // 'touppercase', 'tolowercase', '|',
        'link',
        // 'unlink',
        '|',
        'imagenone',
        'imageleft',
        'imageright',
        'imagecenter',
        '|',
        'simpleupload',
        'insertimage',
        // '|',
        // 'horizontal',
        // 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
        // 'searchreplace'
      ],
    ];
    
    function UEditor(props, ref){
      useEffect(() => {
        if (window.UE.getEditor) {
          setConfig(props.initData, props.config, props.setContent);
        }
        
        return () => {
          editor.destroy(props.id);
          // 组件销毁时候移除页面中id的textarea
          let tagElement = window.document.querySelector(`#ueditor-container`);
          tagElement.parentElement.removeChild(tagElement);
          // editor.removeListener(); //不要打开,否则返回有问题报错
        };
      }, []);
    
    
      // 初始化编辑器
      const setConfig = (initData, config, setContent) => {
        editor =
          window.UE &&
          window.UE.getEditor('ueditor-container', {
            toolbars,
            // enableAutoSave: false,
            maximumWords: 1000000,
            scaleEnabled: false,
            autoFloatEnabled: false,
            autoHeightEnabled: false,
            initialFrameHeight: (config && config.initialFrameHeight) || 450,
            initialFrameWidth: (config && config.initialFrameWidth) || '100%',
            zIndex: 1,
          }
        );
        editor.ready(() => {
          if (initData) {
            editor.setContent(initData); // 设置默认值/表单回显
          }
        });
        editor.addListener('blur', function () {
          setContent(editor.getContent());
        });
      };
    
      // 暴露方法
      useImperativeHandle(ref, () => ({
        getUEContent: () => {
          return editor.getContent(); // 获取编辑器内容
        },
      }));
    
    
      return <script id="ueditor-container" type="text/plain" />;
    };
    
    export default forwardRef(UEditor);
    

    具体使用方法

    /* eslint-disable react/no-danger */
    /* eslint-disable import/no-unresolved */
    /* eslint-disable consistent-return */
    /* eslint-disable no-eval */
    /* eslint-disable no-param-reassign */
    /* eslint-disable array-callback-return */
    /* eslint-disable react/self-closing-comp */
    import React, {useState, useRef} from 'react';
    import Ueditor from '@components/Editor/index2.js';
    import styles from './contentModule.less';
    
    function ContentModule(props) {
      const {
        editorText = '', 
        setEditorText= ()=>{},
      } = props;
    
      const ueRef = useRef(null)
    
      const [config] = useState({
        initialFrameWidth: '100%',
        initialFrameHeight: 400
      })
      
      // 富文本失焦就触发setContent函数设置表单的content内容
      const setContent = (content)=>{
        setEditorText(content);
      }
    
      return (
        <div className={styles.ueditor}>
          <Ueditor 
            id="container" 
            ref={ueRef} 
            config={config} 
            initData={editorText} 
            setContent={(e)=>setContent(e)}>
            </Ueditor>
        </div>
      );
    }
    
    export default ContentModule;
    
    image.png

    相关文章

      网友评论

          本文标题:react hook结合Ueditor实现富文本编辑器

          本文链接:https://www.haomeiwen.com/subject/fusloktx.html