vue、marked 简洁markdown网页编辑器

雪风飞舞

已于 2022-07-28 14:31:14 修改

阅读量375

点赞数

分类专栏：实践文章标签： vue.js 编辑器 javascript

于 2022-07-28 14:28:29 首次发布

本文链接：https://blog.csdn.net/weixin_45592677/article/details/126034331

版权

实践专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Marked in the browser</title>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://unpkg.com/vue@next"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
  <style>
      #write{
        width: 49%;
        height: 600px;
      }
      #read{
        width: 49%;
        height: 100px;
        float: right;
      }
  </style>
</head>

<body>
  <div id="app">
    <textarea id="write" v-model="message" @input="change"></textarea>
    <div id="read" v-html="show"></div>
  </div>
  <script>
    Vue.createApp({
      data() {
        var initMsg = '# Marked in Node.js\n\nRendered by **marked**.'
        return {
          message: initMsg,
          show: marked.parse(initMsg)
        }
      },
      methods: {
        change(event) {
          this.show = marked.parse(this.message)
        }
      }
    })
      .mount('#app')
  </script>
</body>

</html>