react富文本编辑器

react-draft-wysiwyg
wangeditor
slatejs
re-editor

Unknown DraftEntity key: null. 插入图片，再输入中文会报错，下面方法可以解决，但是会产生iframe插入会产生问题，，待解决

  function myBlockRenderer(contentBlock) {
    const type = contentBlock.getType();

    // 图片类型转换为mediaComponent
    if (type === 'atomic') {
      return {
        component: MediaComponent,
        editable: false,
        props: {
          foo: 'bar',
        },
      };
    }
  }

  class MediaComponent extends React.Component {
    render() {
      const { block, contentState } = this.props;
      const { foo } = this.props.blockProps;
      const data = contentState.getEntity(block.getEntityAt(0)).getData();
      

      const emptyHtml = ' ';
      return (
        

          {emptyHtml}
          
        
      );
    }
  }
 

下面是富文本编辑器react-draft-wysiwyg的例子

引入

import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
// css需要单独引入
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';  

样式问题

.demo-editor {
    height: 275px !important;
    border: 1px solid #f1f1f1 !important;
    padding: 5px !important;
    border-radius: 2px !important;
  }
  .toolbar-class div,
  .demo-wrapper div,
  .demo-editor div {
    box-sizing: content-box;
  }

内容变化

 function onEditorStateChange(editorState) {
    console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
    console.log(editorState);
    const oldState = editorContent; // 变更前的editorState
    const newState = editorState; // 变更后的editorState

    const oldText = oldState.getCurrentContent().getPlainText();
    const newText = newState.getCurrentContent().getPlainText();

    // if (newText !== oldText) {   // 加判断后居中 列表 不生效，所以注释
      setEditorContent(editorState);
   //  }
  }

将内容转换为html

draftToHtml(convertToRaw(editorContent.getCurrentContent()))

初始内容

// 最开始editorContent = EditorState.createEmpty();
// 会报错 Unknown DraftEntity key: null
// 就改成了以下写法，完美解决报错问题

const templateContent = `

`;
const blocksFromHtml = convertFromHTML(templateContent);
const editorStateContentInitial = ContentState.createFromBlockArray(
  blocksFromHtml.contentBlocks,
  blocksFromHtml.entityMap,
);

  const [editorContent, setEditorContent] = useState(EditorState.createWithContent(editorStateContentInitial));

校验url合法性

 function checkURL(URL = '') {
    const str = URL;
    const Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
    const objExp = new RegExp(Expression);
    if (objExp.test(str) === true) {
      return true;
    } else {
      return false;
    }
  }

  function linkCallback(url = {}) {
    if (checkURL(url.target)) {
      return url;
    } else {
      message.error('请输入正确的链接地址');
      return '';
    }
  }

  function embedCallback(url = '') {
    if (checkURL(url)) {
      return url;
    } else {
      message.error('请输入正确的网页地址');
      return '';
    }
  }

本地上传及转换为base64压缩

function uploadImageCallBack(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    const img = new Image();
    // let url = ''
    reader.onload = function(e) {
      img.src = this.result;
    };

    img.onload = function() {
      // console.log(img); // 获取图片
      // console.log(img.src.length)
      // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');

      // 图片原始尺寸
      const originWidth = this.width;
      const originHeight = this.height;

      // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
      const maxWidth = 400;
      const maxHeight = 500;
      // 目标尺寸
      let targetWidth = originWidth;
      let targetHeight = originHeight;
      // 图片尺寸超过300x300的限制
      if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
          // 更宽，按照宽度限定尺寸
          targetWidth = maxWidth;
          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
          targetHeight = maxHeight;
          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
      }
      // canvas对图片进行缩放
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      // 清除画布
      context.clearRect(0, 0, targetWidth, targetHeight);
      // 图片压缩
      context.drawImage(img, 0, 0, targetWidth, targetHeight);
      /* 第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高 */

      // 压缩后的图片转base64 url
      /* canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
       * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92 */
      const newUrl = canvas.toDataURL('image/jpeg', 0.92); // base64 格式
      resolve({
        data: {
          link: newUrl,
        },
      });

      // 也可以把压缩后的图片转blob格式用于上传
      // canvas.toBlob((blob)=>{
      //     console.log(blob)
      //     //把blob作为参数传给后端
      // }, 'image/jpeg', 0.92)
    };
  });
}