<template>
|
<div class="editor-div" style="border: 1px solid #ccc">
|
<Toolbar
|
style="border-bottom: 1px solid #ccc"
|
:editor="editorRef"
|
:defaultConfig="editorToolbarConfig"
|
:mode="editorMode"
|
/>
|
<Editor :style="{height: `${props.height}`}"
|
v-model="editorValueHtml"
|
:defaultConfig="editorConfig"
|
:mode="editorMode"
|
@onCreated="handleEditorCreated"
|
/>
|
<div>
|
<el-link href="https://www.latexlive.com/" target="_blank">LaTeX公式在线编辑器</el-link>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, shallowRef, ref} from "vue";
|
import '@wangeditor/editor/dist/css/style.css';
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
import {getFileUploadUrl} from "@/api/common";
|
|
export default {
|
name: "wangEditorExt",
|
components: {Editor, Toolbar},
|
props: {
|
content: "",
|
height: "",
|
},
|
setup(props) {
|
let {proxy} = getCurrentInstance();
|
const state = reactive({});
|
|
const editorRef = shallowRef();
|
const editorToolbarConfig = {
|
insertKeys: {
|
index: 0,
|
keys: [
|
'insertFormula', // “插入公式”菜单
|
// 'editFormula' // “编辑公式”菜单
|
],
|
},
|
};
|
const editorConfig = {
|
placeholder: `${proxy.$t('message.PleaseInput')}`,
|
// 选中公式时的悬浮菜单
|
hoverbarKeys: {
|
formula: {
|
menuKeys: ['editFormula'], // “编辑公式”菜单
|
},
|
},
|
};
|
const editorValueHtml = shallowRef(props.content);
|
const editorMode = shallowRef('default');// 或 'simple',
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
const editor = editorRef.value
|
if (editor != null)
|
editor.destroy()
|
});
|
const handleEditorCreated = (editor) => {
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
let config = editor.getMenuConfig('uploadImage') // 获取 uploadImage 的当前配置
|
config.server = getFileUploadUrl();
|
config.fieldName = 'file';
|
// 上传之前触发
|
config.onBeforeUpload = (file) => {
|
return file
|
};
|
|
// 上传进度的回调函数
|
config.onProgress = (progress) => {
|
|
};
|
|
// 单个文件上传成功之后
|
config.onSuccess = (file, res) => {
|
|
};
|
|
// 单个文件上传失败
|
config.onFailed = (file, res) => {
|
|
};
|
|
// 上传错误，或者触发 timeout 超时
|
config.onError = (file, err, res) => {
|
|
};
|
}
|
const exportvalue = () => {
|
return editorRef.value.getHtml();
|
}
|
const Init = () => {
|
|
};
|
|
return {
|
...toRefs(state),
|
editorRef,
|
editorToolbarConfig,
|
editorConfig,
|
editorMode,
|
editorValueHtml, handleEditorCreated,
|
exportvalue, props
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.editor-div ::v-deep(.w-e-text-container .w-e-scroll) {
|
min-height: 310px !important; //!important是重点，因为原div是行内样式设置的高度300px*/
|
}
|
</style>
|
