Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

【已测试,上传图片js起冲突】discuz x3.4日志编辑器更换为editor.md

 关闭 [复制链接]
tuyuanma 发表于 2020-1-7 11:31:45 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


先把编辑器放上。' q" v- y5 C. y
editor.md官网示例:http://pandao.github.io/editor.md/examples/full.html
3 i% R1 a3 I* q* u下载链接: https://pan.baidu.com/s/1-7nJhpPgCupMd8ebQMYMMA 提取码: b8fw
5 k" P+ Y4 Y# r6 B0 P我对部分js和css文件稍有改动。
) I/ l# Z% \8 [ 1.png
5 v9 J! I" g4 F& `( \开始:+ l; }+ g7 I: i9 z8 }
一、安装
+ T- C6 t) W1 M- k
将压缩包解压出来,markdown文件夹上传至网站根目录。
$ m' `+ Z. F! N; x" N- X( e% ?. u7 }+ {5 \* l( L
二、修改
1 {, X" n' _" @7 F) Y0 m打开当前风格里home/spacecp_blog.htm,如果没有的,从default目录里复制一份传到当前风格目录。强烈反对直接对default里文件做修改。
8 I* h- S2 ?' V# U1.引入css,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码

) Q5 L; v0 [. k/ p$ D放到头部引用
  1. <!--{template common/header}-->
复制代码
之下。1 \( k' c' A7 u- Z# H
2.删除默认编辑器的相关代码
  1. <script type="text/javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
    , o. z% T+ v: x( O
  2. <!--{subtemplate home/editor_image_menu}-->7 o5 u6 @/ ^% u. V+ J" l8 R. ^
  3. <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.文本框修改
+ p2 `8 |2 e) @" }) Q
  1. <textarea class="pt" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0">$blog[message]</textarea>
复制代码
5 K* z0 H* ?9 i  H5 s7 U: u
改为
  1. <div id="editormd"><textarea class="pt" name="message">$blog[message]</textarea></div>
复制代码
并在其下增加
  1. <script type="text/javascript" reload="1">
    1 K& ]; Z! h& r( }
  2. jQuery.getScript("/markdown/editormd.js", function(){
    ' p) Q: M6 t2 b4 O" x0 N
  3.         editormd("editormd", {
    . a: s0 |( y3 Q6 K6 c
  4.      width   : "100%",$ `+ q( B1 C4 p- w: y
  5.      height  : 640,1 M2 Q3 G, Q6 U6 K* |* U! \+ z
  6.      syncScrolling : "single",
    # t" C9 w4 D! |
  7.      path    : "/markdown/lib/",) ^8 u8 N/ Q9 T; e/ [0 L( X
  8.      // watch   : false,, ~1 w7 t7 w1 v/ J* }. M
  9.      htmlDecode: "style,script,iframe|on*",
    . Q2 \; S/ C1 B  z  ?
  10.      toc: true,% ^! ^: L" @# s- x% w
  11.      tocm: true,
    6 f3 m# _2 g" j! [& Q% g8 |
  12. tex: true,
    ; F- Y' j4 ?8 k' {# r# v# u2 e
  13.      flowChart: true,
      z, |* r/ Y4 S& `1 f$ o/ J
  14.      sequenceDiagram: true,; l* i) L* I/ W7 @: t, W
  15.      lineNumbers: false,
    * @- @8 F- H: S' Q
  16.       toolbarIcons : function() {
    ' W) Q( t( F2 E3 X
  17.         return ["bold","italic","del","italic","|","h1","quote","code-block","list-ol","list-ul","hr","|","link","image","table","|","watch","preview","fullscreen"]
    3 K8 ^/ r6 g0 R' |1 n  s; x
  18.       },, K0 b2 T6 R/ q, M. u
  19.       theme : "",
    - l8 j" E% W9 }+ e" s
  20.       previewTheme : "",
      g/ C+ ?8 d: Z" l0 n6 F9 V) Z5 u
  21.       editorTheme : "",
    ( B6 A7 x, }+ e; ]8 H* U! k
  22.       imageUpload : true,( X" x* B6 d7 [: L6 F7 y4 V
  23.       imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],* S6 k, u9 f& j& |  ]9 g
  24.       imageUploadURL : "/markdown/files/upload_blog.php",8 f* t. {# e: E, C8 O/ r) o$ z7 N; y
  25.       onload : function() {
    / I7 h# \  j6 s- f1 k, ]
  26.         console.log('onload', this);7 w! J8 L& ~" d# w
  27.         /*this.fullscreen(- o/ I7 r+ a/ N+ c: J$ B
  28.                 jQuery("header").addClass("z-0")9 K2 k6 [( \. L. @
  29.         );*/
    % \2 L9 p) D& @$ P7 `# o* ]/ J
  30.         //this.unwatch();
    . _' C2 ~  V% @' y' R
  31.         //this.watch().fullscreen();
    ( @8 R/ j: o) i
  32.         //this.setMarkdown("#PHP");
    7 H% A: N) c# l( e
  33.         //this.width("100%");  S8 C& {: ^! Q* \
  34.         //this.height(480);
    2 }9 P9 ]# F2 _2 W; n: O
  35.         //this.resize("100%", 640);
    6 R+ B% m0 t, j0 E, T# N8 L: X- ]
  36.     },
    ; d# Y2 i! C$ C) Y1 a5 I) r; F/ M( `
  37.       saveHTMLToTextarea : true
    - m0 [+ l* _! e2 ]% m- `, F
  38.   });( X' B' {) x5 s# p2 O5 v
  39. });
    5 H* c; ]' l+ f/ y4 T
  40. </script>
复制代码
## 其中jQuery.getScript("/markdown/editormd.js", function()部分的js文件可以单独拿出来引用,因我在使用时,经常用到ajax获取,为了防止失效才在js代码里用getScript()。## 其中编辑器那些按钮,我是限定了部分显示,这些是我需要的,如果你要显示全部按钮,就注释掉toolbarIcons : function() {}这部分,即使用默认全部按钮。
. N" W3 B: `& X1 I; G## 编辑器按钮代号:# k$ d5 t! ]7 C
## 工具栏:
  1. undo 撤销: _) f8 q, @) \+ H. A- i8 D& R
  2. redo 重做
    8 C4 [8 v7 t8 L0 ]
  3. bold 粗体
    4 v8 n+ z0 K; }' y
  4. del 删除线
    ) I3 f6 e: \; D: M. o
  5. italic 斜体: m) h" s5 Q% J# g% i( {
  6. quote 引用' Z" Q% G5 F0 F: f
  7. ucwords 首字母大写
    - d' K  ]  J3 p0 Z4 ~7 i2 R# m
  8. uppercase 选中大写. |6 E- {! i) x0 [5 W1 m
  9. lowercase 选中小写
    1 v. X8 |( e7 ~: X; o- O4 A
  10. h1-h6 标题9 R0 W4 |# |+ l- ]1 \: a
  11. list-ul 无序列表( X# i# g6 [5 E- u2 T
  12. list-ol 有序列表
    ' Z. N3 a; y1 q- L$ D
  13. hr 分割线4 z% h7 S; U, l
  14. link 链接7 q* O# u2 D  i1 p) {
  15. reference-link 引用链接
    # s6 l, t9 ~- d
  16. image 图片- z" o8 t9 {& B
  17. code 行内代码
    $ \% s8 Q8 w; \/ j/ \
  18. preformatted-text 代码块,缩进风格1 j+ Z7 f0 h+ J  i
  19. code-block 代码块,多语言风格, P  b9 A. v8 X' U3 \" z  ^
  20. table 表格% P1 U& R; A+ u9 ^
  21. datetime 日期时间' }' n: J& @0 z' s' I
  22. emoji 表情
    , E; p2 P2 j  N4 K
  23. html-entities html实体字符
    2 \8 r- K- H( u8 [
  24. pagebreak 插入分页符
    - L+ j! h# C5 @( }" Z' e
  25. goto-line 跳转到行
    4 Y* H, R: g/ Q! L5 s! B
  26. watch 实时预览. }, U, C9 [% @* e% T
  27. preview 全窗口预览
    9 `  p7 w( f# ]4 t; j7 |! ~, r
  28. fullscreen 全屏- m0 J1 o. Q/ Z/ _
  29. clear 清空
    0 b. Q$ A* C& D& S7 B+ y9 Q5 e
  30. search 搜索
    ' K4 S8 u, {8 m. l) T
  31. help 帮助
    8 l5 B9 U0 l# L4 }- }% s3 d
  32. info 关于编辑器
复制代码
## 配置项6 o( ?3 }5 a/ U. q1 t
lineNumbers: false, 取消行号
" E' r+ z5 Y1 }! n/ Z3 V$ d
( H0 _' H2 D' G- T& S8 G做到这里发布表单编辑器已经是editor.md了。
! x8 x2 x: W3 ~2 ]; n: l
8 i, [: L# {5 u三、解析

7 H; v+ u; b' W/ c使用editor.md编辑器保存的内容为markdown格式,并不是像原来那样直接保存为含有html标签的内容,这就需要对markdown进行解析,有两种方式,一种是利用编辑器自带的js解析,另一种是用php解析。以下任选其一即可。
( n4 x& X6 e* S& P) T9 G# H* I6 o2 P. D/ f  n' l- o8 H
1.js解析:
$ G  _/ n2 J! h+ p7 }打开当前风格home/space_blog_view.htm文件,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
放到
  1. <!--{template common/header}-->
复制代码
之下。
8 N) A* K( Z$ G0 T+ i; v8 I5 Q5 _- F7 M% l" B- l2 M! |
再将
  1. <div id="blog_article" class="d cl">
    0 L4 l  R7 b8 p
  2. <!--{ad/blog/a_b}-->
    + J4 O9 V9 r3 R( `5 R( r3 c) Q
  3. $blog[message]
    % `/ Z; R  x4 s1 u0 l. h# |3 o' z: a3 @
  4. </div>
复制代码
替换为
  1. <div id="blog_article"><textarea style="display:none;">{$blog['message']}</textarea></div>
复制代码
最后再将
  1. <script src="/markdown/lib/marked.min.js"></script>6 P6 B" S5 G. S6 Z- D3 |* ?
  2. <script src="/markdown/lib/prettify.min.js"></script>1 T0 F8 H3 q* B7 g
  3. <script src="/markdown/editormd.js"></script>
    . @, Q$ W  H" V1 H& o  ]6 [% E
  4. <script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>
复制代码
放到
  1. <!--{template common/footer}-->
复制代码

: s9 k0 X6 v) Y: |8 M. r之前, E" i9 N' {+ V& l" i, d8 |) n1 J

! ~+ U8 Y1 O( z. c这样就可以正常解析日志文件内容了。+ A; w8 L: `3 y5 |

1 x% J- X& W5 O% ]2.php解析
7 {+ j; h$ G1 N+ U& b  X首先,将markdown解析文件上传至/source/function目录里。: W& Q$ @2 ?5 p$ R4 t; t
链接: https://pan.baidu.com/s/1OM2vxBTWFwI1eOPnya8PHg 提取码: jxy9  d/ \  }8 h7 R' ?

  E' t/ N1 U) E' @  {其次,和上面一样打开当前风格home/space_blog_view.htm文件,将
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
放到
  1. <!--{template common/header}-->
复制代码
之下。
0 S3 }4 M9 ^  K( c0 v再找到
  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文件,找到顶部# m: e- X3 C$ ^& B$ ~+ M! I
  1. if(!defined('IN_DISCUZ')) {( E: i8 B0 S4 ~1 }* a$ c! W! d. q$ O
  2.         exit('Access Denied');) v  B6 J! D( X# a: V9 h) `
  3. }
复制代码
其下增加
  1. require_once libfile('function/parser');
    , d2 f# b& e" ^  f: |7 A% r0 k
  2. $parser = new HyperDown\Parser;
复制代码
再找到
  1. $blog['message'] = blog_bbcode($blog['message']);
复制代码
注释掉,其下增加
  1. $blog['message'] = $parser->makeHtml(stripslashes($blog['message']));
复制代码
结束。
" _- \8 z" K$ B" N% Q如此,日志文章markdown内容由php进行解析。& Q/ e: L2 v2 ?! ~0 ^9 k, W$ B

8 f+ d* y8 p! p## 简单说明下两种解析区别:* \- I1 M- ?& C7 V9 e* t4 I
用js解析,在页面打开时,不会第一时间显示出内容来(因为display:none),需要等待编辑器相关js加载完成才能将内容显示,且在查看网页源代码时,日志内容部分是在文本框标签内,以markdown格式纯文本存在。对于markdown语法支持较为完整。: M0 _6 g* Z, b1 E

7 x' T. m4 U4 O) H: _! e用php解析,因为是在变量输出时就是已解析的内容,所以会在页面打开时直接展示,且在查看网页源代码时,是以html格式存在。此解析方式缺点是对markdown语法支持的不完整,像什么公式、流程图、时序图、锚点目录之类的通通不行。
( p2 A" f4 o/ k8 d( O5 t6 n1 X2 W2 H' q) R4 O  T% Q: r6 ~5 Z
四、图片上传/ j9 j. u/ z' K: L5 w  h! e
图片上传用的是示例所用的代码,管用,但是安全性不清楚。文件位置/markdown/files/upload_blog.php,里面的路径是/uploads/blog/,表示,需要在根目录创建/uploads/blog,注意权限。
0 a- i9 |6 W0 k+ y4 H# n8 R这个编辑器本身不支持多图上传,但是有人经过开发可以实现多图上传,由于我不需要,暂时也没琢磨它。6 g8 |2 ?) W7 M% g* Y7 u
由于我php水平有限,这个图片路径调整起来很费劲,如果你要改保存路径和文件命名,只能自己测试,如果错误了,是没有返回地址的。* J2 v) n/ q9 i/ \" h! T! B

9 S: j# n8 b& s/ q5 u  l/ _0 l+ {至此修改完全结束。
$ w# w. S1 e( P/ q
6 l5 I9 J# z8 a; I: k5 p在使用jq代码时,需要引入jquery.js。
$ x0 s% n/ \  C0 T1 v1 m. C但是jquery.js和discuz的common.js冲突。+ s( X4 @( ~; m/ _, b& F7 p
所以需要对jq代码做下处理,引入jquery.js之后,再加一句<script>jQuery.noConflict();</script>,之后jq代码里的$换成jQuery。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告
493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表