Vue挂载后SimpleMDE Markdown编辑器失效问题求助

我在Vue 3项目的HTML页面中集成SimpleMDE Markdown编辑器时遇到了失效问题：当编辑器被包裹在Vue挂载的#vueapp容器内时无法正常工作，但移除该容器后编辑器恢复正常。由于项目依赖Vue的响应式特性，无法移除Vue，特此寻求解决办法或替代编辑器推荐。

包含Vue容器时的失效代码结构 #

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- js -->
    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>
<body>
<div id="vueapp">
    <div class="col-lg-12 col-md-12">
    <div class="form-group">
       <label>Description:</label>
       <textarea id="job-description"></textarea>
    </div>
    </div>
 </div>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script type="module">
    var jobDescriptionEditor = new SimpleMDE({ element: document.getElementById("job-description") });
  const app = Vue.createApp({})
  const mountedApp = app.mount('#vueapp')
</script>
</body>
</html>

移除Vue容器后可正常工作的代码结构 #

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- js -->
    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>
<body>
    <div class="col-lg-12 col-md-12">
    <div class="form-group">
       <label>Description:</label>
       <textarea id="job-description"></textarea>
    </div>
    </div>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script type="module">
    var jobDescriptionEditor = new SimpleMDE({ element: document.getElementById("job-description") });
  const app = Vue.createApp({})
  const mountedApp = app.mount('#vueapp')
</script>
</body>
</html>

问题原因及解决方法 #

原因 #

Vue挂载实例时会重新渲染#vueapp容器内的所有DOM元素，而你先初始化了SimpleMDE编辑器，Vue的DOM更新会覆盖编辑器生成的DOM结构，导致编辑器失效。

解决方法 #

1. 调整初始化顺序：先完成Vue实例的挂载，再初始化SimpleMDE编辑器，确保DOM已稳定：

const app = Vue.createApp({})
const mountedApp = app.mount('#vueapp')
// Vue挂载完成后再初始化编辑器
var jobDescriptionEditor = new SimpleMDE({ element: document.getElementById("job-description") });

2. 利用Vue生命周期钩子（组件化场景）：如果是在Vue组件中使用，推荐在onMounted钩子中初始化编辑器，保证DOM已被Vue渲染完成：

const app = Vue.createApp({
  mounted() {
    new SimpleMDE({ element: document.getElementById("job-description") });
  }
})
app.mount('#vueapp')

替代Markdown编辑器推荐 #

• EasyMDE：SimpleMDE的后续维护版本，API完全兼容，修复了旧版的诸多问题，适配现代前端项目。
• VueMarkdownEditor：专为Vue开发的编辑器，支持Vue 3，自带响应式数据绑定，无需手动操作DOM，集成更自然。
• Editor.md：轻量级编辑器，支持实时预览，可通过DOM方式直接在Vue项目中集成，配置简单。

内容的提问来源于stack exchange，提问作者SomeGuyFortune