提交 b8d63d84 authored 作者: 钟是志's avatar 钟是志

26806 【北电科-通用功能】编辑器功能优化--增加本地视频上传功能,,,线下文档复制保留格式

上级 49ff97c9
......@@ -4,20 +4,65 @@
* 官方文档 https://www.wangeditor.com/v5/getting-started.html
* 将github 的源代码 下载下来 并执行
* npm install
* 再在 git bash 中执行 npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并引用
* 再在 git bash 中执行
* npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
* */
import WangEditor5 from './index.esm';
import './css/style.css';
import React, { useEffect, useState } from 'react';
import styles from './css/style.less';
import * as WangEditor5 from './index.esm';
import React, { Fragment, useEffect, useState } from 'react';
export default function WangEditorReactComponent(props) {
const {
domKey = 'cmsContent',
height = '450px',
} = props;
useEffect(() => {
console.log(WangEditor5);
const editorConfig = {
placeholder: '请输入内容',
onChange: (editor) => {
console.log('content', editor.children);
console.log('html', editor.getHtml());
},
};
const toolbarConfig = {
// toolbarKeys: [
// // 配置菜单
// // 'head',
// 'bold',
// ],
};
const editor = WangEditor5.createEditor({
selector: '#' + domKey,
config: editorConfig,
mode: 'default',
},
);
WangEditor5.createToolbar({
editor,
selector: '#wangEditorToolBar',
config: toolbarConfig,
mode: 'default',
});
// console.log(editor.getAllMenuKeys());
// console.log(WangEditor5.DomEditor.getToolbar(editor));
}, []);
return <div>
return <div className={styles.wangEditor5}
style={{ zIndex: '149', }}
>
<div id={'wangEditorToolBar'}
style={{ zIndex: '150', }}
>
</div>
<div id={domKey}
style={{ zIndex: '149', }}
>
</div>
</div>;
}
.wangEditor5{
//width: 500px;
min-height: 500px;
background-color: #fff;
border: 1px solid gray;
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论