discuz x3.4 替换门户文章编辑器为markdown-Discuz资源-魔趣建站-我们共同的建站资源共享平台！

discuz x3.4 替换门户文章编辑器为markdown [复制链接]

moqu8 2020-3-28

4181 0

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

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

一、替换编辑器

1.上传编辑器文件
下载地址: 链接: https://pan.baidu.com/s/1k3VfnEuSrI9Xo-sLlII4Xw 提取码: j6sb
将压缩包解压出来，markdown文件夹上传至网站根目录。

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

<!--{template common/header}-->

下面加上引用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>

<!--{subtemplate home/editor_image_menu}-->

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

再找到，

<!--{template common/footer}-->

之上加

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

这样发布页面就替换完成。

## 编辑器按钮代号：

## 工具栏：



undo 撤销

redo 重做

bold 粗体

del 删除线

italic 斜体

quote 引用

ucwords 首字母大写

uppercase 选中大写

lowercase 选中小写

h1-h6 标题

list-ul 无序列表

list-ol 有序列表

hr 分割线

link 链接

reference-link 引用链接

image 图片

code 行内代码

preformatted-text 代码块，缩进风格

code-block 代码块，多语言风格

table 表格

datetime 日期时间

emoji 表情

html-entities html实体字符

pagebreak 插入分页符

goto-line 跳转到行

watch 实时预览

preview 全窗口预览

fullscreen 全屏

clear 清空

search 搜索

help 帮助

info 关于编辑器



## 配置项

lineNumbers: false, 取消行号

上文所述需要注意：
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目录里。

点击下载 function_parser.zip(大小：8.55K)

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。
找到，

<!--{template common/header}-->

其下加

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

再找到,

<!--{template common/footer}-->

其上加

<script src="/markdown/lib/prettify.min.js"></script>

<script>jQuery("pre").addClass("prettyprint linenums");prettyPrint();</script>

// 这两行为代码高亮效果，不贴代码块的，可以不用。

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

到这修改结束。

==论坛发帖实现：【价值388元】Markdown编辑器 V1.2.0(zhanmishu_markdown)