前端：開源免費(fèi)的瀏覽器端Markdown編輯器——Vditor上手體驗(yàn)

作者：郝光明 2023-06-05 07:16:47

Vditor是一款專業(yè)的瀏覽器端Markdown編輯器，其支持所見即所得、即時渲染以及分屏預(yù)覽模式，類似于Typora。Vditor采用TypeScript實(shí)現(xiàn)，可支持原生JavaScript、Vue、React和Angular等多種框架。

一、編輯器簡介

Vditor是一款專業(yè)的瀏覽器端Markdown編輯器，其支持所見即所得、即時渲染以及分屏預(yù)覽模式，類似于Typora。Vditor采用TypeScript實(shí)現(xiàn)，可支持原生JavaScript、Vue、React和Angular等多種框架。此外，Vditor提供桌面版，支持Windows、Linux、MacOS，同時也支持瀏覽器擴(kuò)展、安卓和iOS版本。無論是在哪個平臺上使用，Vditor都能夠提供高效、優(yōu)質(zhì)的Markdown編輯體驗(yàn)。

官網(wǎng)：https://b3log.org/vditor/

GitHub：https://github.com/Vanessa219/vditor

桌面版下載：https://b3log.org/siyuan/download.html

二、功能特性

三、編輯器模式初始化設(shè)定

2.1 所見即所得模式

即所得模式對不熟悉 Markdown 的用戶較為友好，熟悉 Markdown 的話也可以無縫使用。

new Vditor('vditor', {
  "height": 360,
  "cache": {
    "enable": false
  },
  "value": "## 所見即所得（WYSIWYG）\n所見即所得模式對不熟悉 Markdown 的用戶較為友好，熟悉 Markdown 的話也可以無縫使用。 ",
  "mode": "wysiwyg"
})

2.2 即時渲染模式

對熟悉 Typora 的用戶應(yīng)該不會感到陌生，理論上這是最優(yōu)雅的 Markdown 編輯方式。

new Vditor('vditor', {
  "height": 360,
  "cache": {
    "enable": false
  },
  "value": "## 即時渲染（IR）\n即時渲染模式對熟悉 Typora 的用戶應(yīng)該不會感到陌生，理論上這是最優(yōu)雅的 Markdown 編輯方式。",
  "mode": "ir"
})

2.3 分屏預(yù)覽（SV）

該模式目前沒有發(fā)現(xiàn)具體的使用場景。

new Vditor('vditor', {
  "height": 360,
  "cache": {
    "enable": false
  },
  "value": "## 分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯。",
  "mode": "sv",
  "preview": {
    "mode": "editor"
  }
})

2.4 分屏預(yù)覽模式

分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯

new Vditor('vditor', {
  "height": 360,
  "cache": {
    "enable": false
  },
  "value": "## 分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯。",
  "mode": "sv",
  "preview": {
    "mode": "both"
  }
})

四、案例代碼

直接采用最原始的html提供完整的示例代碼，直接可以運(yùn)行。

<html>
    
    <head>
  <title>vditor編輯器</title>
     <link rel="stylesheet"  />
    <script src="https://unpkg.com/vditor/dist/index.min.js"></script>
    </head>    
    <body>
        <input type="button" onclick="getContent()" value="確定" />
        <div id="content">
        </div>
        <script>
            var vditor = null;
            window.onload = function() {
                vditor = new Vditor(document.getElementById('content'), {
                    cache: {
                        enable: false
                    },
                    "mode": "sv",
                    "preview": {
                        "mode": "both"
                    }
                });


            }
      // 測試數(shù)據(jù)填充
            function getContent() {


                vditor.setValue("## 測試 \n ### 二級標(biāo)題 ");
            }
</script>
    </body>


</html>

參考資料：https://b3log.org/vditor/

責(zé)任編輯：武曉燕來源：小明互聯(lián)網(wǎng)技術(shù)分享社區(qū)

開源免費(fèi)瀏覽器