Skip to content

1.4.x 粘贴markdown格式的文档到编辑器后,无法自动转换为html格式 #232

@henhen6

Description

@henhen6
  1. 演示环境: https://aieditor.com.cn/zh/demo/index.html 用的 aieditor 组件是什么版本的? 粘贴markdown格式的内容后,能自动转换为html格式。
  2. aieditor 1.4.0 - 1.4.2 粘贴 markdown格式的文档到 编辑器后,无法将 markdown格式 自动转换为 html格式
  3. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions