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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

【已测试,上传图片js起冲突】discuz x3.4 替换门户文章编辑器为markdown

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

DZ站长建站交流群:493651246

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


方法和之前写的替换日志编辑器类似,而且还是editormd。' T! @: }% U' I1 J7 {  l) b; O: d! z

) \$ \3 r: R( ^- Y# A常识: z2 ~$ W4 }6 C8 p1 e& j m
需要引入jquery.js或压缩的(jquery.min.js)都行,测试版本为2.0.0。
% f" E) ?: x! ~4 ^# ^注意防止和common.js冲突,具体方法百度一下你就知道。, h! R8 T) X6 H) ^# T

7 I: `# d0 L Y" p* r2 W/ ?3 c, [修改头部全局,防止JS冲突:
  h; o6 o8 N" y1、进入template——default 或当前使用模板——portal——portalcp_article.htm 打开文件搜索代码
  1. <!--{template common/header}-->
复制代码
修改为
  1. <!--{template common/headerbj}-->
复制代码
2、template——default——common——复制一份header.htm并重命名为headerbj.htm( n8 s U2 ~- F' ?/ u4 x& \. T' R v
3、打开重命名文件headerbj.htm,搜索代码
  1. static/js/code/styles/shThemeDefault.css"/>
复制代码
在其下方增加代码
  1. <script>jQuery.noConflict();</script>
    - a0 z* ^& w/ @' n2 E
  2. <script type="text/javascript" src="static/js/code/scripts/jquery-1.8.3.min.js"></script>
复制代码
游客,如果您要查看本帖隐藏内容请回复

# W- \3 e  l1 H3 J8 X& J* d/ {1 O1 Q& N* S
一、替换编辑器8 ~$ P  L$ O, z' {. K
1.上传编辑器文件
7 _, h3 u( r; P y链接: https://pan.baidu.com/s/1AaMY3_8uq0__2p7EPR2xyw 提取码: qahw
$ Z3 C# e& M F将压缩包解压出来,markdown文件夹上传至网站根目录。
; t, B$ w. [1 p
) @2 `( Q% W* I- O  Y' u/ Q: n2.修改发布页面模板/ @$ k4 X1 A o9 X
打开模板风格目录/portal/portalcp_article.htm(非默认模板可能没有,从default里复制一份到当前风格目录)。" Y% ^( @  V8 g" J: U& R
找到第一行,
  1. <!--{template common/header}-->
复制代码
下面加上引用css
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
再找到,
  1. <script type="text/javascript" language="javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
    3 J# e* w5 P! j* V/ Y1 m% x% ?3 j
  2. <!--{subtemplate home/editor_image_menu}-->6 q0 x. T/ j  K% a8 D" Z
  3. <textarea class="userData" name="content" id="uchome-ttHtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px">$article_content[content]</textarea>
    ) G6 Y' C4 h0 q
  4. <div style="border:1px solid #C5C5C5;height:400px;"><iframe src="home.php?mod=editor&charset={CHARSET}&allowhtml=1&isportal=1" name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;height:100%;position:relative;"></iframe></div>
复制代码
替换为
  1. <div id="editormd"><textarea class="userData" name="content" id="uchome-ttHtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px">$article_content[content]</textarea></div>
复制代码
再找到,
  1. <!--{template common/footer}-->
复制代码
之上加
  1. <script type="text/javascript" reload="1">7 U. d3 E& g6 I8 _  x7 X S3 B
  2.     jQuery.getScript("/markdown/editormd.js", function(){
    % v. S. d7 }# c
  3.      editormd("editormd", {
    * @* ^9 t" I& h9 c8 A: C! a9 i
  4.      width   : "100%",
    & x# U. v( ~) w: a6 B- ~
  5.      height  : 640,; p3 I2 `* g6 N* E6 h8 ^! A6 ~
  6.      syncScrolling : "single",0 `# v/ I3 }1 v5 O
  7.      path    : "/markdown/lib/",, r0 \4 @1 ^  D
  8.      watch   : false,3 q6 h$ h% J# b) H9 \  y
  9.      htmlDecode: "style,script,iframe|on*",% y! q$ ]5 O f' p# s& H& V
  10.      toc: true,
    & `: w4 S6 `* n$ p
  11.      tocm: true,
    7 s; `: ?0 o$ ~
  12. tex: true,
    6 W& `& D. T0 {
  13.      flowChart: true,, M" R" H2 E$ p ^$ F4 n: x# N
  14.      sequenceDiagram: true,
    3 g2 E  I g0 s/ j! x
  15.      lineNumbers: false,
    : A! M( F9 l$ F3 ^
  16.       toolbarIcons : function() {9 k5 {6 W$ d2 J3 T4 ~ ~# g
  17.         return ["bold","italic","del","|","h1","quote","code-block","list-ol","list-ul","hr","|","link","image","table","|","watch","preview","fullscreen"]2 j4 ~5 p% U$ m/ G. k
  18.       },1 N! a8 c) C9 r
  19.       theme : "",
    6 Z5 w1 W) t  W* G4 F! a" N/ i
  20.       previewTheme : "",
    \/ J2 q0 t6 U7 F2 q
  21.       editorTheme : "",
    0 T, Y& q, {- C0 K1 X
  22.       imageUpload : true,
    $ m% [! }2 ^1 v( p& [1 @9 a
  23.       imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],! j8 \2 m3 G- v
  24.       imageUploadURL : "/markdown/files/upload_article.php",
    ) s, d  C7 A4 d8 g
  25.       saveHTMLToTextarea : true# a3 Q6 }4 w$ g" I( e9 }# j
  26.   });7 v/ H8 l7 O M2 D
  27. });% L: x) B; x1 o4 L  t/ O7 T
  28. </script>
复制代码
这样发布页面就替换完成。: `* o$ Y# ^  ^; u9 [7 [
上文所述需要注意:8 M/ t8 k, R; t& Z1 g! Y" E. T# N
1.为防jq冲突,在全局头部head里jquery.min.js之下加了<script>jQuery.noConflict();</script>,所以页面里所有新加jq代码的$都改成了jQuery,这是discuz防jq冲突的常用方法之一。# n* n3 F' Y# O( u; D0 [
2.上传图片文件upload_article.php待补充。
2 L6 _) {' F7 F5 G; u) z
5 h/ Q/ X# M9 X* S9 T) C" n# T二、解析markdown
6 x6 _7 d9 f: K; Hphp和js两种方式,这里只写下我用的php方式。1 n4 F' z) b6 ^1 D- d5 T

: u: h; J6 C7 b& O1 A7 S0 B/ s1 \1.将markdown解析文件上传至/source/function目录里。# D# v( R# e9 |- P! A1 g# D
链接: https://pan.baidu.com/s/1FOuhZScUUApHg4RVcrEX2Q 提取码: fhrd/ t2 r. v; l, l: B2 ]
游客,如果您要查看本帖隐藏内容请回复

  B5 {* X: R4 M/ o/ l) C2.打开/source/module/portal/portal_view.php" j9 J' g( F8 f" m' D5 {
  1. if(!defined('IN_DISCUZ')) {% X8 ]7 S$ L- G  M9 [
  2.     exit('Access Denied');* w: o( I4 j' b2 Q X. u* H  ]9 f8 W
  3. }
复制代码
之下加上
  1. require_once libfile('function/parser');
    & o) n, J: ~: V1 R) u& v% i: f
  2. $parser = new HyperDown反斜杠Parser;
复制代码
4 N" L6 M- a: B8 i/ e
再找到
  1. $content['content'] = blog_bbcode($content['content']);
复制代码
其下加上
  1. $content['content'] = $parser->makeHtml(stripslashes($content['content']));
复制代码
这样文章内容解析出来就是含有html元素的了。& O3 P; u2 r# m! d) o
说明:将(反斜杠)修改为\
( M$ F6 I' ?6 l d' @4 G2 P, _) s& L- `1 \0 Z# z* V
3.给解析出来的文章内容样式
' J  d* g2 g( x# E' Y! ]打开文章内容模板,默认是模板风格目录/portal/view.htm。( Y( g! l* o, S7 z6 [ M- o S. F4 y( I
找到,
  1. <!--{template common/header}-->
复制代码
其下加
  1. <link rel="stylesheet" href="/markdown/css/editormd.min.css">
复制代码
再找到,
  1. <!--{template common/footer}-->
复制代码
其上加
  1. <script src="/markdown/lib/prettify.min.js"></script>
    . A! v5 ?; V9 i) |5 w. T9 ^
  2. <script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>) `$ C. f# T/ I& a* ~% n
  3. // 这两行为代码高亮效果,不贴代码块的,可以不用。
复制代码
5 h9 U. k7 |/ D" M' S
editormd.min.css的提供样式也许不完美,既然敢改编辑器,样式就不应该是个问题。
6 | E0 e$ b1 L4 j, R# g" @  `9 Z1 y5 r d
到这修改结束。; A4 m2 s1 }4 ]' Y

2 b3 g) o! {4 e. I8 D  S; G或许也可以尝试完全换掉home编辑器,这样所有引用就全部转变,暂时还不敢这么干。

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




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

本版积分规则

广告

兔源码网 (公网安备36112102000036号 赣ICP备17001544号)

兔源码 QQ交流群:493651246  GMT+8, 2020-7-3 02:58
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

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

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