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

方法和之前写的替换日志编辑器类似，而且还是editormd。

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

修改头部全局，防止JS冲突：
1、进入template——default 或当前使用模板——portal——portalcp_article.htm 打开文件搜索代码

复制代码

修改为

复制代码

2、template——default——common——复制一份header.htm并重命名为headerbj.htm
3、打开重命名文件headerbj.htm，搜索代码

static/js/code/styles/shThemeDefault.CSS"/>

复制代码

在其下方增加代码

<script>jQuery.noConflict();</script>
<script type="text/javascript" src="static/js/code/scripts/jquery-1.8.3.min.js"></script>

复制代码

!qinai!游客!yincang_youke!

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

2.修改发布页面模板
打开模板风格目录/portal/portalcp_article.htm(非默认模板可能没有，从default里复制一份到当前风格目录)。
找到第一行，

复制代码

下面加上引用css

<link rel="stylesheet" href="/markdown/css/editormd.min.css">

复制代码

再找到，

<script type="text/javascript" language="javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
<textarea class="userData" name="content" id="uchome-tthtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px">$article_content[content]</textarea>
<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>

复制代码

替换为

<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>

复制代码

再找到，

复制代码

之上加

<script type="text/javascript" reload="1">
jQuery.getScript("/markdown/editormd.js", function(){
editormd("editormd", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "/markdown/lib/",
watch : false,
htmlDecode: "style,script,iframe|on*",
toc: true,
tocm: true,
tex: true,
flowChart: true,
sequenceDiagram: true,
lineNumbers: false,
toolbarIcons : function() {
return ["bold","italic","del","|","h1","quote","code-block","list-ol","list-ul","hr","|","link","image","table","|","watch","preview","fullscreen"]
},
theme : "",
previewTheme : "",
editorTheme : "",
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/markdown/files/upload_article.php",
saveHTMLToTextarea : true
});
});
</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

!qinai!游客!yincang_youke!

2.打开/source/module/portal/portal_view.php
在

if(!defined('IN_DISCUZ')) {
exit('Access Denied');
}

复制代码

之下加上

require_once libfile('function/parser');
$parser = new HyperDown反斜杠Parser;

复制代码

再找到

$content['content'] = blog_bbcode($content['content']);

复制代码

其下加上

$content['content'] = $parser->makeHtml(stripslashes($content['content']));

复制代码

这样文章内容解析出来就是含有html元素的了。
说明：将(反斜杠)修改为\

3.给解析出来的文章内容样式
打开文章内容模板，默认是模板风格目录/portal/view.htm。
找到，

复制代码

其下加

<link rel="stylesheet" href="/markdown/css/editormd.min.css">

复制代码

再找到,

复制代码

其上加

<script src="/markdown/lib/prettify.min.js"></script>
<script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>
// 这两行为代码高亮效果，不贴代码块的，可以不用。

复制代码

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

到这修改结束。

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

		自动登录	找回密码
密码			立即注册

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

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

相关帖子

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

【实测】Discuz修改论坛列表页排序，实现主题帖子按最新发表时间13人阅读

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程51人阅读

【原创】根据论坛发帖时间或门户文章发布时间，判断时间是否为当53人阅读

非手动网站版权年份自动更新代码53人阅读

【收集整理】兔源码简单收集整理关于网页上各meta标签说明48人阅读

【原创】分享一款html5+css3的浮窗多图DIY模块（百分百有效）0人阅读

【原创】分享一款html5+css3的浮窗单图DIY模块（百分百有效）0人阅读

【原创】分享一款html5+css3的横排导航列表DIY模块（百分百有效49人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百204人阅读

【转载】垂直时光轴HTML单页+CSS+js模块891人阅读

所属版块