142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
import React, { useEffect, useImperativeHandle, useState } from 'react';
|
||
import AlertMenu from './fullScreen'
|
||
import E from 'wangeditor';
|
||
import { Button } from 'antd';
|
||
|
||
interface WangType {
|
||
braftRef: any;//挂载
|
||
disabled?: any;//是否可编辑
|
||
echo?: any;//回显内容
|
||
value?: any;
|
||
height?: number;
|
||
onChange?: (value: any) => void
|
||
}
|
||
let editor: any = null;
|
||
|
||
const BraftText: React.FC<WangType> = (props) => {
|
||
let willCreate = true;
|
||
|
||
// 菜单 key ，各个菜单不能重复-自定义工具
|
||
const menuKey = 'alertMenuKey'
|
||
//======================================================================================state
|
||
const [content, setContent] = useState('');
|
||
const [fullScreen, fullScreenSet] = useState(false);
|
||
const {
|
||
braftRef,
|
||
echo,
|
||
disabled,
|
||
value,
|
||
height,
|
||
onChange,
|
||
} = props;
|
||
|
||
const tools = [//工具栏
|
||
'head',//标题
|
||
'fontSize', //字号
|
||
'lineHeight', //行高
|
||
'foreColor', //颜色
|
||
'bold', //加粗
|
||
'italic', //斜体
|
||
'underline', //下划线
|
||
'strikeThrough', //文字删除线
|
||
'indent', //缩进
|
||
'justify', //文字对齐方式
|
||
'undo', //撤销
|
||
'redo', //重做
|
||
'fullscreen', //全屏
|
||
|
||
'emoticon',//表情
|
||
'image',//图片
|
||
'video',//视频
|
||
'table',//表格
|
||
'todo',//待办
|
||
];
|
||
|
||
//=======================================================================================func
|
||
useEffect(() => {
|
||
if (willCreate) {
|
||
// 注：class写法需要在componentDidMount 创建编辑器
|
||
editor = new E("#div1")
|
||
|
||
//工具栏
|
||
editor.config.menus = tools;
|
||
//提示
|
||
editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。'
|
||
// 配置 onchange 回调函数
|
||
editor.config.onchange = editorOnChange;
|
||
// 注册菜单
|
||
// editor.menus.extend(menuKey, AlertMenu);
|
||
|
||
// 将菜单加入到 editor.config.menus 中 const menuKey = 'alertMenuKey'
|
||
// 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档 editor.config.menus.push(menuKey)
|
||
// editor.config.menus = editor.config.menus.concat(menuKey)
|
||
|
||
// 设置编辑区域高度为 500px
|
||
height && (editor.config.height = height);
|
||
/**一定要创建 */
|
||
editor.create();
|
||
|
||
//控制是否可编辑
|
||
disabled && makeDis();
|
||
|
||
willCreate = false;
|
||
}
|
||
|
||
// 重新设置编辑器内容
|
||
echo && editor.txt.html(echo);
|
||
value && editor.txt.html(value);
|
||
|
||
return () => {
|
||
// 组件销毁时销毁编辑器 注：class写法需要在componentWillUnmount中调用
|
||
editor.destroy()
|
||
}
|
||
}, [value, echo]);
|
||
/**
|
||
*提供给父级的内容
|
||
**/
|
||
useImperativeHandle(braftRef, () => ({
|
||
getText,
|
||
getHtml,
|
||
getHtml1,
|
||
makeDis,
|
||
}));
|
||
|
||
// 获取html方法1
|
||
function getHtml() {
|
||
return content
|
||
}
|
||
|
||
// 获取html方法2
|
||
function getHtml1() {
|
||
return editor.txt.html()
|
||
}
|
||
|
||
// 获取text
|
||
function getText() {
|
||
alert(editor.txt.text())
|
||
}
|
||
|
||
//change
|
||
function editorOnChange(newHtml: any) {
|
||
setContent(newHtml);
|
||
triggerChange(newHtml)
|
||
}
|
||
|
||
//不可编辑
|
||
function makeDis() {
|
||
editor.disable();
|
||
}
|
||
|
||
//form取值
|
||
const triggerChange = (newHtml: any) => {
|
||
onChange?.(newHtml);
|
||
};
|
||
return (
|
||
<div>
|
||
{/* <Button onClick={() => { editor.enable() }}>全屏</Button>
|
||
<Button onClick={() => { editor.disable() }}>全屏</Button> */}
|
||
<div id="div1" style={{ textAlign: 'left' }}></div>
|
||
</div>
|
||
)
|
||
}
|
||
export default BraftText |