Markdown编辑器插件tui.editor的使用CDN与Modules

最新推荐文章于 2024-04-13 09:35:52 发布

蓝小白1024

最新推荐文章于 2024-04-13 09:35:52 发布

阅读量1.6k

点赞数 3

分类专栏：笔记所见即所得-Vue 文章标签： markdown vue js

本文链接：https://blog.csdn.net/lxb_wyf/article/details/116026032

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

所见即所得-Vue

26 篇文章 0 订阅

订阅专栏

Markdown编辑器插件有很多, 我选择了tui.editor, 为什么: 因为这个还在更新, 这个star数量非常高, 最主要的是它还在更新
在这里插入图片描述

GitHub: https://github.com/nhn/tui.editor
官方文档: https://ui.toast.com/tui-editor

CDN方式使用

本篇主要记录我使用cdn方式时, 遇到的一些小问题, 而这个小问题让我想了半天没弄明白(当然现在已经解决了,机智如我), 可能是我太菜(总不能是官方文档写的不清楚吧), 这点小问题都可以琢磨半天, 在看到官方文档时, 我使用模块化导入(就是在vue项目中使用)没有遇到问题, 但我就是突然想试一下cdn方式, 好了这个时候问题就出现了

-官方原码使用
在这里插入图片描述
我复制粘贴之后就是不出现Markdown编辑器, 找了半天也没有人使用cdn方式, 我就突然想到为什么在模块化使用的时候, 要把new Editor 放到vue的mounted的生命周期中, 然后我就想了一下这个生命周期是DOM 挂载结束后触发的事件,
在这里插入图片描述
于是在不使用vue我只能使用js的方法window.onload, 所以就有啦下面的代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>md</title>
  	<!-- Editor's Dependecy Style -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"
    />
    <!-- Editor's Style -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/2.5.2/toastui-editor.min.css" />
</head>
<body>

<div id="editor"></div>

<script>
console.log("111111111111")
// window.onload 事件是在dom挂载结束后触发
window.onload = function(){
  console.log("DOM加载完毕--划重点")
  const Editor = toastui.Editor;
  const editor = new Editor({
    el: document.querySelector('#editor'),
    height: '600px',
    initialEditType: 'markdown',
    previewStyle: 'vertical'
  });

  editor.getHtml();
}
</script>

<script src="https://uicdn.toast.com/editor/2.5.2/toastui-editor-all.min.js"></script>
</body>
</html>

Modules方式使用

下载

npm install --save tui-editor@2.5.2

vue项目中代码

<template>
    <div id="editorChange"></div>
</template>

<script>
import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
import Editor from '@toast-ui/editor'

export default {
  mounted () {
    const editor = new Editor({
      el: document.querySelector('#editorChange'), // 定义的编辑器id
      previewStyle: 'vertical', // Markdown模式的预览样式
      initialEditType: 'markdown', // 显示的初始类型
      height: '500px', // 编辑器高度
      initialValue: '```html \n <div id="editor"><span>baz</span></div> \n ```', // 编辑器内容
      // 编辑器菜单栏
      toolbarItems: [
        'heading',
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'quote',
        'divider',
        'ul',
        'ol',
        'task',
        'indent',
        'outdent',
        'divider',
        'table',
        'image',
        'link',
        'divider',
        'code',
        'codeblock',
        'divider'
      ]
    })
    // 创建编辑器
    editor.getHtml()
  }

}
</script>

蓝小白1024

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Markdown编辑器插件tui.editor的使用CDN与Modules

本篇主要记录我使用cdn方式时, 遇到的一些小问题, 而这个小问题让我想了半天没弄明白(当然现在已经解决了,机智如我), 可能是我太菜(总不能是官方文档写的不清楚吧), 这点小问题都可以琢磨半天, 在看到官方文档时, 我使用模块化导入(就是在vue项目中使用)没有遇到问题, 但我就是突然想试一下cdn方式, 好了这个时候问题就出现了
复制链接

扫一扫