解決Editor.md中Github emoji圖示無法顯示的問題
阿新 • • 發佈:2019-01-10
1. 前言
做專案的時候需要用到文件編輯器,再三思考後決定選用Editor.md畢竟國產,而且開源簡直誠意十足。但是在配置的時候出現了一些問題,下面就將我出現的問題記錄下,並提供解決方案供大家檢視。
2. Editor.md的基本使用
3. 在專案中使用基本功能的配置
需要新增到專案中的檔案
截圖中標出的部分需要拷貝到相應的資料夾中。除此之外還有一個jquery-min.js檔案,該檔案在/example/js/資料夾中,然後下圖是我的專案結構。
專案結構示例
4. 下載emoji表情包
原來專案中使用的是http://www.emoji-cheat-sheet.com
將下載的表情包解壓放在下圖所示的資料夾中:
5. 修改editormd.js檔案
替換內容
6. 測試
新建一個html檔案拷貝以下內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Simple example - Editor.md examples</title>
<link rel ="stylesheet" href="../css/style.css"/>
<link rel="stylesheet" href="../css/editormd.css"/>
</head>
<body>
<div id="container">
<div id="mdEditor" class="editormd">
<textarea class="editormd-markdown-textarea" name="markdown-area" style="display:none;"> # 請輸入標題</textarea>
<textarea class="editormd-html-textarea" name="html-area"></textarea>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/editormd.js"></script>
<script type="text/javascript">
var editor;
$(function () {
editor = editormd("mdEditor", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "../lib/",
emoji:true
});
});
</script>
</body>
</html>
執行截圖
期待已久的emoji就出來啦~
沒有要到授權,如果原Po介意的話請聯絡我喲!