富文本编辑器wangeditor+react
·
目前wangeditor已经到5.0版本,但是之前4.0版本能够做到复制粘贴excel和word文件时保留颜色样式文件,下面的代码基于
“wangeditor”: “^4.7.9”
(ps:项目环境在云桌面上运行代码,假如从本机excel复制文件到项目页面中是有颜色样式的,但是在云桌面里的excel里面复制的文件就不带样式,脑壳痛,为啥子。。。)
1、子组件editor.js
import Editor from './editor';
import { Form } from 'antd';
import React, { useState, useCallback } from 'react';
const TableEditor = props => {
// const { getFieldDecorator } = props.form;
const onChange = newHtml => {
var str=newHtml
if(newHtml.includes('<table>')){
str = newHtml.replace(/<table>/g, '<table border="1" width="100%" cellpadding="0">');
}
console.log('aaa', str);
if (window.parent != window) {
window.parent.ReactAPI.getComponentAPI('Input')
.APIs('checkreport.checkDataInfo')
.setValue(str);
}
};
return (
<div>
<Editor onChange={onChange} />
</div>
);
};
export default TableEditor;
2、父组件index.js
import E from 'wangeditor';
import { useEffect } from 'react';
import "./index.less"
/**
* 这里用函数式组件
*/
let editor = null;
function App(props) {
const { value, onChange } = props;
useEffect(() => {
// 注:class写法需要在componentDidMount 创建编辑器
editor = new E('#div1');
editor.config.onchange = newHtml => {
onChange(newHtml);
};
editor.config.pasteFilterStyle = false; //复制粘贴携带样式
// 需要展示的菜单
editor.config.menus = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo',
];
/**一定要创建 */
editor.create();
if (window.parent != window) {
let text = window.parent.ReactAPI.getComponentAPI('Input')
.APIs('checkreport.checkDataInfo')
.getValue();
console.log(text);
editor.txt.html(text);
}
// let a='<p>sahfdlf</p>'
// editor.txt.html('<div>kjlk</div>');
return () => {
// 组件销毁时销毁编辑器 注:class写法需要在componentWillUnmount中调用
editor.destroy();
};
// 这里一定要加上下面的这个注释
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(
() => {
if (editor) {
editor.txt.html(value);
}
},
[value],
);
return (
<div>
<div id="div1" />
</div>
);
}
export default App;
3、样式文件index.less
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}
4、大概长这个亚子
更多推荐
所有评论(0)