哇塞！居然用這個(gè)框架開(kāi)發(fā)了一款這么好用的 Markdown 編輯器

作者：maomincoding 2023-06-20 00:04:18

引入就這么簡(jiǎn)單？是的，就這么簡(jiǎn)單的。另外，我們引入的版本是UMD，UMD 叫做通用模塊定義規(guī)范（Universal Module Definition）。

今天，我們來(lái)使用Strve.js來(lái)搭建一款 Markdown 編輯器，沒(méi)錯(cuò)！你沒(méi)聽(tīng)錯(cuò)。我們需要?jiǎng)?chuàng)建了一個(gè)實(shí)時(shí) Markdown 編輯器，用戶可以在 textarea 中輸入 Markdown 文本，然后實(shí)時(shí)顯示轉(zhuǎn)換后的 HTML。你可能會(huì)說(shuō)使用 Strve.js 開(kāi)發(fā)會(huì)不會(huì)寫(xiě)的特別復(fù)雜難懂啊，還不如用 Vue.js 呢！

好，滿足你的好奇心。首先，我們不搞那些工程化的東西，我們就是新建一個(gè) html 文件。

就像這樣。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body></body>
</html>

好，我們到此就開(kāi)發(fā)完成了~ 謝謝閱讀~

……

開(kāi)玩笑的！我們這么嚴(yán)謹(jǐn)?shù)拈_(kāi)發(fā)人員怎么會(huì)這么敷衍。

我們說(shuō)使用Strve.js開(kāi)發(fā)應(yīng)用，那么我們就先引入Strve.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
  </body>
</html>

哇塞！引入就這么簡(jiǎn)單？是的，就這么簡(jiǎn)單的。另外，我們引入的版本是UMD，UMD 叫做通用模塊定義規(guī)范（Universal Module Definition）。也是隨著大前端的趨勢(shì)所誕生，它可以通過(guò)運(yùn)行時(shí)或者編譯時(shí)讓同一個(gè)代碼模塊在使用 CommonJs、CMD 甚至是 AMD 的項(xiàng)目中運(yùn)行。簡(jiǎn)單來(lái)說(shuō)，就像我們之前使用 Jquery 那樣，引入直接使用，然后直接打開(kāi)html文件看效果，不需要自己搭建本地文件服務(wù)器啥的。省心省力！！

好家伙，下一步我們就開(kāi)始寫(xiě)靜態(tài)頁(yè)面了啊！不要忘記自己是一個(gè)切圖仔。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script>
      const { h, createApp } = Strve;

      function App() {
        return h/*html*/`
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

這就寫(xiě)完了？怎么沒(méi)有在 body 標(biāo)簽內(nèi)寫(xiě) html 標(biāo)簽啊，我只看到了模版字符串中寫(xiě)的，這是什么操作？JSX？別急啊，這是Strve.js最大特性呀！可以將模版字符串轉(zhuǎn)化成我們看到的 html 視圖。你可能又會(huì)說(shuō)這不跟 JSX 思想差不多呢！是的，我開(kāi)發(fā)這個(gè)框架的動(dòng)機(jī)就是受 JSX 語(yǔ)法的影響。

到這里，我們只是寫(xiě)了頁(yè)面但是沒(méi)有寫(xiě)樣式。那么，下面我們就開(kāi)整樣式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
    <style>
    html,
    body,
    #app {
    margin: 0;
    height: 100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
    }

    #app {
    display: flex;
    }

    .input,
    .output {
    width: 50%;
    box-sizing: border-box;
    }

    .input {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: "Monaco", courier, monospace;
    padding: 20px;
    }

    .output {
    padding: 0 20px;
    }
</style>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script>
      const { h, createApp } = Strve;

      function App() {
        return h/*html*/`
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

你可能會(huì)說(shuō)，樣式有了，頁(yè)面結(jié)構(gòu)也有了，我想看看效果。先忍住！我們得先賦予他靈魂，好事不怕晚。

下面，我們就開(kāi)始寫(xiě)業(yè)務(wù)邏輯了。我們要實(shí)現(xiàn)的效果就是用戶可以在 textarea 中輸入 Markdown 文本，然后實(shí)時(shí)顯示轉(zhuǎn)換后的 HTML。你可能會(huì)說(shuō)，啥意思？就是左側(cè)我們寫(xiě)Markdown 文本，然后右側(cè)就是顯示 Markdown 轉(zhuǎn)換后的文本了。

好了，廢話不多說(shuō)了！（還算有點(diǎn)自知之明）

完整源碼如下：（相信我，你還會(huì)回來(lái)的！）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
    <link
      rel="stylesheet"
      
    />
    <style>
    html,
    body,
    #app {
    margin: 0;
    height: 100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
    }

    #app {
    display: flex;
    }

    .input,
    .output {
    width: 50%;
    box-sizing: border-box;
    }

    .input {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: "Monaco", courier, monospace;
    padding: 20px;
    }

    .output {
    padding: 0 20px;
    }
</style>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script src="https://unpkg.com/marked@2.1.3/lib/marked.js"></script>
    <script src="https://unpkg.com/marked-highlight@2.0.1/lib/index.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
    <script>
      const { h, setData, createApp, domInfo, nextTick } = Strve;

      // Highlight code blocks
      marked.use(
        markedHighlight.markedHighlight({
          langPrefix: "hljs language-",
          highlight(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : "plaintext";
            return hljs.highlight(code, { language }).value;
          },
        })
      );

      let input = "";

      function compiledMarkdown() {
        return marked(input);
      }

      const debouncedUpdate = _.debounce(function (e) {
        setData(() => {
          input = e.target.value;
        });
        nextTick(() => {
          domInfo.output.innerHTML = compiledMarkdown();
        });
      }, 100);

      function update(e) {
        debouncedUpdate(e);
      }

      function App() {
        return h/*html*/ `
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

我去！咋一下子多出了這么多代碼！你這是逗我嗎？

別著急嘛！我會(huì)對(duì)你負(fù)責(zé)的，我既然一下子寫(xiě)了這么多代碼，肯定會(huì)解釋清楚的。

下面，我們要正經(jīng)起來(lái)了！我們既然需要開(kāi)發(fā)一款 Markdown 編輯器，我們需要的依賴庫(kù)有下面幾種：

Strve-js: 一個(gè)輕量級(jí)的 JavaScript 框架，用于構(gòu)建用戶界面；
Marked: 一個(gè)將 Markdown 轉(zhuǎn)換為 HTML的庫(kù)；
Highlight: 讓網(wǎng)頁(yè)上的代碼高亮美化的免費(fèi)開(kāi)源工具庫(kù)；
Lodash: 一個(gè)實(shí)用的 JavaScript 工具庫(kù)；

那么你就會(huì)看我們引入了這些庫(kù)。

<script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
<script src="https://unpkg.com/marked@2.1.3/lib/marked.js"></script>
<script src="https://unpkg.com/marked-highlight@2.0.1/lib/index.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>

另外，需要再引入一個(gè)css文件，用于 Markdown 中代碼高亮的樣式。

<link
    rel="stylesheet"
    
/>

外部引入的文件，我們已經(jīng)介紹完了，那么我們?cè)偌兄v解下核心業(yè)務(wù)邏輯代碼。

定義一個(gè)名為 input 的變量用于存儲(chǔ)用戶輸入的 Markdown 文本。然后定義一個(gè)名為 compiledMarkdown 的函數(shù)，該函數(shù)使用 Marked 庫(kù)將 input 變量中的 Markdown 文本轉(zhuǎn)換為 HTML。然后再定義一個(gè)名為 update 的函數(shù)，該函數(shù)在用戶輸入時(shí)調(diào)用。它使用 Lodash 的 debounce 函數(shù)來(lái)防止頻繁觸發(fā)，提高性能。當(dāng)用戶輸入時(shí)，它會(huì)更新 input 變量并將轉(zhuǎn)換后的 HTML 插入到輸出 <div> 中。定義一個(gè)名為 App 的組件，該組件包含一個(gè) textarea 用于輸入 Markdown 文本，以及一個(gè) <div> 用于顯示轉(zhuǎn)換后的HTML。<textarea> 上有一個(gè)input 事件監(jiān)聽(tīng)器，當(dāng)用戶輸入時(shí)調(diào)用 update 函數(shù)。輸出 <div> 使用 $key 屬性設(shè)置 Strve 的引用名稱為"output"。使用 Strve 的 createApp 函數(shù)創(chuàng)建一個(gè) App 實(shí)例并掛載到 id 為app的元素上。

核心邏輯講完了，那么我們欣賞下這款 Markdown 編輯器完整代碼吧！