本文實(shí)例講述了Thinkphp5框架中引入Markdown編輯器操作。分享給大家供大家參考，具體如下：
編輯器下載地址以及演示:https://pandao.github.io/editor.md/
1.把下載的項(xiàng)目放在public目錄下
2.頁(yè)面中引入jquery.js，editormd.js，editormd.css
demo
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>markdown測(cè)試/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 style="display:none;" 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 : '編輯你的內(nèi)容...',
width : "100%",
height : 1000,
syncScrolling : "single",
path : "/public/markdown/lib/",
watch : true,
previewTheme : "white",//預(yù)覽
theme : 'white',//工具欄
saveHTMLToTextarea : true, // 保存HTML到Textarea
// 圖片上傳
imageUpload : true,
imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
imageUploadURL: "/api/Upload/markdownUpload",
toolbarIcons : function() { //自定義工具欄，后面有詳細(xì)介紹
return editormd.toolbarModes['full']; // full, simple, mini
},
});
});
//上傳
/*
{
success : 0 | 1, // 0 表示上傳失敗，1 表示上傳成功
message : "提示的信息，上傳成功或上傳失敗及錯(cuò)誤信息等。",
url : "圖片地址" // 上傳成功時(shí)才返回
}
*/
/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.頁(yè)面加載markdown格式內(nèi)容
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>頁(yè)面加載markdown格式內(nèi)容/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 style="display:none;">
```php
lt;?php
echo 1;
?gt;
```
/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, // 默認(rèn)不解析
flowChart: true, // 默認(rèn)不解析
sequenceDiagram: true, // 默認(rèn)不解析
codeFold: true
});});
/script>
/body>
/html>
4.直接展示html格式的內(nèi)容
!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>
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《ThinkPHP入門(mén)教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門(mén)教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門(mén)教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
標(biāo)簽：瀘州 迪慶 雞西 貴陽(yáng) 郴州 綿陽(yáng) 白城 黃石
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Thinkphp5框架中引入Markdown編輯器操作示例》，本文關(guān)鍵詞 Thinkphp5,框架,中,引入,Markdown,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
