React wangEditor5使用说明

1.支持包安装

yarn 添加@wangeditor/editor
# 或 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-react
# 或 npm install @wangeditor/editor-for-react --save

2。使用

import '@wangeditor/editor/dist/css/style.css' //介绍cssimport { useState,使用效果}来自'反应'
import{编辑,Toolbar} 来自'@wangeditor/editor-for-react 
import { IDomEditor, IEditorConfig, IToolbarConfig } 来自 '@ wangeditor/编辑器'类型 InsertImgType =  ( url：字符串， alt: 字符串, href:   绳)=>空;类型 插入视频类型 = （） url:字符串,海报?:弦)=> void;const我的编辑器: 功能组件 = () => {//编辑器实例const [编辑器,设置编辑器] = useState<IDomEditor | null>(null);内容//编辑器const [html, setHtml] = useState('
你好
')//模拟ajax请求，异步设置htmluseEffect(()  => {设置超时(()=>{setHtml('
你好世界
')},1500)},[])//工具栏配置consttoolbarConfig:部分<IToolbarConfig> = {排除键：  ['group-video']};//编辑器配置 const  editorConfig： 部分<IEditorConfig> = {占位符: '请输入内容...',只读: 假,MENU_CONF  :{上传图片:{//自定义上传--图片customUpload: (文件 :文件,插入Fn:插入图像类型)=>{if(文件.类型.那个就是，选中的文件//可以自己上传，并获取图片url alt href//最后插入图片insertFn(url, alt,  href) } 其他 {//错误信息}} },上传视频:{//自定义上传--视频 customUpload: (file  :文件,插入Fn:插入视频类型)=>{ //文件为选择的文件//自行上传，获取视频url海报//最后插入视频insertFn(url,海报)}}}}useEffect(()=>{//修改弹窗位置，使编译器居中编辑器? .on('modalOrPanelShow', modalOrPanel =>   {如果 ( modalOrPanel .类型 !== '模态')  返回const {  $elem } = modalOrPanel; //模态元素const宽度= $ elem.宽度();const高度= $elem .高度( );//设置模态位置z-index$elem.css({ 左：'50%',顶部:'50%', 底部：'非盟to', //底部间距需要修改，否则会受组件自身计算影响marginLeft:`-${ 宽度 / 2}px`, 边距顶部： ` -$ {高度/2}px`,z索引 : 1000 }) ;});//及时销毁编辑器，重要！ 返回()=>{if (编辑== null)返回编辑器.销毁()setEditor(null )}},[编辑])返回 (< ><div样式={{边框: '1px实心#ccc'，  zIndex: 100}}><Toolbar编辑={编辑}defaultConfig={toolbarConfig}模式=“默认” 风格={{ borderBottom： '1px 实心 #ccc' }}/><EditordefaultConfig= {editorConfig}值={html}onCreated={setEditor} onChange={编辑器=>setHtml (编辑器.getHtml())}模式="默认"样式= {{身高: '500px',溢出Y:'隐藏' }}/> </div></>) }导出默认我的编辑器；

3、自定义菜单

1。添加自定义菜单窗弹

import {DomEditor,IDomEditor,  IModalMenu、 SlateNode、 SlateTransforms , t } 来自'@wangeditor/editor'; 
import { DOMElement } 来自 '@wangeditor/editor/dist/editor/src/utils/dom';import { genModalButtonElems, genModalInputElems  } 来自 './utils';类 EditImageSize 实现 IModalMenu  {showModal: boolean; modalWidth: 数字;标题:  string;iconSvg?:  字符串;热键?:字符串;始终启用?:布尔值;标签:字符串;宽度?: 数字;private $content: DOMElement | null =null;私人getSelectedImageNode(编辑器:IDomEditor) ： SlateNode | null {返回DomEditor.getSelectedNodeByType(编辑器, '图片')}构造函数() {this.标题= t('videoModule.editSize');// this.iconSv g = ' ';这个.标签='按钮'; .showModal =true;这个。 modalWidth =320;} //是否需要激活菜单（如选择粗体文本，则会激活“粗体”菜单），如果不使用则返回falseisActive() : boolean{//任何时候都无需激活菜单返回 假}/ / 获取菜单执行时的值。如果不使用，则返回空字符串或 false getValue  (): string  |boolean {//插入菜单，不需要值返回 ''} //是否需要禁用菜单（如果选择H1，则“参考”菜单被禁用），如果不使用，则返回 falseisDisabled（editor: IDomEditor) : 布尔值  {if ( 编辑.选择== null)  返回 trueconst videoNode  =  这个.getSelectedImageNode (编辑)if(视频Node == null) {//如果选择不在图像节点中，则禁用返回true}return false}//点击菜单时触发的函数执行(){ // 点击菜单时，弹窗弹出前不需要执行其他代码  // 留空即可 } // 弹窗的定位盒子模态：1.返回某个SlateNode； 2.返回null（根据当前选择自动定位） getModalPositionNode(editor: IDomEditor)  : SlateNode |空{返回这个。 getSelectedImageNode(编辑器);}//定义modal内部的DOM元素getModalContentElem(editor:IDomEditor ) : DOMElement { 常量$内容=这个.$内容 ||  文档.createElement ('div');const[inputWidthContainerElem,inputWidthElem]=  genModalInputElems （t（'videoModule.width'）,`输入宽度- $ {数学.随机().toString(36).切片(2 )}`,'自动');常量  [inputHeightContainerElem,inputHeightElem ] = genModalInputElems（t） ('视频模块.高度'),` 输入高度-${数学.随机(). toString(36).切片(2)}`,'自动');constbuttonContainerElem = genModalButtonElems(`按钮-${数学 .随机() .toString(36).切片(2)}`,t('videoModule.ok'));$内容.附加( inputWidthContainerElem);$内容.附加(inputHeightContainerElem);$内容 .追加(buttonContainerElem);const imageNode =这个.获取选择edImageNode(编辑器)as未知  as HTMLElement;//绑定事件(第一次渲染时绑定，不再绑定）if (this.$content ==   null ) {buttonContainerElem.onclick  = () =>  {常数宽度=数量 (inputWidthElem.值); 常量高度=数字（inputHeightElem）  .值);控制台。 log(编辑器,isNaN(宽度)?inputWidthElem。 值:宽度?宽度+'px'  : '自动' ,  isNaN(高度) ?   inputHeightElem.值:高度?高度+'px':'自动' )编辑器.恢复选择( );//修改尺寸SlateTransforms.setNodes(编辑器,{样式 : {宽度: isNaN(宽度)?inputWidthElem.值:宽度? 宽度 +'px' : '自动', 高度: isNaN (高度)?inputHeightElem.值:高度?高度+'px' : 'auto',}} as任何, {匹配: n =>DomEditor.检查节点类型(n, '图片'),})编辑器.隐藏面板或模态(); // 隐藏模态框}}if (imageNode == null)返回 $content;//初始化输入值const {宽度 = '自动',高度 = '自动' }  = imageNode.样式;inputWidthElem.值= 宽度||'自动' ;inputHeightElem.值=高度|| '自动';设置超时( ()=>{inputWidthElem.焦点()});return $content //返回DOM元素类型 // PS：$content也可以缓存，这样就不用每次都重复创建和绑定事件，优化性能}}导出constEditImageSizeConf={键：  'editImageSize', //定义菜单键：保证唯一性和不重复（重要）factory () {返回新编辑图像大小( )  // 将 `YourMenuClass` 替换为您的菜单类别},
}

实用工具

//生成输入框导出 const genModalInputElems =  (标签:字符串,id:字符串,val:字符串):[HTMLLabelElement, HTMLInputElement] => {const $标签=文档.createElement ('标签');$标签.className =  'babel-container'; const $span =文档.createElement('跨度');$span.文本内容=标签;const$输入=文档.createElement( '输入');$输入.类型= '文本';$输入。 id = id;$输入.值=val;$标签。 追加($span);$标签.追加($输入) ;返回[$label, $输入];};//按钮生成
导出 const genModalButtonElems =  (id:字符串 ,文字:字符串)=>  {常量$内容=文档.createElement('div');$内容。 班级名称='按钮容器';const $button =文档.createElement('按钮');$按钮.id =id;$按钮.文本内容=文本;$内容.追加($按钮); 返回$内容;
};

2。注册自定义菜单

 //注册自定义菜单 useEffect(() =>{尝试{启动.registerMenu(EditImageSizeConf); }抓住（ e){}}, [])

3。安装到工具栏

 //工具栏配置 consttoolbarConfig:部分<IToolbarConfig>={插入按键: {索引:   , //插入位置，根据当前工具栏按键按键： ['editImageSize']} } 

4。安装到组件悬停菜单