Markdown編輯器開發記錄(一):開發的初衷和初期踩的坑

来源:http://www.cnblogs.com/LFeather/archive/2017/12/17/8052204.html
-Advertisement-
Play Games

先說下選擇Markdown編輯器的原因,我們進行平臺開發,需要很多的操作手冊和API文檔,要在網站中展示出來就需要是HTML格式的文件,但是由於內容很多,不可能全部由技術人員進行文檔的編寫,如果是只有文檔操作經驗的人來做就會出現很麻煩的情況。 最初,我們先用試著用word來寫,再轉換成HTML文件保 ...


  先說下選擇Markdown編輯器的原因,我們進行平臺開發,需要很多的操作手冊和API文檔,要在網站中展示出來就需要是HTML格式的文件,但是由於內容很多,不可能全部由技術人員進行文檔的編寫,如果是只有文檔操作經驗的人來做就會出現很麻煩的情況。

  最初,我們先用試著用word來寫,再轉換成HTML文件保存,但是這樣存在幾個問題:1、轉換出來的文件標簽和樣式十分的雜亂和冗餘,有太多無用的標簽,後期要修改樣式也十分不容易;2、圖片無法保存,在word文檔中插入的圖片路徑是固定的物理路徑,或是與文檔一起存儲的,當文檔轉換成HTML文件並放在網站伺服器上使用時,圖片的路徑就發生了變化,如果再去調整圖片就十分麻煩;3、關於圖片還有種解決的辦法,word可以保存為htm格式,這種格式是將圖片和文字一同保存在一個文件的方法,但是最後的結果是只有IE可以識別這種格式,在Chrome里都是亂碼,所以最後同樣作罷。

  在一些編寫API文檔的專門網站中,我偶然看到markdown編輯器,向經理提了一下,他說之前就考慮這個,所以就由我來開發(好大一個坑)。

  網上找到的開源markdown編輯器中,我第一個看中的是Editor.md,發現用的人很多,相關的帖子也不少,所以最開始是用這個開發的,最初在單獨的網頁上實現也很快,但是拿到框架里就出現了一些相容性問題很難解決,並且需要引用很多文件,與我們的需求相比,它太臃腫了,功能不夠簡潔,而且,最關鍵的問題是,我找到GitHub上發現,這個編輯器已經有兩三年沒有更新了,很多問題都沒有好的解決方法,所以現在的用戶也不多,網上有的都是遺存的帖子,之前沒有註意到發帖時間。。。

  然後就繼續尋找,後面的詳細過程記不太清楚了,總之是發現現在需要用markdown編輯器開發者幾乎都是自己開發,而我又不具備這種能力,最終是找到了markdown plus這個比較輕量級的編輯器,開發者最初也是遇到和我一樣的問題,從開始用Editor.md到最後自己開發,所以他在開發過程中儘力使代碼簡潔,並且最近幾個月還在更新,在這個過程中還推出了Windows版和Mac版,十分推薦。另外CSDN上的markdown編輯器中標註使用的StackEdit也非常好用,有獨立的網頁版本,同時代碼也是開源的,不過我還不太會用,下一節就是具體記錄相關的踩坑過程,使用Git、yarn之類的工具的情況。

  在查找這些相關資料和編輯器的過程中,我能學到很多細微的知識,雖然花了很多時間,走了很多彎路,但也開始慢慢地掌握程式員學習進步的基本,希望以後能更有效率地開發。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 留存root javascript // Establish the root object, ( ) in the browser, // on the server, or in some virtual machines. We use // instead of for support. v ...
  • 時間:2017年12月17日 20:53:43 用於:個人總結 javascript知識點總結:1.獲取對象:document.getElementById("id")/document.getElementsTagName("li")2.事件 滑鼠事件: onclick 點擊 onmouseove ...
  • 性能分析。。。 window.performance.timing中相關屬性語義: 1.主要性能分析指標 一般指標: 實際前端更關註的指標(需要在實際中結合自身代碼): console.log('首屏圖片載入完成 : ',window.lastImgLoadTime - window.perform ...
  • 前面的話 適配器模式的作用是解決兩個軟體實體間的介面不相容的問題。使用適配器模式之後,原本由於介面不相容而不能工作的兩個軟體實體可以一起工作。適配器的別名是包裝器(wrapper),這是一個相對簡單的模式。在程式開發中有許多這樣的場景:當試圖調用模塊或者對象的某個介面時,卻發現這個介面的格式並不符合 ...
  • 最近要分析web頁面,在安卓和ios上的性能差異,除了操作系統本身不同之外,應該還多地方要探究的,第一步就是要在真機上分析。所以總結一下幾個方法。 1.Mac+iPhone+ Lightning+Safari 瀏覽器 步驟: 1)用:Lighting線將mac與iphone相連 2)iphone打開 ...
  • 在寫這篇博客時這本書我已經是看過一遍了,為了加深印象和深入學習於是打算做這系列的前端經典書籍導讀博文,大家如果覺得這本書講的好可以自己買來看看,我是比較喜歡看紙質版書的,因為這樣才有讀書的那種感覺。 本期我給大家講述的是 前端經典js書籍 <<你不知道的javaScript(上捲)>> 第一章內容的 ...
  • 文檔聲明 不是註釋也不是元素,總是在HTML的第一行 書寫格式:<!DOCTYPE HTML> 是用於通知瀏覽器目前文檔正使用哪一個HTML版本(相關屬性 lang) 若不寫文檔聲明,瀏覽器渲染頁面時會進入怪異模式 HTML元素又叫根元素或根標記,是所有元素的祖先元素 例:<html lang="e ...
  • 連我自己把float和絕對定位,都稱為脫離文檔流,想想概念又不那麼清晰,於是尋找了W3C資料來理解,才發覺不應該叫文檔流。 資料 英文:https://www.w3.org/TR/CSS22/visuren.html#normal-flow 中文:http://w3help.org/zh-cn/kb ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...