Skip to content

W
WebPublic
提交 6d5eb7a1 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

wangEditor5 开发失败

上级 83d45757
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 149 行删除
zyd_public/WangEditor/WangEditor5/DiyMenu/pdfMenu.js 0 → 100644
浏览文件 @ 6d5eb7a1
import { uploadFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import { message } from 'antd';
import { isJSON } from '@/webPublic/one_stop_public/tableCompon/Split_Index/staticInfo';
class MyMenu {
constructor() {
this.title = 'pdf上传';
this.iconSvg = `<svg viewBox='0 0 1024 1024'
xmlns='http://www.w3.org/2000/svg'
width='18'
height='18'
fill='currentColor'
>
<path d='M905 179q-10-10-22-21-36-33-67-62-3-2-5-4-45-41-71-63-16-13-25-19-6-5-11-7-6-3-13-3-10 0-17.5 7.5T666 26v230h230l-26-25v767l26-25H230q-31 0-53.5-22.5T154 896V26l-26 26h461q10 0 17.5-7.5t7.5-18-7.5-18T589 1H102v895q0 53 37.5 90.5T230 1024h692V205H691l26 26V26q0 10-7.5 17.5T692 51q-5 0-9-2l2 2q7 5 22 17 25 22 69 62 3 2 5 4 31 28 67 62 12 10 22 20 6 5 8 8 8 7 18.5 7t18-8 7-18.5T914 187q-4-3-9-8zM102 461H0v435h1024V461H102z m106 250v108h-50V528h111q49 0 77.5 25.5T375 621t-28 66-79 24h-60z m0-41h61q27 0 41-12.5t14-36.5-14-38-40-14h-62v101z m211 149V528h86q39 0 69 17t46.5 49 16.5 72v15q0 41-16.5 72.5t-47 48.5-70.5 17h-84z m51-250v210h33q40 0 61-25t22-72v-16q0-47-20.5-72T505 569h-35z m385 127H738v123h-51V528h185v41H738v86h117v41z' />
</svg>`;
this.tag = 'button';
}
getValue(editor) {
return '';
}
isActive(editor) {
return false; // or false
}
isDisabled(editor) {
return false; // or true
}
exec(editor, value) {
console.log('exec', editor);
let dom = document.createElement('input');
dom.accept = '.pdf';
dom.type = 'file';
dom.onchange = (v) => {
console.log(v);
if (dom.files && dom.files.length) {
message.info('正在上传文件, 请耐心等待');
const file = dom.files[0];
console.log(file);
const fileName = file.name;
uploadFile(file)
.then((res) => {
setTimeout(() => {
if (res && typeof res === 'string' && res.length > 10 && res.indexOf('errMsg') <= -1) {
let url = queryApiActionPath() + res;
message.success('上传文件成功');
const v = `<p class='wangEditor-pdfReader'><embed width='100%'
height='768px'
name='plugin'
id='plugin'
src='${url}'
type='application/pdf'
internalinstanceid='3'
title='${fileName}'/>
</p>
<p class='wangEditor-aHref'>
<a href='${url}'
target='_blank'
download='${fileName}'>
${fileName}
</a></p>`;
editor.dangerouslyInsertHtml(v); //
}else{
let text = '上传文件失败';
if(isJSON(res)){
text = text + ',' + JSON.parse(res).errMsg;
}
editor.dangerouslyInsertHtml(`<a href="123123">123123</a>`); //
message.error(text);
}
}, 2000);
});
}
};
dom.click();
}
}
const myMenuConf = {
key: 'myMenu',
factory() {
return new MyMenu();
},
};
export default myMenuConf;
zyd_public/WangEditor/WangEditor5/ReactComponent.js
浏览文件 @ 6d5eb7a1
/**
*
* WangEditor5的使用
* 2022年6月21日
* 官方文档 https://www.wangeditor.com/v5/getting-started.html
* 将github 的源代码 下载下来 并执行
* npm install
* 再在 git bash 中执行
* npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
* 2022年6月25日 解决了上传图片功能
* TODO 无法创建自定义菜单 (Pdf上传功能, 视频上传功能);
* TODO https://github.com/wangeditor-team/wangEditor/issues/4465 使用这里面说的建立自定义菜单
* 2022年7月5日 改为异步加载依赖 保证功能正常；
* */
/**
* * 所有的菜单
// toolbarKeys: [
// 'bold', 'underline',
// 'italic', 'through',
// 'code', 'sub',
// 'sup', 'clearStyle',
// 'color', 'bgColor',
// 'fontSize', 'fontFamily',
// 'indent', 'delIndent',
// 'justifyLeft', 'justifyRight',
// 'justifyCenter', 'justifyJustify',
// 'lineHeight', 'insertImage',
// 'deleteImage', 'editImage',
// 'viewImageLink', 'imageWidth30',
// 'imageWidth50', 'imageWidth100',
// 'divider', 'emotion',
// 'insertLink', 'editLink',
// 'unLink', 'viewLink',
// 'codeBlock', 'blockquote',
// 'headerSelect', 'header1',
// 'header2', 'header3',
// 'header4', 'header5',
// 'todo', 'redo', 'undo',
// 'fullScreen', 'enter',
// 'bulletedList', 'numberedList',
// 'insertTable', 'deleteTable',
// 'insertTableRow', 'deleteTableRow',
// 'insertTableCol', 'deleteTableCol',
// 'tableHeader', 'tableFullWidth',
// 'insertVideo', 'uploadVideo',
// 'editVideoSize', 'uploadImage',
// 'codeSelectLang',
// ],
* TODO pdfMenu 插入 的时候 无法插入 <embed 标签 需要求助 2022年7月14日
* */
import styles from './css/style.less';
......@@ -56,113 +11,102 @@ import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import { uploadFile as uploadOnestopFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
import loadCss from '@/webPublic/zyd_public/WangEditor/WangEditor5/css/cssLoader';
import myMenuConf from '@/webPublic/zyd_public/WangEditor/WangEditor5/DiyMenu/pdfMenu';
let editor = null;
export default function PrepareShow(props){
const [show, setShow]= useState(false);
const WangEditor5 = useRef();
useEffect(()=> {
import('./index.esm').then((res) => { // 异步加载这个js。 因为js 过大影响性能
loadCss().then((cssRes) => { // 异步加载这个css 文件
WangEditor5.current = res;
console.log(WangEditor5);
setShow(true);
});
});
// setShow(true);
}, []);
if(show){
return <WangEditorReactComponent {...props} WangEditor5={WangEditor5.current}/>;
}else{
return null;
}
export default function PrepareShow(props) {
const [show, setShow] = useState(false);
const WangEditor5 = useRef();
useEffect(() => {
import('./index.esm').then((res) => {
// 异步加载这个js。 因为js 过大影响性能
loadCss().then((cssRes) => {
// 异步加载这个 wangEditor5 的css 文件
console.log('123');
WangEditor5.current = res;
WangEditor5.current.Boot.registerMenu(myMenuConf);
setShow(true);
});
});
// setShow(true);
}, []);
// console.log(show, WangEditor5);
if (show) {
return <WangEditorReactComponent {...props} WangEditor5={WangEditor5.current} />;
} else {
return null;
}
}
function WangEditorReactComponent(props) {
const { WangEditor5 } = props;
const {
domKey = 'cmsContent',
height = '450px',
value,
onChange,
} = props;
useEffect(() => {
let htmlDefault = '';
if (value && value.indexOf('wangEditorHtml') > -1) {
htmlDefault = value;
} else {
htmlDefault = '<div class="wangEditorHtml">' + value + '</div>';
}
const editorConfig = {
placeholder: '请输入内容',
html: htmlDefault,
MENU_CONF: {
uploadImage: {
customUpload: (file, insertFn) => {
compressImage(file, (fileNew) => {
uploadOnestopFile(fileNew).then((y) => { // 使用一站式的文件上传接口
if (y && y.length) {
insertFn(queryApiActionPath() + y, file.name);
}
});
});
},
},
},
onChange: (editor) => {
// console.log('content', editor.children);
onChange(editor.getHtml());
console.log('html', editor.getHtml());
},
}
;
const toolbarConfig = {
excludeKeys: [
'codeBlock',
'emotion',
'group-video',
'undo',
'redo',
'bulletedList',
'numberedList',
],
// insertKeys: {
// index: 5, // 插入的位置，基于当前的 toolbarKeys
// keys: ['video-upload'],
// },
};
const editor = WangEditor5.createEditor({
selector: '#' + domKey,
config: editorConfig,
mode: 'default',
},
);
const toolBar = WangEditor5.createToolbar({
editor,
selector: '#wangEditorToolBar',
config: toolbarConfig,
mode: 'default',
});
// console.log(editor.getAllMenuKeys());
// console.log(toolBar.getConfig().toolbarKeys);
}, []);
return <div className={styles.wangEditor5}
style={{ zIndex: '149', }}
>
<div id={'wangEditorToolBar'}
style={{ zIndex: '150', }}
>
const { WangEditor5 } = props;
const { domKey = 'cmsContent', height = '450px', value, onChange } = props;
useEffect(() => {
let htmlDefault = '';
if (value && value.indexOf('wangEditorHtml') > -1) {
htmlDefault = value;
} else {
htmlDefault = '<div class="wangEditorHtml">' + value + '</div>';
}
const editorConfig = {
placeholder: '请输入内容',
html: htmlDefault,
MENU_CONF: {
uploadImage: {
customUpload: (file, insertFn) => {
compressImage(file, (fileNew) => {
uploadOnestopFile(fileNew).then((y) => {
// 使用一站式的文件上传接口
if (y && y.length) {
insertFn(queryApiActionPath() + y, file.name);
}
});
});
},
},
},
</div>
<div id={domKey}
style={{ zIndex: '149', }}
>
onChange: (editor) => {
// console.log('content', editor.children);
onChange(editor.getHtml());
// console.log('html', editor.getHtml());
},
};
const toolbarConfig = {
excludeKeys: [
'codeBlock',
'emotion',
'group-video',
'undo',
'redo',
'bulletedList',
'numberedList',
],
insertKeys: {
index: 0, // 插入的位置，基于当前的 toolbarKeys
keys: ['myMenu'],
},
};
editor = WangEditor5.createEditor({
selector: '#' + domKey,
config: editorConfig,
mode: 'default',
});
const toolBar = WangEditor5.createToolbar({
editor,
selector: '#wangEditorToolBar',
config: toolbarConfig,
mode: 'default',
});
return () => {
editor.destroy(); // 销毁编辑器
};
}, []);
</div>
</div>;
return (
<div className={styles.wangEditor5} style={{ zIndex: '149' }}>
<div id={'wangEditorToolBar'} style={{ zIndex: '150' }} />
<div id={domKey} style={{ zIndex: '149' }} />
</div>
);
}
zyd_public/WangEditor/WangEditor5/index.esm.js
浏览文件 @ 6d5eb7a1
This source diff could not be displayed because it is too large. You can view the blob instead.
zyd_public/WangEditor/WangEditor5/readme.md 0 → 100644
浏览文件 @ 6d5eb7a1
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论