-
Notifications
You must be signed in to change notification settings - Fork 202
Open
Description
- 演示环境: https://aieditor.com.cn/zh/demo/index.html 用的 aieditor 组件是什么版本的? 粘贴markdown格式的内容后,能自动转换为html格式。
- aieditor 1.4.0 - 1.4.2 粘贴 markdown格式的文档到 编辑器后,无法将 markdown格式 自动转换为 html格式
- aieditor 1.0.13 是支持的
请问:这是 aieditor 1.4.0 - 1.4.2 的bug,还是新版本需要开启什么配置才支持?
项目中的代码如下:
<script setup lang="ts">
import type { AiEditorOptions } from 'aieditor';
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { usePreferences } from '@vben/preferences';
import { AiEditor } from 'aieditor';
import 'aieditor/dist/style.css';
defineOptions({ name: 'AiEditor' });
const props = defineProps<{
modelValue: string;
options?: AiEditorOptions;
}>();
const emit = defineEmits<(e: 'update:modelValue', value: string) => void>();
const { isDark } = usePreferences();
const sidebarTheme = computed(() => {
const dark = isDark.value;
return dark ? 'dark' : 'light';
});
const divRef = ref<any>();
const aieditor = ref<AiEditor | null>(null);
const updateOutLine = (editor: AiEditor) => {
const outlineContainer = document.querySelector('#outline');
while (outlineContainer?.firstChild) {
outlineContainer.firstChild.remove();
}
const outlines = editor.getOutline();
for (const outline of outlines) {
const child = document.createElement('div');
child.classList.add(`aie-title${outline.level}`);
child.style.marginLeft = `${14 * (outline.level - 1)}px`;
child.style.padding = `4px 0`;
child.innerHTML = `<a href="#${outline.id}">${outline.text}</a>`;
child.addEventListener('click', (e) => {
e.preventDefault();
const el = editor.innerEditor.view.dom.querySelector(
`#${outline.id}`,
) as HTMLElement;
el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest',
});
setTimeout(() => {
editor.focusPos(outline.pos + outline.size - 1);
}, 1000);
});
outlineContainer?.append(child);
}
};
const editorConfig = reactive<AiEditorOptions>({
element: '',
theme: sidebarTheme.value,
placeholder: '请输入内容',
content: '',
draggable: false,
onChange: (editor: AiEditor) => {
emit('update:modelValue', editor.getHtml());
updateOutLine(editor);
},
onCreated: (editor: AiEditor) => {
updateOutLine(editor);
},
});
watch(
() => props.modelValue,
(value) => {
if (value !== aieditor.value?.getHtml()) {
aieditor.value?.destroy();
editorConfig.content = value;
aieditor.value = new AiEditor(editorConfig);
}
},
);
const init = () => {
editorConfig.element = divRef.value;
aieditor.value = new AiEditor(editorConfig);
};
// 挂载阶段
onMounted(() => {
init();
});
// 销毁阶段
onUnmounted(() => {
aieditor.value?.destroy();
});
</script>
<template>
<div ref="divRef" class="editor-container">
<div class="aie-container">
<div class="aie-header-panel">
<div class="aie-container-header"></div>
</div>
<div class="aie-main">
<div class="aie-directory-content">
<div class="aie-directory">
<h5>目录</h5>
<div id="outline"></div>
</div>
</div>
<div class="aie-container-panel">
<div class="aie-container-main"></div>
</div>
</div>
<div class="aie-container-footer"></div>
</div>
</div>
</template>
Metadata
Metadata
Assignees
Labels
No labels