editormd的初始化和配置-提供参考

editormd目前是我用的还算顺手的一款工具，配置也很灵活，支持Markdown语法，显示较传统的HTML也有所提升，这里建议大家使用Markdown语法。

> 下面是初始化的一些代码：

1准备HTML
```
<div id="test-editormd">
<textarea name="info" id="info" style="width:98%;height:600px;visibility:hidden;resize:none;">{notempty name='$article'}{$article.article.info}{/notempty}</textarea>
</div>
```
2:相关初始化工作
```
var testEditor;
	$(function() {
		testEditor = editormd("test-editormd", {
			width           : "100%",
			height:'560px',
			//autoHeight      : true,
			theme: "dark",//light
			previewTheme: "dark",
			editorTheme: "pastel-on-dark",
			syncScrolling: 'single',

// codeFold: true,//折叠代码块
			toolbar: true,             //关闭工具栏
			toolbarIcons : function() {
				//return editormd.toolbarModes[simple] // full, simple, mini
				// Using "||" set icons align right.
				return ["undo","redo","|",
					"bold","del","italic","quote","ucwords","uppercase","lowercase","|",
					"h1","h2","h3","h4","h5","h6","|",
					"list-ul","list-ol","hr","|",
					"link","reference-link","image","code","preformatted-text",
					"code-block","table","datetime",
					//"emoji",
					//"html-entities", //html转实体字符
					//"pagebreak",//分页符
					"|",
					"goto-line","watch","preview","fullscreen","clear","search","|",
					//"help","info",
					"releaseIcon", "index"]
			},
			searchReplace: false,
			path            : "{:config('web.cdn')}/static/index/editormd/lib/",
			imageUpload    : true,
			imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL : "{:url('Upload/mdeditor')}",
			htmlDecode      : "style,script,iframe",
			tex             : false,//科学公式
			emoji           : true,
			taskList        : true,
			flowChart       : true,
			sequenceDiagram : true,
			onload : function() {
				// alert("onload");
				// this.setMarkdown("### onloaded");
				// console.log("onload =>", this, this.id, this.settings);
				//编辑器 拖拽上传
				var codeEditor = $(".CodeMirror")[0];
				codeEditor.ondragenter = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("dragenter");
				  return false;
				};
				codeEditor.ondragover = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("dragover");
				  return false;
				};
				codeEditor.ondrop = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("drop");
				  var files = e.dataTransfer.files // 这里获取到用户拖放的文件
				  console.log('333333333333333333333333');
				  console.log(files);
				  // 其中 ajaxUpload是Ajax上传文件的函数
				  // uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数，用于生成代码片段并插入编辑器
				  ajaxUpload('{:url(\'Upload/mdeditor\')}', files, uploadCallback);
				  return false;
				};
			},
            onfullscreen : function() {
			    $(".navbar").hide();
                $("#page_right").hide();
                $("#uploadDiv").hide();
            },

onfullscreenExit : function() {
                $(".navbar").show();
                $("#page_right").show();
                $("#uploadDiv").show();
            }
            ,onchange : function() {
			    var InnerText = this.preview[0].innerText
                var num=InnerText.indexOf('。');//返回4
                var description = InnerText.substr(0,num+1);
                console.log(description);
                $("#description").val(description)
                // ....
            }
		});

$("#append-btn").click(function(){
			$.get("{:config('web.cdn')}/static/index/editormd/test.md", function(md){
				testEditor.appendMarkdown(md);
			});
		});
	});
```

以上是参考配置，大家复制下去后柯自由修改优化到最优。

注:原创不易,转载请注明出处( http://www.micuu.com/new/1560.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。