2. 程式人生 > >Slog73_ArthurSlog_Markdown編輯器！（專案上線之ArthurSlog個人網站上線5）

Slog73_ArthurSlog_Markdown編輯器！（專案上線之ArthurSlog個人網站上線5）

阿新 • • 發佈：2018-12-10
  • ArthurSlog
  • SLog-73

  • Year·1

  • Guangzhou·China

  • September 15th 2018

關注微信公眾號“ArthurSlog”

一尺之棰 日取其半 萬世不竭

開發環境MacOS(High Sierra 10.13.6 (17G65))

需要的資訊和資訊源：

開始編碼

  • 這個功能就是 Markdown編輯器模組

  • 簡單點說，Markdwon檔案 使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件

  • 這個換裝的過程就需要一個轉換器，這裡我們使用 Markdown-it，具體介紹 在此

  • 在這裡選擇下載markdown-it.js檔案，在 html檔案裡直接引用

  • 這裡把html、css、js都一起寫在一個文件裡，簡單直接一點

ClientFile: ArthurSlog.com/Markdown_Editor.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>ArthurSlog_MarkdownEditor</title>
    <meta charset="UTF-8">
    <script src="./markdown-it.js"></script>
</head>
 


<body>
    <div id="container">
        <!-- ArthurSlog_Manual_Area -->
        <div id="editorManual">
            <div id="editorManual_Title">ArthurSlog 創作中心</div>
            <div id="editorManual_Tool">工具欄（建設中...）</div>
        </div>
        <div
 
 id="editorContent">
            <!-- ArthurSlog_MarkdownEditor_Area -->
            <div id="sourceCode_Markdown" contenteditable="true"></div>

            <div id="middleLine"></div>
            <!-- ArthurSlog_MarkdownToHTML_AREA -->
            <div id="resultCode_HTML"></div>
        </div>
    </div>

    <script>
        // target.addEventListener(type, listener, options);
        // target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean});
        // target.addEventListener(type, listener, useCapture);
        // target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]); 
        // ---
        // 1. target = document.getElementById("basic")
        // 2. type = 'input'
        // 3. listener = document.getElementById("resultHTML").innerHTML = window.markdownit().render(document.getElementById("basic").value)
        // 4. options = false
        // =>
        // 5. target.addEventListener(type, listener, options)
        document.getElementById("sourceCode_Markdown").addEventListener('input', function () { document.getElementById("resultCode_HTML").innerHTML = window.markdownit().render(document.getElementById("sourceCode_Markdown").innerText) }, false);
        //document.getElementById("sourceCode_Markdown").addEventListener('paste', function () { document.getElementById("sourceCode_Markdown").innerText = document.getElementById("sourceCode_Markdown").innerText.toString()}, false);
        document.getElementById("sourceCode_Markdown").style.boxShadow = "none";
        document.getElementById("sourceCode_Markdown").style.textShadow = "none";
        document.getElementById("sourceCode_Markdown").style.outlineColor = "none";
        document.getElementById("sourceCode_Markdown").style.outlineStyle = "none";
        document.getElementById("sourceCode_Markdown").style.outline = "none";
        document.getElementById("sourceCode_Markdown").style.borderColor = "none";
    </script>

    <style>
        html,
        body {
            height: 100%;
            display: block;
            overflow: hidden;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            flex-direction: column;
            position: absolute;
            margin: 0;
            padding: 0;
        }

        #EditorManual {
            display: flex;
            flex-direction: column;
            position: relative;
            margin-left: 0%;
            margin-right: 0%;
            height: 15vh;
        }

        #editorManual_Title {
            margin-left: 0%;
            margin-right: 0%;
            height: 10vh;
            background-color: ghostwhite;
        }

        #editorManual_Tool {
            margin-left: 0%;
            margin-right: 0%;
            height: 5vh;
            background-color: rgb(211, 250, 255);
        }

        #editorContent {
            display: flex;
            flex-direction: row;
            position: relative;
            margin: 0;
            padding: 0;
        }

        #sourceCode_Markdown {
            width: 47.5vw;
            height: 85vh;
            margin-left: 0%;
            margin-right: 0%;
            overflow: scroll;
            background-color: aliceblue;
            text-decoration:none;
        }

        #middleLine {
            width: 5vw;
            height: 85vh;
            overflow: hidden;
            background-color: ghostwhite;
        }

        #resultCode_HTML {
            width: 47.5vw;
            height: 85vh;
            margin-left: 0%;
            margin-right: 0%;
            overflow: scroll;
            background-color: ghostwhite;
        }
    </style>
</body>

</html>

  • 這裡有幾個需要關鍵的地方：

    1. 當div標籤出現 contenteditable屬性，且這個屬性為“true”的時候，這個div 會變成可編輯狀態，點選這裡詳細瞭解contenteditable 屬性

    2. 根據Markdown-it的官方說明，使用 window.markdownit().render(document.getElementById(“sourceCode_Markdown”).innerText)把輸入的文字轉換為Html

    3. 關閉輸入div標籤區域的邊框效果：

ClientFile: ArthurSlog.com/Markdown_Editor.html(script)

document.getElementById("sourceCode_Markdown").style.boxShadow = "none";
document.getElementById("sourceCode_Markdown").style.textShadow = "none";
document.getElementById("sourceCode_Markdown").style.outlineColor = "none";
document.getElementById("sourceCode_Markdown").style.outlineStyle = "none";
document.getElementById("sourceCode_Markdown").style.outline = "none";
document.getElementById("sourceCode_Markdown").style.borderColor = "none";

  1. 使用flex對頁面進行佈局

  2. 調整html和body的樣式，以達到覆蓋整個頁面的效果：

ClientFile: ArthurSlog.com/Markdown_Editor.html(style)

html,
body {
    height: 100%;
    display: block;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}
  • 完成了編輯，現在給首頁加個連結先，直接跳轉過去

ClientFile: ArthurSlog.com/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ArthurSlog</title>
        <link rel="stylesheet" type="text/css" href="style.css" >
    </head>
    <body>
        <p>個人技術分享</p>
        <div>
            <a href="./Markdown_Editor.html">ArthurSlog_MarkdownEditor</a>
        </div>
        <footer>
            <a href="http://www.miitbeian.gov.cn">粵ICP備18088522號-1</a>
        </footer>
    </body>
</html>
  • 其中更新的部分是：

ClientFile: ArthurSlog.com/index.html

<div>
    <a href="./Markdown_Editor.html">ArthurSlog_MarkdownEditor</a>
</div>

  • 編輯器還有一些問題，後續再繼續更新優化

  • 至此，ArthurSlog的網站又新增新模組—-ArthurSlog_Markdown編輯器！。

歡迎關注我的微信公眾號 ArthurSlog

關注微信公眾號“ArthurSlog”

如果你喜歡我的文章 歡迎點贊 留言

謝謝

相關推薦

Slog73_ArthurSlog_Markdown編輯器！（專案上線之ArthurSlog個人網站上線5）

ArthurSlog SLog-73 Year·1 Guangzhou·China September 15th 2018 一尺之棰 日取其半 萬世不竭 開發環境MacOS(High Sierra 10.13.6 (17G65)) 需要

Slog62_專案上線之ArthurSlog個人網站上線1

ArthurSlog SLog-62 Year·1 Guangzhou·China September 9th 2018 ArthurSlog個人網站上線了～ 開發環境MacOS(High Sierra 10.13.5) 需要的資訊和資訊源： 開始編碼

Slog63_專案上線之ArthurSlog個人網站上線2

ArthurSlog SLog-63 Year·1 Guangzhou·China September 9th 2018 大成若缺 其用不弊 大盈若衝 其用不窮 大直若屈 大巧若拙 大辯若訥 開發環境MacOS(High Sierra 10.13.5) 需

Slog64_專案上線之ArthurSlog個人網站上線3

ArthurSlog SLog-64 Year·1 Guangzhou·China September 9th 2018 多言數窮 不如守中 開發環境MacOS(High Sierra 10.13.5) 需要的資訊和資訊源： 開始編碼 本篇配置服務端環境

Slog65_專案上線之ArthurSlog個人網站上線4

ArthurSlog SLog-65 Year·1 Guangzhou·China September 9th 2018 天下難事必作於易 天下大事必作於細 開發環境MacOS(High Sierra 10.13.5) 需要的資訊和資訊源： 開始編碼 服

linux軟件管理(Vim編輯器使用) ——（七）

切換 顯示 檢查 hive vim編輯器使用 中心 open 互聯網 下載 windows ： .exe 安裝 、卸載 安裝： mysql.exe cc.exe 卸載 ： 該軟件唯一的標識 ，包名 alibaba

迅捷PDF編輯器破解版的下載方法，輕松下載破解版PDF編輯器！

log 2-2 選中 ext 我們 修改 如果 編輯 需要 　　現在接觸PDF文件的人越來越多了，而使用PDF編輯器的人也越來越多，但是PDF編輯器大多數都是需要收費的，那麽才能下載到免費的破解版PDF編輯器呢？ 　　1、首先打開瀏覽器，搜索關鍵詞“迅捷PDF編輯器”，將

Java程序員最喜愛的編輯器之一（Notepad++）

java 編輯器 簡介： Notepad++是windows操作系統下的一套文本編輯器，有完整的中文化接口以及支持多國語言編寫的功能。Notepad++官方下載地址：https://notepad-plus-plus.org功能： 內置支持多達27種語法高亮度顯示(包括各種常見的源代碼

Java程序員最喜愛的編輯器之一（Sublime Text 3）

java 編輯器 程序員 Sublime Text Hello，大家好！我是Rain。今天給大家推薦一款程序員最心儀的編輯器之一——Sublime Text 3。為什麽說它是程序員最喜歡的編輯器呢？答案就是它漂亮的用戶界面以及強大的功能。下面我給大家詳細介紹一下這款編輯器。一、功能特性

最火爆10大集成開發環境和代碼編輯器！總有一款是最適合你的！

.org 如何工作 技術分享 你是 自帶 獲取 數據科學家 識別 文件中 什麽是集成開發環境和代碼編輯器 進群：125240963 即可獲取數十套PDF或者零基礎入門教程一套哦！ 保存和重載代碼文件 如果一款集成開發環境或者編輯器不允許你保

歡迎使用CSDN-markdown編輯器！

Markdown自帶教程 歡迎使用Markdown編輯器！ 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。 新的改變 我們對Markdown編輯器進

sublime 編輯器學習（學習使用隨筆）

sublime 編輯器學習 對比了不少的文字編輯工具，也接觸過很多的編輯工具 例如：nodpad++,editplus,sublimetext3,visual studio code ,等工具，發現各有利弊，因為在考慮往全棧方向發展 故也開始向前端邁進。下面主要是在網上翻閱部落格整理的相

SRPG遊戲開發（三十五）第八章 遊戲中的資料 - 五 測試，匯出，匯入與編輯器說明（Test, Export, Import and Description）

返回總目錄 第八章 遊戲中的資料（Data in Game） 在之前的章節中，我們進行地圖物件的生成，移動等操作。 這一章本來可以進行戰鬥的編寫，不過資料缺失是一個問題。 所以這一章我們先來建立一些資料，以及如何編輯它們，是否需要生成配置檔案等。 文章

解決Eclipse編輯器儲存（Ctrl+S）時卡頓問題

Eclipse開發專案時，發現越到後面，操作起來越卡，設定了一些優化的選項，但發現也只是啟動的時候時間短了，但敲程式碼的時候還是很卡，最後發現問題出在Ctrl鍵上。解決Ctrl+S卡頓的方法：Window -> Preferences -> General ->

分享一個Delphi製作的文件編輯器原始碼（仿Word）

  功能挺多的，就是很多地方都沒有完善。不過簡單使用，是沒有問題的。 我也忘記是在哪個網站下載的，可能是Git國外的網站。 仿Word文件編輯器，不過其實沒有必要的，因為使用者會直接使用微軟或者其他軟體來製作自己的文件。 但是卻具有參考價值，雖然程式碼需要優化的地方還有很多。比如那些

即學即用，輕鬆搞定這些選擇器！（上）

所謂基本選擇器是指選擇器的名稱前面沒有其他選擇器，即在組成上，基本選擇器是單一名稱。 基本選擇器主要包括： 元素選擇器 ID 選擇器 類選擇器 偽類選擇器 偽元素選擇器 通用選擇器 元素選擇器 在 W3C 標準中，元素選擇器又稱為型別選擇器。使用元素選擇器設定樣式的語法如下： 元素選擇器 { 屬性

關於富文字編輯器—UEditor（java版）的使用，以及如何將UEditor的檔案/圖片上傳路徑改成絕對路徑

突然發現好久沒寫部落格了，感覺變懶了，是要讓自己養成經常寫文章的習慣才行。既可以分享自己的所學，和所想，和大家一起討論，發現自己的不足的問題。 大家可能經常會用到富文字編輯器，今天我要說的是UEditor的使用，這是一個簡單易用的開源富文字編輯器。但是對於沒有用過的同學而言還是需要稍微瞭解一下的。 可能有些人

Unity3D 自定義編輯器介面（Inspector）

今天看一個指令碼，本想看看在 Inspector 介面的變數在腳本里的用途，然後查詢變數名的時候怎麼也找不到，自己也是驚訝。通過網上搜索才瞭解到原來 Inspector介面 是可以自己定義的。 當然自己定義，當然也需要寫一個指令碼來改的。可能是為了讓介面整潔的目的。 首先

Window下:自帶python編輯器的wxpython專案釋出打包exe

最後更新“2018-10-17” 環境：w764 Pyinstaller3.1.1 Python2.7.15 wxPython2.9.1 matplotlib2.2.3 加密方式有兩種，一種是使用pyinstaller與pyexe等工具進行打包生成exe,一種是將py轉成

wangEditor+SringBoot富文字編輯器使用（圖片上傳）

最近專案中使用到了wangEditor外掛，在此記錄使用過程。 思路：點選外掛中上傳圖片，圖片上傳至伺服器臨時圖片資料夾下，當最後點選確認儲存按鈕時，再把臨時資料夾下的圖片複製到正式的資料夾下面。 在HTML中引入wangEditor.js： <!--引入