12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import WangEditor from 'wangeditor'
- import { onMounted, onBeforeUnmount, ref, watchEffect, watch, markRaw } from 'vue'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { useEditorConfig } from './use-editor-config'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { clearEmptyKey } from './util'
- export default {
- name: 'BasicEditor',
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const { securityConfig, proxyValue } = useFormInput(props, context)
- const containerRef = ref()
- const editorConfig = useEditorConfig(securityConfig)
- const instance = ref()
- const getHtml = () => {
- const html = instance.value.txt.html()
- return html === '<p><br></p>' ? '' : html
- }
- const noChangeValue = (dom) => {
- const noInstanceClass = props.config.fixed ? 'el-table__body-wrapper' : 'el-table__fixed-body-wrapper'
- if (dom.parentElement.classList.contains('el-table') || dom.parentElement === document.body) return false
- if (!dom.parentElement.classList.contains(noInstanceClass)) {
- return noChangeValue(dom.parentElement)
- } else {
- return true
- }
- }
- onMounted(() => {
- // 组件销毁时销毁editor的实例
- onBeforeUnmount(() => { destroyInstance() })
- // 实例化时判断是否在el-table__fixed-body-wrapper下
- createEditor()
- if (!props.tableData || (props.tableData && !noChangeValue(containerRef.value))) {
- watchEffect(() => {
- const old = getHtml()
- if (proxyValue.value !== old) { instance.value.txt.html(proxyValue.value) }
- })
- }
- // 得到config配置初始化及表单设计渲染
- watch(() => props.config, () => {
- if (props.showTemplate) { // ERROR:由于table对config进行了一次浅拷贝导致数据不停变化的临时处理方案
- // 重新渲染修改过config配置的editor,待优化
- createEditor()
- // 初始载入内容
- if (instance.value.txt.html() === '') instance.value.txt.html(proxyValue.value)
- }
- }, { deep: true })
- })
- const createEditor = () => {
- if (instance.value) instance.value.destroy()
- instance.value = markRaw(new WangEditor(containerRef.value))
- Object.assign(instance.value.config, clearEmptyKey({
- height: editorConfig.height,
- menus: editorConfig.menus,
- colors: editorConfig.colors,
- fontNames: editorConfig.fontNames,
- fontSizes: editorConfig.fontSizes,
- emotions: editorConfig.emotions,
- showFullScreen: editorConfig.showFullScreen,
- showMenuTooltips: editorConfig.showMenuTooltips,
- menuTooltipPosition: editorConfig.menuTooltipPosition,
- pasteFilterStyle: editorConfig.pasteFilterStyle,
- pasteIgnoreImg: editorConfig.pasteIgnoreImg,
- customUploadImg: editorConfig.customUploadImg,
- placeholder: editorConfig.placeholder,
- focus: false,
- zIndex: 0
- }), {
- onchange (val) {
- proxyValue.value = val
- }
- })
- instance.value.create()
- }
- const destroyInstance = () => {
- instance.value.destroy()
- instance.value = null
- }
- return () => (
- <div ref={containerRef} style="width:100%" />
- )
- }
- }
|