1 o! K8 K9 M6 ]: t& [( d
方法和之前写的替换日志编辑器类似,而且还是editormd。 常识:. N) G" } @" Y4 ?/ B
需要引入jquery.js或压缩的(jquery.min.js)都行,测试版本为2.0.0。
/ S8 B$ H: [8 q( W注意防止和common.js冲突,具体方法百度一下你就知道。 一、替换编辑器 2.修改发布页面模板
; ^% @ w6 R* Q! j打开模板风格目录/portal/portalcp_article.htm(非默认模板可能没有,从default里复制一份到当前风格目录)。. N8 H$ M5 y7 V/ H/ \
找到第一行, - <!--{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>
复制代码这样发布页面就替换完成。 ## 编辑器按钮代号: 6 B7 v) }" z+ _: B/ ?# p$ R
- ## 工具栏:
- 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, 取消行号
复制代码 b; F6 V9 I1 s) Q
上文所述需要注意:
- H8 c3 |& U. F% j4 G" T9 Z6 ^1.为防jq冲突,在全局头部head里jquery.min.js之下加了<script>jQuery.noConflict();</script>,所以页面里所有新加jq代码的$都改成了jQuery,这是discuz防jq冲突的常用方法之一。
9 k' S. p# M0 r2.上传图片文件upload_article.php待补充。
二、解析markdown v" b k G- p6 c9 W
php和js两种方式,这里只写下我用的php方式。 1.将markdown解析文件上传至/source/function目录里。
( d# g) k# M" _$ P! E% O) Z) c
【魔趣吧资源下载指南】--默认解压密码:www.moqu8.com
1,如有异常请按 F5 刷新本页面!
【资源维权反馈】
2,首发及精品资源受到保护,扣除趣币!趣币可通过分享资源免费获得!懒人也可选择充值!
3,【特别提示:】分享区资源未严格检查内部代码,使用前请自行检查!
|