Ant Design Pro 4.0学习记录（二）富文本编辑器

最新推荐文章于 2023-07-05 10:00:41 发布

antdz

最新推荐文章于 2023-07-05 10:00:41 发布

阅读量7.7k

点赞数 3

分类专栏： AntDesignProV4学习记录

本文链接：https://blog.csdn.net/antdz/article/details/104369519

版权

本文档记录了在Ant Design Pro 4.0中集成TinyMCE富文本编辑器的过程，包括相关资源、效果展示、代码片段以及如何在国内使用CDN。详细介绍了如何通过官方props修改CDN地址以提升加载速度。

摘要由CSDN通过智能技术生成

二富文本编辑器

虽然网上有不少关于富文本编辑器的文章，但是针对react的富文本编辑器的介绍确实不够详细。而我要在ant design pro的使用富文本编辑的案例也不是很多。在ant design里有推荐的社区精选组件有react-quill braft-editor，此二款虽然有点先天优势，但我目前的水平还不太够驾驭。没办法只能再寻找他款，我把目光投向tinymce-react，一番使用，感觉确实不错。同时我觉得TypeScript挺好。不再赘言，直奔主题。

效果图

相关代码片段

直接放码

import React, {
    useState } from 'react';
import {
    Editor } from '@tinymce/tinymce-react';
import  request from '../../utils/request';

interface DpEditorValueState {
   
  html: string | '';
}

interface DpEditorProps {
   
  EditorValue: DpEditorValueState;
  onChange?: (EditorValue: DpEditorValueState) => void;
  DpServiesUrl:string;
}

const DpEditor: React.FC<DpEditorProps> = ({
    EditorValue = {
   }, onChange,DpServiesUrl }) => {
   
  const [html, setContent] = useState