AntDesignPro4.0学习记录（⼆）富⽂本编辑器
⼆富⽂本编辑器
虽然⽹上有不少关于富⽂本编辑器的⽂章，但是针对react的富⽂本编辑器的介绍确实不够详细。⽽我要在ant design pro的使⽤富⽂本编辑的案例也不是很多。在ant design⾥有推荐的有react-quill braft-editor，此⼆款虽然有点先天优势，但我⽬前的⽔平还不太够驾驭。没办法只能再寻他款，我把⽬光投向tinymce-react，⼀番使⽤，感觉确实不错。同时我觉得TypeScript挺好。不再赘⾔，直奔主题。
相关⽂档资源
—感谢作者 莫若卿 提供翻译及⽹站
——TinyMCE官⽅指导⽂档
——v4版本，感觉AntDesign真是越来越好⽤了。
效果图
相关代码⽚段
直接放码
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();
const triggerChange=(changedValue: DpEditorValueState)=>{
if(onChange){
onChange({ html,...changedValue });
}
};
const onEditorChange=(newContent: string)=>{
setContent(newContent);
triggerChange({ html: newContent });
};
return(
<Editor
value={EditorValue.html}
onEditorChange={onEditorChange}
init={{
plugins:[
'lists link image paste help wordcount table '
],
language_url:'/tinymce/langs/zh_CN.js',
language:'zh_CN',
font_formats:'微软雅⿊=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif；苹果苹⽅=PingFang SC,Microsoft YaHei,sans-serif；宋体=simsun,serif ',
min_height:450,
images_upload_handler:(blobInfo:any, success:any, failure:any)=>{
const formData =new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
request(DpServiesUrl,{ method:'post', data: formData }).then(res=>success(res.location)).catch(err=>failure(err.status));
}
}}
/>
);
};
export default DpEditor;
在这⾥直接吧，图⽚上传功能给做上了。
如何使⽤国内cdn
还要多说⼀点，我使⽤了tinymce-react的官⽅组件，但是我进⾏了稍稍的改动。因为没有将tinymce的代码下到本地，直接采⽤clound模式（CDN）。
使⽤官⽅props修改CDN [20200305补充]
因为tiny的cdn有点慢，所以最好使⽤国内cdn。之前官⽅没有相关props，所以我在官⽅包中进⾏修改。见后⾯作废的⼩⽚段
design翻译现在可以直接使⽤props进⾏修改地址，
return(
<Editor
value={EditorValue.html}
onEditorChange={onEditorChange}
tinymceScriptSrc='cdn.bootcss/tinymce/5.2.0/tinymce.min.js'
init={{
plugins:[
'lists link image paste help wordcount table '
],
language_url:'/tinymce/langs/zh_CN.js',
language:'zh_CN',
font_formats:'微软雅⿊=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif；苹果苹⽅=PingFang SC,Microsoft YaHei,sans-serif；宋体=simsun,serif ',
min_height:450,
convert_urls:false,// 不要⾃动转图⽚路径
images_upload_handler:(blobInfo:any, success:any, failure:any)=>{
const formData =new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
request(DpServiesUrl,{ method:'post', data: formData }).then(res=>success(res.location)).catch(err=>failure(err.status));
}
}}
/>
);
直接在代码⾥修改cdn
从下内容作废了，因为官⽅更新了。
但是tinymce提供的cdn，太慢了，链接不上~~。我便把tinymce-react进⾏了修改。
见下代码
tinymce\tinymce-react\lib\lib\es2015\main\ts\components\Editor.js第83⾏
Editor.prototypeponentDidMount=function(){
if(getTinymce()!==null){
this.initialise();
}
else if(this.elementRef.current &&this.elementRef.current.ownerDocument){
var doc =this.elementRef.current.ownerDocument;
var channel =this.props.cloudChannel;
var apiKey =this.props.apiKey ?this.props.apiKey :'no-api-key';
ScriptLoader.load(scriptState, doc,"cdn.bootcss/tinymce/5.2.0/tinymce.min.js",this.initialise);
}
};
国内的cdn，加载速度，杠杠滴。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。