溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Thinkphp5框架中引入Markdown編輯器如何操作”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Thinkphp5框架中引入Markdown編輯器如何操作”吧！
1.把下載的項目放在public目錄下
2.頁面中引入jquery.js，editormd.js，editormd.css
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>markdown測試</title>
<link rel="stylesheet" href="/public/markdown/css/editormd.css" rel="external nofollow" />
<script src="__JS__/jquery.min.js"></script>
<script src="/public/markdown/editormd.js"></script>
</head>
<body>
<form action="{:url('test')}" enctype="multipart/form-data" method='post'>
<div id="content-editormd" class="form-group">
<textarea class="form-control" id="content-editormd-markdown-doc" name="content-editormd-markdown-doc"></textarea>
</div>
<button>提交</button>
</form>
<script type="text/javascript">
$(function() {
editormd("content-editormd", {
placeholder : '編輯你的內容...',
width : "100%",
height : 1000,
syncScrolling : "single",
path : "/public/markdown/lib/",
watch : true,
previewTheme : "white",//預覽
theme : 'white',//工具欄
saveHTMLToTextarea : true, // 保存HTML到Textarea
// 圖片上傳
imageUpload : true,
imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
imageUploadURL: "/api/Upload/markdownUpload",
toolbarIcons : function() { //自定義工具欄，后面有詳細介紹
return editormd.toolbarModes['full']; // full, simple, mini
},
});
});
//上傳
/*
{
success : 0 | 1, // 0 表示上傳失敗，1 表示上傳成功
message : "提示的信息，上傳成功或上傳失敗及錯誤信息等。",
url : "圖片地址" // 上傳成功時才返回
}
*/
</script>
</body>
</html>上傳圖片
public function markdownUpload(){
$config = [
'size' => 2097152,
'ext' => 'jpg,gif,png,bmp'
];
$file = $this->request->file('editormd-image-file');
$upload_path = str_replace('\\', '/', ROOT_PATH . 'public/uploads');
$save_path = '/uploads/';
$info = $file->validate($config)->move($upload_path);
if ($info) {
$result = [
'success' => 1,
'message' => '上傳成功',
'url' => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
];
} else {
$result = [
'success' => 0,
'message' => $file->getError(),
'url' => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
];
}
return json($result);
}3.頁面加載markdown格式內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面加載markdown格式內容</title>
<link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script src="__JS__/jquery.min.js"></script>
<script src="/public/markdown/lib/marked.min.js"></script>
<script src="/public/markdown/lib/prettify.min.js"></script>
<script src="/public/markdown/lib/raphael.min.js"></script>
<script src="/public/markdown/lib/underscore.min.js"></script>
<script src="/public/markdown/lib/sequence-diagram.min.js"></script>
<script src="/public/markdown/lib/flowchart.min.js"></script>
<script src="/public/markdown/lib/jquery.flowchart.min.js"></script>
<script src="/public/markdown/editormd.js"></script>
</head>
<body>
<div id="doc-content">
<textarea >
```php
<?php
echo 1;
?>
```
</textarea>
</div>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：這里是上面div的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tocm: true,
tex: true, // 默認不解析
flowChart: true, // 默認不解析
sequenceDiagram: true, // 默認不解析
codeFold: true
});});
</script>
</body>
</html>4.直接展示html格式的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端顯示</title>
<link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script src="__JS__/jquery.min.js"></script>
<script src="/public/markdown/lib/marked.min.js"></script>
<script src="/public/markdown/lib/prettify.min.js"></script>
<script src="/public/markdown/editormd.min.js"></script>
</head>
<body>
<div id="doc-content">
{:htmlspecialchars_decode($data)}
</div>
<script type="text/javascript">
$(function () {
editormd.markdownToHTML("doc-content");
})
</script>
</body>
</html>感謝各位的閱讀，以上就是“Thinkphp5框架中引入Markdown編輯器如何操作”的內容了，經過本文的學習后，相信大家對Thinkphp5框架中引入Markdown編輯器如何操作這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
