首先调用这些js css(有些是不需要的,自己删)
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="/sta/dist/js/tui-editor/js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="/sta/dist/js/tui-editor/lib/markdown-it/dist/markdown-it.js"></script>
<script src="/sta/dist/js/tui-editor/lib/toMark/dist/toMark.js"></script>
<script src="/sta/dist/js/tui-editor/lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
<script src="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.js"></script>
<script src="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.js"></script>
<script src="/sta/dist/js/tui-editor/lib/highlightjs/highlight.pack.js"></script>
<script src="/sta/dist/js/tui-editor/lib/squire-rte/build/squire-raw.js"></script>
<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/highlightjs/styles/github.css">
<script src="/sta/dist/js/tui-editor/lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
<script src="/sta/dist/js/tui-editor/lib/raphael/raphael.js"></script>
<script src="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.js"></script>
<script src="/sta/dist/js/tui-editor/dist/tui-editor-Editor-all.js"></script>
<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor.css">
<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor-contents.css">
<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.css">
<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.css">
我的表单是用from 提交的,大家也可以直接ajax提交表单
<form action="/article/<?=$this->ectType?>/" id="id-form" class="form-horizontal form-validate" role="form"
method="post" onsubmit="return subF();">
<div class="align-left">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right">内容</label>
<div class="col-xs-9" id="contentEditor"></div>
<textarea type="text" hidden name="content" id="content" class="col-xs-6" rows="6"> </textarea>
</div>
</div>
<div class="clearfix form-actions">
<div class="col-md-offset-2 col-md-9">
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i>
提交
</button>
</div>
</div>
</form>
<script class="code-js">
var content = [];
//这里需要注意,php需要传一个json对象过来,
//$data['content'] = explode("\r\n", $data['content']);
//$data['content'] = json_encode($data['content']);
content = <?= $this->data['content']; ?>;
//var content = [
// '| @cols=2:merged |',
// '| --- | --- |',
// '| table | table |',
// '```uml',
// 'partition Conductor {',
// ' (*) --> "Climbs on Platform"',
// ' --> === S1 ===',
// ' --> Bows',
// '}',
// '',
// 'partition Audience #LightSkyBlue {',
// ' === S1 === --> Applauds',
// '}',
// '',
// 'partition Conductor {',
// ' Bows --> === S2 ===',
// ' --> WavesArmes',
// ' Applauds --> === S2 ===',
// '}',
// '',
// 'partition Orchestra #CCCCEE {',
// ' WavesArmes --> Introduction',
// ' --> "Play music"',
// '}',
// '```',
// '```chart',
// ',category1,category2',
// 'Jan,21,23',
// 'Feb,31,17',
// '',
// 'type: column',
// 'title: Monthly Revenue',
// 'x.title: Amount',
// 'y.title: Month',
// 'y.min: 1',
// 'y.max: 40',
// 'y.suffix: $'
//].join('\n');
var editor = new tui.Editor({
el: document.querySelector('#contentEditor'),
previewStyle: 'vertical',
height: '300px',
initialEditType: 'wysiwyg',
useCommandShortcut: true,
initialValue: content.join('\n'),
hooks: {
addImageBlobHook: addImageBlobHook.bind(this),
},
exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']
});
console.log(editor);
function addImageBlobHook(blob, callback) {
const data = new FormData();
//blob就是一个文件对象

data.append('upfile', blob);
//console.log(data, $('#cuzn123')[0]);
//console.log 打印data的时候确实为空,要用下面的方法打印,然后看php获取的值,之前一直用get,拿不到值,换了post就好了
//console.log(data.has("upfile"));//true
console.log(data.get("upfile"));
//data.forEach(function(file){
// console.log(file);
//});
$.ajax({
url: "/index/upToQiniu/",
type: "POST",
data: data,
//dataType: 'JSON',
processData: false,
contentType: false,
//async: false,
cache: false,
//headers: {
// 'Content-Type': 'multipart/form-data'
//},
success: function (result) {
result = JSON.parse(result);
console.log(typeof result);
console.log("result['state'] : " + result["state"]);
console.log("result.state : " + result.state);
if (result["state"] == 'SUCCESS') {
//这里是生成htpp模式的图片地址(我这里是七牛返回的一个key,需要转换)
var image = MyCommon.getViewImage(result["key"]);
//这里是插件自带的回调函数
callback(image, 'alt text');
}
console.log(result);
},
error: function (e) {
console.log(e);
}
});
//$.get('/upload-images', data, config) .then(response => { callback(response.data.url, ''); }) .catch(error => { })
}
//提交表单之前 把值插入textarea 里面
function subF() {
$("#content").val(editor.getMarkdown ());
//console.log('editor.getHtml () : ' + editor.getHtml ());
//console.log('editor.getValue () : ' + editor.getValue ());
//console.log('editor.getMarkdown () : ' + editor.getMarkdown ());
return true;
}
</script>
try {
$ret = QiNiu::upload($_FILES["upfile"]["tmp_name"]);
$result = [
'state' => 'SUCCESS',
'key' => $ret,
];
} catch (Exception $e) {
$result = [
'state' => $e->getMessage(),
];
}
echo json_encode($result);
最后要显示数据库的值需要用Markdown转HTML的插件 showdown

<script src="/sta/dist/js/showdown-1.8.6/dist/showdown.js"></script>
<div class="row">
<div class="col-xs-12" id="content">
</div>
</div>
<!--js:start-->
<script>
//这里的php只需要 $data['content'] = json_encode($data['content']);
var content = '';
<?php if (!empty($this->data['content'])) { ?>
content = <?= $this->data['content']; ?>;
<?php } ?>
var converter = new showdown.Converter({
"omitExtraWLInCodeBlocks":true,
"noHeaderId":false,
"prefixHeaderId":"",
"ghCompatibleHeaderId":true,
"headerLevelStart":1,
"parseImgDimensions":true,
"simplifiedAutoLink":true,
"excludeTrailingPunctuationFromURLs":false,
"literalMidWordUnderscores":true,
"strikethrough":true,
"tables":true,
"tablesHeaderId":false,
"ghCodeBlocks":true,
"tasklists":true,
"smoothLivePreview":true,
"smartIndentationFix":false,
"disableForced4SpacesIndentedSublists":false,
"simpleLineBreaks":false,
"requireSpaceBeforeHeadingText":false,
"ghMentions":false,"extensions":[],"sanitize":false
}),
//text = '# hello, markdown!',
html = converter.makeHtml(content);
$("#content").html(html);
</script>
<!--js:end-->

参考网站
https://qiita.com/dala00/items/93f96dfbf63e71765562 这个是addImageBlobHook使用的,整个google就这个日本鬼子写了这个
这个是官方的文档,硬是想打死这个作者
https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#getHtml
https://github.com/nhnent/tui.editor#-examples
showdown 参考网址
https://github.com/showdownjs/showdown
https://blog.csdn.net/yzf913214/article/details/54607897
tui-editor.zip showdown-1.8.6.zip
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权