React Editor - 富文本編輯器wangeditor

1. npm install依賴安裝

npm install wangeditor --save

 

2. 在tsx文件中引入

import E from 'wangeditor';

 

3.頁面使用

function TinymceEditor(props) {
    const [content, setContent] = useState('');
    let editor = null;

    useEffect(() => {
        editor = new E('#div1');

        editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 上傳圖片大小2M
        editor.config.uploadImgServer = urlPath + '/fileclient-management/api/uploadpic';　　// 路徑 // 限制一次最多上傳 1 張圖片
        editor.config.uploadImgMaxLength = 1;
        editor.config.customUploadImg = function(files, insert) {
            // files 是 input 中選中的文件列表
            console.log(files);
            if (files[0]) {
                const formData = new window.FormData();
                formData.append('file', files[0], 'cover.jpg');
                fetch(urlPath + '/fileclient-management/api/uploadpic', {
                    method: 'POST',
                    body: formData
                })
                    .then((res) => {
                        return res.json();
                    })
                    .then((res) => {
                        const data = res.resultData;
                        if (data) {
                            // 上傳代碼返回結果之后，將圖片插入到編輯器中
                            insert(data.resourceUrl);
                        } else {
                            console.log(data.msg);
                        }
                    });
            } else {
                message.info('請選擇要上傳的圖片');
            }
        };
        editor.config.menus = [
            'head', // 標題
            'bold', // 粗體
            'fontSize', // 字號
            'fontName', // 字體
            'italic', // 斜體
            'underline', // 下划線
            'strikeThrough', // 刪除線
            'foreColor', // 文字顏色
            'backColor', // 背景顏色
            'link', // 插入鏈接
            'list', // 列表
            'justify', // 對齊方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入圖片
            'table', // 表格
            'video', // 插入視頻
            'code', // 插入代碼
            'undo', // 撤銷
            'redo' // 重復
        ];
        editor.config.lang = {
            設置標題: 'Title',
            字號: 'Size',
            文字顏色: 'Color',
            設置列表: 'List',
            有序列表: '',
            無序列表: '',
            對齊方式: 'Align',
            靠左: '',
            居中: '',
            靠右: '',
            正文: 'p',
            鏈接文字: 'link text',
            鏈接: 'link',
            上傳圖片: 'Upload',
            網絡圖片: 'Web',
            圖片link: 'image url',
            插入視頻: 'Video',
            格式如: 'format',
            上傳: 'Upload',
            創建: 'init'
        };
        /**一定要創建 */
        editor.create();

        return () => {
            // 組件銷毀時銷毀編輯器  注：class寫法需要在componentWillUnmount中調用
            editor.destroy();
        };
    }, []);
    useEffect(() => {
        getHtml();
    }, [content]);
    // 獲取html方法1
    function getHtml() {
        editor.txt.html(content);
    }

    return (
        <div>
            <div id="div1"></div>
        </div>
    );
}

 

參考文檔：https://www.wangeditor.com/index.html