CODEWITHSUNDEEP
javascripthtmlvuejs3simplemde
SomeGuyFortune
SomeGuyFortune

Reputation: 1056

SimpleMDE markdown editor disabled when mounted with 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

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

    <head>
        <!-- js -->
        <script src="https://unpkg.com/[email protected]/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>

When the vue div vueapp is removed, the editor is back to being functional.

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

        <head>
            <!-- js -->
            <script src="https://unpkg.com/[email protected]/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>

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.

Upvotes: 0

Views: 319

Answers (1)

Moritz Ringler
Moritz Ringler

Reputation: 15896

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:

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/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

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.

Upvotes: 1

Related Questions