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

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

开通本站Svip会员,全站资源免费下
方法和之前写的替换日志编辑器类似,而且还是editormd。

常识:
需要引入jquery.js或压缩的(jquery.min.js)都行,测试版本为2.0.0。
注意防止和common.js冲突,具体方法百度一下你就知道。

修改头部全局,防止JS冲突:
1、进入template——default 或当前使用模板——portal——portalcp_article.htm 打开文件搜索代码
  1. <!--{template common/header}-->
复制代码
修改为
  1. <!--{template common/headerbj}-->
复制代码
2、template——default——common——复制一份header.htm并重命名为headerbj.htm
3、打开重命名文件headerbj.htm,搜索代码
  1. static/js/code/styles/shThemeDefault.CSS"/>
复制代码
在其下方增加代码
  1. <script>jQuery.noConflict();</script>
  2. <script type="text/javascript" src="static/js/code/scripts/jquery-1.8.3.min.js"></script>
复制代码
亲爱的游客您好,请 登录 后进行 回复


一、替换编辑器
1.上传编辑器文件
链接: https://pan.baidu.com/s/1AaMY3_8uq0__2p7EPR2xyw 提取码: qahw
将压缩包解压出来,markdown文件夹上传至网站根目录。

2.修改发布页面模板
打开模板风格目录/portal/portalcp_article.htm(非默认模板可能没有,从default里复制一份到当前风格目录)。
找到第一行,
  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>
  2. <!--{subtemplate home/editor_image_menu}-->
  3. <textarea class="userData" name="content" id="uchome-tthtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px">$article_content[content]</textarea>
  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">
  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","|","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_article.php",
  25.       saveHTMLToTextarea : true
  26.   });
  27. });
  28. </script>
复制代码
这样发布页面就替换完成。
上文所述需要注意:
1.为防jq冲突,在全局头部head里jquery.min.js之下加了<script>jQuery.noConflict();</script>,所以页面里所有新加jq代码的$都改成了jQuery,这是Discuz防jq冲突的常用方法之一。
2.上传图片文件upload_article.php待补充。

二、解析markdown
php和js两种方式,这里只写下我用的php方式。

1.将markdown解析文件上传至/source/function目录里。
链接: https://pan.baidu.com/s/1FOuhZScUUApHg4RVcrEX2Q 提取码: fhrd
亲爱的游客您好,请 登录 后进行 回复

2.打开/source/module/portal/portal_view.php
  1. if(!defined('IN_DISCUZ')) {
  2.     exit('Access Denied');
  3. }
复制代码
之下加上
  1. require_once libfile('function/parser');
  2. $parser = new HyperDown反斜杠Parser;
复制代码

再找到
  1. $content['content'] = blog_bbcode($content['content']);
复制代码
其下加上
  1. $content['content'] = $parser->makeHtml(stripslashes($content['content']));
复制代码
这样文章内容解析出来就是含有html元素的了。
说明:将(反斜杠)修改为\

3.给解析出来的文章内容样式
打开文章内容模板,默认是模板风格目录/portal/view.htm。
找到,
  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>
  2. <script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>
  3. // 这两行为代码高亮效果,不贴代码块的,可以不用。
复制代码

editormd.min.css的提供样式也许不完美,既然敢改编辑器,样式就不应该是个问题。

到这修改结束。

或许也可以尝试完全换掉home编辑器,这样所有引用就全部转变,暂时还不敢这么干。

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部