- yarn add?wangeditor
- 代码
editor.js
export const colorData = [
'#FFFFFF', // 白色
'#FF0000', // 红色
'#00FF00', // 绿色
'#0000FF', // 蓝色
// '#FF00FF', // 牡丹红
'#00FFFF', // 青色
'#FFFF00', // 黄色
'#000000', // 黑色
'#70DB93', // 海蓝
// '#5C3317', // 巧克力色
'#9F5F9F', // 蓝紫色
// '#B5A642', // 黄铜色
// '#D9D919', // 亮金色
'#A67D3D', // 棕色
// '#8C7853', // 青铜色
// '#A67D3D', // 号青铜色
'#5F9F9F', // 士官服蓝色
// '#D98719', // 冷铜色
// '#B87333', // 铜色
// '#FF7F00', // 珊瑚红
// '#42426F', // 紫蓝色
// '#5C4033', // 深棕
// '#2F4F2F', // 深绿
// '#4A766E', // 深铜绿色
// '#4F4F2F', // 深橄榄绿
// '#9932CD', // 深兰花色
// '#871F78', // 深紫色
// '#6B238E', // 深石板蓝
// '#2F4F4F', // 深铅灰色
// '#97694F', // 深棕褐色
// '#7093DB', // 深绿松石色
// '#855E42', // 暗木色
// '#545454', // 淡灰色
// '#856363', // 土灰玫瑰红色
'#D19275', // 长石色
'#8E2323', // 火砖色
'#238E23', // 森林绿
'#CD7F32', // 金色
'#DBDB70', // 鲜黄色
'#C0C0C0', // 灰色
'#527F76', // 铜绿色
// '#93DB70', // 青黄色
// '#215E21', // 猎人绿
// '#4E2F2F', // 印度红
// '#9F9F5F', // 土黄色
// '#C0D9D9', // 浅蓝色
// '#A8A8A8', // 浅灰色
// '#8F8FBD', // 浅钢蓝色
// '#E9C2A6', // 浅木色
// '#32CD32', // 石灰绿色
// '#E47833', // 桔黄色
// '#8E236B', // 褐红色
// '#32CD99', // 中海蓝色
// '#3232CD', // 中蓝色
// '#6B8E23', // 中森林绿
// '#EAEAAE', // 中鲜黄色
// '#9370DB', // 中兰花色
// '#426F42', // 中海绿色
// '#7F00FF', // 中石板蓝色
// '#7FFF00', // 中春绿色
// '#70DBDB', // 中绿松石色
// '#DB7093', // 中紫红色
// '#A68064', // 中木色
// '#2F2F4F', // 深藏青色
// '#23238E', // 海军蓝
// '#4D4DFF', // 霓虹篮
// '#FF6EC7', // 霓虹粉红
// '#00009C', // 新深藏青色
// '#EBC79E', // 新棕褐色
// '#CFB53B', // 暗金黄色
// '#FF7F00', // 橙色
// '#FF2400', // 橙红色
// '#DB70DB', // 淡紫色
// '#8FBC8F', // 浅绿色
// '#BC8F8F', // 粉红色
// '#EAADEA', // 李子色
// '#D9D9F3', // 石英色
// '#5959AB', // 艳蓝色
// '#6F4242', // 鲑鱼色
// '#BC1717', // 猩红色
// '#238E68', // 海绿色
// '#6B4226', // 半甜巧克力色
// '#8E6B23', // 赭色
// '#E6E8FA', // 银色
// '#3299CC', // 天蓝
// '#007FFF', // 石板蓝
// '#FF1CAE', // 艳粉红色
// '#00FF7F', // 春绿色
// '#236B8E', // 钢蓝色
// '#38B0DE', // 亮天蓝色
'#DB9370', // 棕褐色
'#D8BFD8', // 紫红色
'#ADEAEA', // 石板蓝色
'#5C4033', // 浓深棕色
'#CDCDCD', // 淡浅灰色
'#4F2F4F', // 紫罗兰色
'#CC3299', // 紫罗兰红色
'#D8D8BF', // 麦黄色
'#99CC32' // 黄绿色
]
export const menuData = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'upload', // 插入图片
'table', // 表格
'htmlTable', // 粘贴表格
// 'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
?index.js
import { Form, Drawer, message } from 'antd';
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import styles from './detail.less'
import Editor from 'wangeditor'
import { colorData, menuData } from './editor'
import { useLocation } from 'umi';
import { uploadImg } from '../../advert/save/upImg'
const Detail = forwardRef((props, ref) => {
const [form] = Form.useForm();
// 预览
const [previewVisible, changePreviewVisible] = useState(false);
// 预览内容
const [previewValue, changePreviewValue] = useState(false);
// 参数 params.query.
const params = useLocation();
const source = params?.query.source || ''
// 编辑...
useEffect(() => {
if (params?.state?.id) {
const { pushFlag = '', allUserFlag = '' } = params.state || {}
form.setFieldsValue({
...params.state,
pushFlag: pushFlag + '',
allUserFlag: allUserFlag + ''
})
console.log(params.state);
}
}, [params?.state?.id]);
useEffect(() => {
initEditor();
return () => {
editor.destroy && editor.destroy()
}
}, []);
useImperativeHandle(ref, () => ({
previewOpen: () => {
const { msgDetail } = form.getFieldsValue()
let data = {
msgDetail
}
changePreviewValue(data)
console.log(data);
changePreviewVisible(true)
},
submit: async (type) => {
await form.validateFields()
await form.validateFields()
if (type == 'add') { // 发布
} else if (type == 'draftAdd') { // 新增草稿
submitSave(type)
} else if (type == 'edit') {
} else {
submitSave(type)
}
}
}));
const submitSave = async (type, value = {}, callback) => {
const formData = await form.validateFields()
let data = {
...formData,
...value,
}
let msgSource = ''
data.msgSource = msgSource
console.log(data);
let msgSuccess = ''
let res = {}
if (type == 'add') {
msgSuccess = '发布成功'
} else if (type == 'draftAdd') { // 新增草稿
data.msgStatus = '01'
msgSuccess = '设置成功'
} else if (type == 'edit' || type == 'editSave') {
data.id = params.query.id
}
const allUserFlag = formData.allUserFlag
let userSelectDto = {}
if (allUserFlag == '0') {
userSelectDto.mhtTagList = formData.mhtTagList
userSelectDto.mhtSelectCondition = {
orgCodeList: formData.orgCodeList, // 机构
}
userSelectDto.clientType = formData.clientType
delete data.mhtTagList
delete data.orgCodeList
delete data.mccCodeDtoList
delete data.regionCodeDtoList
}
data.userSelectDto = userSelectDto
if (type == 'edit' || type == 'editSave') {// 编辑的发布 编辑的保存
} else { // 新增
}
if (res && res.code === '000000') {
// ...
callback && callback()
message.success(msgSuccess)
} else {
message.error(res.msg)
}
}
let editor = null
const editorRef = useRef();//创建对象
const initEditor = () => {
editor = new Editor(editorRef.current);
editor.config.onchange = (newHtml) => {
form.setFieldsValue({ msgDetail: newHtml })
};
editor.config.onchangeTimeout = 500;
editor.config.menus = menuData
editor.config.colors = colorData
editor.config.customUploadImg = async function (files, insert) {
let file;
if (files && files.length) {
file = files[0];
const res = await uploadImg(file)
res ? insert(res) : ''
} else {
return
}
}
editor.create()
if (source == 'look') {
editor.disable();
} else {
editor.enable();
}
};
return (
<div className={styles.noticeNewDetails}>
<Form
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
initialValues={props.values}
>
<Form.Item
label="消息详情"
name="msgDetail"
className={styles.formItem}
rules={[{ required: true, message: '请输入消息详情！' }]}
>
<div className='editorInput' ref={editorRef}></div>
</Form.Item>
</Form>
<Drawer title="手机消息预览" placement="right" onClose={() => { changePreviewVisible(false) }} visible={previewVisible}>
<div dangerouslySetInnerHTML={{ __html: previewValue.msgDetail }}></div>,
</Drawer>
</div>
);
})
export default Detail;
- ?
