discuz x3.4日志编辑器更换为editor.md

浏览
239
回复
2
收藏
1
点赞
3

1#

2019-1-18 19:27:32
先把编辑器放上。
editor.md官网示例:http://pandao.github.io/editor.md/examples/full.html

下载地址: https://pan.baidu.com/s/1mfqaSyntRqZfJ1jcXbNRKg 提取码: jav3
我对部分js和css文件稍有改动。

开始:
一、安装
将压缩包解压出来,markdown文件夹上传至网站根目录。

二、修改
打开当前风格里home/spacecp_blog.htm,如果没有的,从default目录里复制一份传到当前风格目录。强烈反对直接对default里文件做修改。
1.引入css,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
放到头部引用
  1. <!--{template common/header}-->
复制代码
之下。
2.删除默认编辑器的相关代码
  1. <script type="text/javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
复制代码
  1. <!--{subtemplate home/editor_image_menu}-->
复制代码
  1. <div style="border:1px solid #C5C5C5;height:400px;"><iframe src='home.php?mod=editor&charset={CHARSET}&allowhtml=$allowhtml&doodle={if $_G['setting']['magicstatus'] && !empty($_G['setting']['magics']['doodle'])}1{/if}' name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;height:100%;position:relative;"></iframe></div>
复制代码
3.文本框修改

  1. <textarea class="pt" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0">$blog[message]</textarea>
复制代码
改为
  1. <div id="editormd"><textarea class="pt" name="message">$blog[message]</textarea></div>
复制代码
并在其下增加
  1. <script type="text/javascript" reload="1">
  2. jQuery.getScript("/markdown/editormd.js", function(){
  3.         editormd("editormd", {
  4.      width   : "100%",
  5.      height  : 640,
  6.      syncScrolling : "single",
  7.      path    : "/markdown/lib/",
  8.      // watch   : false,
  9.      htmlDecode: "style,script,iframe|on*",
  10.      toc: true,
  11.      tocm: true,
  12. tex: true,
  13.      flowChart: true,
  14.      sequenceDiagram: true,
  15.      lineNumbers: false,
  16.       toolbarIcons : function() {
  17.         return ["bold","italic","del","italic","|","h1","quote","code-block","list-ol","list-ul","hr","|","link","image","table","|","watch","preview","fullscreen"]
  18.       },
  19.       theme : "",
  20.       previewTheme : "",
  21.       editorTheme : "",
  22.       imageUpload : true,
  23.       imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  24.       imageUploadURL : "/markdown/files/upload_blog.php",
  25.       onload : function() {
  26.         console.log('onload', this);
  27.         /*this.fullscreen(
  28.                 jQuery("header").addClass("z-0")
  29.         );*/
  30.         //this.unwatch();
  31.         //this.watch().fullscreen();
  32.         //this.setMarkdown("#PHP");
  33.         //this.width("100%");
  34.         //this.height(480);
  35.         //this.resize("100%", 640);
  36.     },
  37.       saveHTMLToTextarea : true
  38.   });
  39. });
  40. </script>
复制代码
## 其中jQuery.getScript("/markdown/editormd.js", function()部分的js文件可以单独拿出来引用,因我在使用时,经常用到ajax获取,为了防止失效才在js代码里用getScript()。## 其中编辑器那些按钮,我是限定了部分显示,这些是我需要的,如果你要显示全部按钮,就注释掉toolbarIcons : function() {}这部分,即使用默认全部按钮。
## 编辑器按钮代号:
  1. ## 工具栏:

  2. undo 撤销
  3. redo 重做
  4. bold 粗体
  5. del 删除线
  6. italic 斜体
  7. quote 引用
  8. ucwords 首字母大写
  9. uppercase 选中大写
  10. lowercase 选中小写
  11. h1-h6 标题
  12. list-ul 无序列表
  13. list-ol 有序列表
  14. hr 分割线
  15. link 链接
  16. reference-link 引用链接
  17. image 图片
  18. code 行内代码
  19. preformatted-text 代码块,缩进风格
  20. code-block 代码块,多语言风格
  21. table 表格
  22. datetime 日期时间
  23. emoji 表情
  24. html-entities html实体字符
  25. pagebreak 插入分页符
  26. goto-line 跳转到行
  27. watch 实时预览
  28. preview 全窗口预览
  29. fullscreen 全屏
  30. clear 清空
  31. search 搜索
  32. help 帮助
  33. info 关于编辑器

  34. ## 配置项
  35. lineNumbers: false, 取消行号
复制代码

做到这里发布表单编辑器已经是editor.md了。

三、解析

使用editor.md编辑器保存的内容为markdown格式,并不是像原来那样直接保存为含有html标签的内容,这就需要对markdown进行解析,有两种方式,一种是利用编辑器自带的js解析,另一种是用php解析。以下任选其一即可。

1.js解析:

打开当前风格home/space_blog_view.htm文件,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
放到
  1. <!--{template common/header}-->
复制代码
之下。

再将
  1. <div id="blog_article" class="d cl">
  2. <!--{ad/blog/a_b}-->
  3. $blog[message]
  4. </div>
复制代码
替换为
  1. <div id="blog_article"><textarea style="display:none;">{$blog['message']}</textarea></div>
复制代码

最后再将
  1. <script src="/markdown/lib/marked.min.js"></script>
  2. <script src="/markdown/lib/prettify.min.js"></script>
  3. <script src="/markdown/editormd.js"></script>
  4. <script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>
复制代码
放到
  1. <!--{template common/footer}-->
复制代码
之前

这样就可以正常解析日志文件内容了。

2.php解析

首先,将markdown解析文件上传至/source/function目录里。
链接: https://pan.baidu.com/s/18qIRiEu2dAJmfX56Z3zomw 提取码: 8jqq

其次,和上面一样打开当前风格home/space_blog_view.htm文件,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
放到
  1. <!--{template common/header}-->
复制代码
之下。
再找到
  1. <div id="blog_article" class="d cl">
复制代码
改为
  1. <div id="blog_article" class="markdown-body editormd-preview-container cl">
复制代码

再打开/source/include/space/space_blog.php文件,找到顶部
  1. if(!defined('IN_DISCUZ')) {
  2.         exit('Access Denied');
  3. }
复制代码
其下增加
  1. require_once libfile('function/parser');
  2. $parser = new HyperDown\Parser;
复制代码
再找到
  1. $blog['message'] = blog_bbcode($blog['message']);
复制代码
注释掉,其下增加
  1. $blog['message'] = $parser->makeHtml(stripslashes($blog['message']));
复制代码

结束。
如此,日志文章markdown内容由php进行解析。

## 简单说明下两种解析区别:
用js解析,在页面打开时,不会第一时间显示出内容来(因为display:none),需要等待编辑器相关js加载完成才能将内容显示,且在查看网页源代码时,日志内容部分是在文本框标签内,以markdown格式纯文本存在。对于markdown语法支持较为完整。

用php解析,因为是在变量输出时就是已解析的内容,所以会在页面打开时直接展示,且在查看网页源代码时,是以html格式存在。此解析方式缺点是对markdown语法支持的不完整,像什么公式、流程图、时序图、锚点目录之类的通通不行。

四、图片上传

图片上传用的是示例所用的代码,管用,但是安全性不清楚。文件位置/markdown/files/upload_blog.php,里面的路径是/uploads/blog/,表示,需要在根目录创建/uploads/blog,注意权限。
这个编辑器本身不支持多图上传,但是有人经过开发可以实现多图上传,由于我不需要,暂时也没琢磨它。
由于我php水平有限,这个图片路径调整起来很费劲,如果你要改保存路径和文件命名,只能自己测试,如果错误了,是没有返回地址的。

至此修改完全结束。
何日君再来 发表于 2019-2-18 15:10
可以用在门户文章吗

当然可以。
改完写出来。
可以用在门户文章吗

回复主题

已有 2 条回复
您需要登录后才可以回帖 登录 | 注册
高级模式

关于楼主
管理员
帖子
1427
日志
41
精华
19
精华推荐