1. 前言
做項(xiàng)目的時(shí)候需要用到文檔編輯器锐墙,再三思考后決定選用Editor.md畢竟國產(chǎn)华匾,而且開源簡直誠意十足皿哨。但是在配置的時(shí)候出現(xiàn)了一些問題浅侨,下面就將我出現(xiàn)的問題記錄下,并提供解決方案供大家查看证膨。
2. Editor.md的基本使用
首先到Editor.md-Github去下載最新的版本如输。
3. 在項(xiàng)目中使用基本功能的配置

需要添加到項(xiàng)目中的文件
截圖中標(biāo)出的部分需要拷貝到相應(yīng)的文件夾中。除此之外還有一個(gè)jquery-min.js
文件,該文件在/example/js/
文件夾中不见,然后下圖是我的項(xiàng)目結(jié)構(gòu)澳化。

項(xiàng)目結(jié)構(gòu)示例
4. 下載emoji表情包
原來項(xiàng)目中使用的是http://www.emoji-cheat-sheet.com
網(wǎng)站的表情包,不知道怎么回事反正就是不顯示了稳吮,沒辦法只能將表情包下載到本地了缎谷。
將下載的表情包解壓放在下圖所示的文件夾中:

emoji表情包放在這里
5. 修改editormd.js文件
找到下圖的中的位置,將原來的http://www.emoji-cheat-sheet.com/graphics/emojis/
替換為此時(shí)紅色標(biāo)記區(qū)域的內(nèi)容

替換內(nèi)容
6. 測試
新建一個(gè)html文件拷貝以下內(nèi)容
<!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;"># 請輸入標(biāo)題</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>
運(yùn)行截圖

期待已久的emoji就出來啦