```
## 封装laravel调用
1、修改上传插件,设置添加laravel_token 和 type 参数,使其支持laravel。
查找文件 `editor.md/plugins/image-dialog/image-dialog.js` 55行和64行,分别在下面添加如下代码:
```javascript
"
" +
"
" +
```
2、封装editor.md
```javascript
(function($, window, document, undefined) {
/**
* js脚本封装 editor.md 编辑器,允许创建,浏览,移除
* 方法:
* $.EM.load(method, data);
* 参数说明:
* method:create(创建编辑器),preview(浏览内容),remove(移除编辑器)
* data:{
* divBoxId:可选参数,div的id值,当多个编辑器共存时,此值不应相同,默认editorcont,
* imageUploadType:可选参数,图片上传类型:avarar,article,默认article,
* height:可选参数,编辑器高度,默认500,
* toolbar:可选参数,菜单栏功能:full,min,默认full
* }
* 示例:
* 创建
* html页创建div:
*
*
*
* 页面底部调用
* @section('javascript')
*
* @endsection
* 浏览
* preview markdown显示:
*
*
*
*
* 移除
* 使用create方法创建后,会将编辑器对象赋值给变量 edMdObj,故不是自动创建的编辑器不可移除
* $.EM.load('remove');
*/
var EM;
var edMdObj;//编辑器创建对象,用户移除编辑器
$.EM = EM = {};
var editorMdBox = function(method, data) {
if(!method) {
return null;
}
if (!data) {
data = {};
}
this.divBoxId = data.divBoxId ? data.divBoxId : 'editorcont';
this.imageUploadType = data.imageUploadType ? data.imageUploadType : 'article';
this.height = data.height ? data.height : 500;
this.toolbar = data.toolbar ? data.toolbar : 'full';
this.toolbarFull = new Array(
"bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
"h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|",
"link", "reference-link", "image", "emoji", "html-entities", "pagebreak", "|",
"code", "preformatted-text", "code-block", "table", "||", "preview", "fullscreen", "watch", "help"
);
this.toolbarMin = new Array(
"bold", "italic", "quote", "|",
"h1", "h2", "h3", "h4", "h5", "h6", "|",
"list-ul", "list-ol", "hr", "link", "|", "emoji", "|",
"code", "preformatted-text", "code-block", "table", "||", "watch"
);
var fun = eval("this."+method);
new fun(this);
}
editorMdBox.prototype.create = function(fun) {
var self = fun;
$.getScript('/editor.md/editormd.js', function() {
//css
$("#"+self.divBoxId).append('
');
//emoji替换url
editormd.emoji = {
path : "http://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/",
ext : ".png"
};
editormd.twemoji = {
path : "http://twemoji.maxcdn.com/72x72/",
ext : ".png"
};
edMdObj = editormd(""+self.divBoxId+"", {
path : '/editor.md/lib/',
height : self.height,
syncScrolling : "single",
emoji : true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/admin/upload/store",
imageUploadType : self.imageUploadType,
watch : false, // 关闭实时预览
toolbarAutoFixed : true, // 工具栏固定
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
codeFold : true, // 代码折叠功能
autoLoadModules : true, // Manually load modules
toolbarIcons : function() {
if(self.toolbar == 'min') {
return self.toolbarMin;
} else {
return self.toolbarFull;
};
},
});
});
};
editorMdBox.prototype.preview = function(fun) {
var self = fun;
var divId = self.divBoxId;
$.getScript('/editor.md/editormd.js', function() {
$("#"+self.divBoxId).append('
');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
$("#"+self.divBoxId).append('');
var editormdView = editormd.markdownToHTML(self.divBoxId, {
markdown : "\r\n" + $("#"+self.divBoxId+"-markdonw").text() ,//+ "\r\n" + $("#append-test").text(),
emoji : true,
taskList : true,
tex : true,
flowChart : true,
sequenceDiagram : true,
});
});
};
editorMdBox.prototype.remove = function(fun) {
var self = fun;
edMdObj.editor.remove();
};
/**
* @param {String} method 方法名
* @param {Array} data 参数
* @return {Object}
*/
// editormd Box api
EM.load = function(method, data) {
new editorMdBox(method, data);
};
})(jQuery, window, document);
```