当前位置：首页 > article >正文

vue3官方示例-简单的 markdown 编辑器。

article 2024/12/26 13:06:47

官方示例不能直接粘贴使用，故自己补了些代码。方便初学者学习，节省时间，提高学习效率。

1、html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>20-vue3- markdown 编辑器.html</title>
<!--    加载项，可以本地加载，也可网联加载（用ai提示生成网联代码）-->
    <script src="./dist/vue.global.js"></script>
    <script src="./lodash/lodash.js"></script>
    <script src="./marked/marked.min.js"></script>
    <script>
          // 动态标题
          var dynamicTitle = "20-vue3- markdown 编辑器.html".slice(0, -5);
          // 使用 JavaScript 修改 <title> 标签的内容
          document.title = dynamicTitle;
      </script>
</head>
<body>
    <div id="app">
        <h1>{{input}}</h1>
        <h1>{{output}}</h1>
<!--@keyup.enter="update" 在textarea的内容输入后，按enter按键触发 update方法-->
          <div class="editor">
            <textarea class="input" :value="input" @keyup.enter="update"></textarea>
            <div class="output" v-html="output"></div>
          </div>
    </div>
    <script type="module">
      const { createApp, ref,computed } = Vue
      // marked 把textarea的内容进行解析，并返回html格式。
      // 如：“# hello” 会被解析为“<h1>hello</h1>”
      const { parse} = marked
      // lodash的debounce函数，防抖函数，单位为毫秒，默认为1000毫秒即1秒
      // 如：如这例子中，在1秒内，输入了多次，最终只会执行一次。
      const {debounce} = _
      createApp({
        components:{

        },
        setup() {
            const input = ref('# hello')
            const output = computed(()=>{return parse(input.value)})
            const update = debounce((e) => {
              input.value = e.target.value
            }, 1000)

            return {
              input,
              output,
              update
            }
        }
      }).mount('#app')
    </script>

</body>
</html>

2、结果：