英文:
SimpleMDE markdown editor disabled when mounted with vue
问题
以下是您提供的HTML代码的中文翻译：
我正在尝试在我的HTML页面中使用Vue添加一个Markdown编辑器。然而，Markdown编辑器似乎出现了问题。
以下是页面的简单结构：
<!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>描述：</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 div "vueapp" 时，编辑器恢复正常功能。
以下是不包含Vue的HTML代码：
<!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>描述：</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>
是否有人知道如何解决此问题或者我可以嵌入的其他Markdown编辑器？我不能移除Vue，因为我需要响应性。
英文:
I am trying to add a markdown editor to my html page working with vue. However the markdown editor seems to be broken.
Here is a simple structure of the page
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
When the vue div vueapp is removed, the editor is back to being functional.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
Does Anybody know how to fix this or any other markdown editor that I can embed. I can't remove vue as I need the reactivity.
答案1
得分: 1
Vue会用它自己的节点替换#vueapp内部的节点。您必须使用Vue的节点而不是初始节点。因此，在mounted()钩子中初始化编辑器：
const app = Vue.createApp({
mounted(){
const element = this.$refs.jobDescriptionRef
new SimpleMDE({element})
}
})
app.mount('#vueapp')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<div id="vueapp">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<label>Description:</label>
<textarea ref="jobDescriptionRef"></textarea>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
当前方式下，您初始化编辑器，它会向其根元素添加元素。然后，所有这些都传递给Vue，Vue将其编译成模板并用自己的节点替换现有节点，包括编辑器元素。因此，在检查器中看起来相同，但所有事件都消失了。
英文:
Vue replaces the nodes inside #vueapp with its own nodes. You have to use the node from Vue instead of the initial one. So initialize the editor in the mounted() hook:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
const app = Vue.createApp({
mounted(){
const element = this.$refs.jobDescriptionRef
new SimpleMDE({element})
}
})
app.mount('#vueapp')
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<div id="vueapp">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<label>Description:</label>
<textarea ref="jobDescriptionRef"></textarea>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<!-- end snippet -->
The way it is, you initialize the editor, which adds elements to its root element. Then all of it is passed into Vue, which compiles it into a template and the replaces the existing nodes with its own, including the editor elements. So it looks the same in the inspector, but all events are gone.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论