laravel使用Editor.md的封装调用,

6284 View 16 Comment
Javascript
  • editor
  • laravel
``` ## 封装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); ```

除特别注明外,本站所有文章均为wangyongdong原创,转载请注明出处来自 https://www.wangyd.com/post/145