立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

Discuz功能改进:在编辑器上添加两端对齐按钮

热度 5已有 1451 次阅读2015-10-6 01:01 AM |个人分类:Discuz| 编辑器

Discuz的各类编辑器的工具栏里都有三个调节一段文字位置的按钮:在日志和文章里叫左对齐,居中对齐和右对齐,在论坛里叫居左,居中和居右,大致对应于Word里的按钮 Align Text Left,Center,Align Text Right。但Word里还有Discuz里没有的第四个按钮 叫 Justify (两端对齐)。它的作用是让一个段落中除最后一行外的每一行都有同样的宽度,常用于书籍和杂志的排版。可以理解Discuz为什么不提供这个按钮,因为在中文里词之间不用空格分隔。但是考虑到在Discuz里用户也有贴英文文章的需要,还是以提供这个按钮更好。最近有网友问及如何添加这个功能,本文就讨论下这个问题。

我们现在看一下居左,居中,居右,和两端对齐的效果:
居左

I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.

居中

I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.

居右

I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.

两端对齐

I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.


在html里这几段文字的差异在于它们的align属性是left,center,right,还是 justify。而编辑器里这几个按钮的作用就是给选择的文字所在的段落加上这些属性值。我们在前文(链接)说过,这些作用的实现依赖于浏览器提供的execCommand函数,这个函数的第一个参数是commandName(指令名),浏览器支持多个指令。其中居左,居中和居右分别对应于指令justifyLeft, justifyCenter, justifyRight。而我们要加的两端对齐则对应于指令justifyFull。调用这些指令会改变编辑器里内容对应的html代码,特别是justifyLeft/justifyCenter/justifyRight/justifyFull这几个指令给选择内容所在的段落添加了align的值left/center/right/justify。

1。日志/文章编辑器

我们只需要在工具栏里添加新按钮,并设置给execCommand用的合适的指令名即可。 button.onclick (set in source/module/home/home_editor.php) -> format in static/image/editor/editor_base.js -> document.execCommand
下面是需要添加和修改的内容:
1) 造一个新按钮的透明图标 justify.gif 放在 static/image/editor/ 里 (按钮的图标必须是透明的,这样才能在鼠标在它上方时产生变色的效果):
2) 在语言包里添加新按钮上的文字。在文件里 source/language/home/lang_editor.php 添加: 'editor_align_justify' => '两端对齐', 3) 在定义编辑器的工具栏的文件 source/module/home/home_editor.php 里的下面这句 <a href="javascript:;" class="icoAgR" id="imgJustifyright" onClick="fGetEv(event);format('Justifyright');return false;" title="<?php echo lang('home/editor', 'editor_align_right'); ?>"></a> 后添加: <a href="javascript:;" id="imgJustifyfull" onClick="fGetEv(event);format('Justifyfull');return false;" title="<?php echo lang('home/editor', 'editor_align_justify'); ?>" style="background-image: url(static/image/editor/justify.gif)"></a>
2。论坛编辑器

论坛编辑器里加上同样的按钮则要复杂些。其主要原因是那里引入了关于align的bb代码。编辑器里的内容是html形式的代码,而在服务器里则储存为bb代码。前者如 <div align="justify">I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.</div> 而后者如 [align=justify]I find 1 interesting; I never thought of responsibility for comments, but it makes excellent sense. To me, 2 is something I decide in private, because I find it hard to articulate my exact tolerance, and it depends on my mood anyway. I implement 4 by deleting trolls.[/align] 两者的转换在提交时发生在客户端,而在数据库提取时则发生在服务器端。

下面是一些相关的代码结构:
1) 当点击编辑器工具栏里的按钮时: button.onclick (set in initesbar in static/js/editor.js) -> discuzcode in static/js/editor.js -> applyFormat in static/js/editor.js -> document.execCommand -> setContext in static/js/editor.js 2) 当点击保存贴子内容按钮时: form.onsubmit (defined in template/default/forum/post.htm) -> validate in static/js/forum_post.js -> html2bbcode in static/js/bbcode.js -> ptag/dstag/... in static/js/bbcode.js -> parsestyle in static/js/bbcode.js 3) 当点击纯文本按钮来转换编辑模式时: input.onclick (defined in template/default/forum/post_editor_body.htm) -> switchEditor in static/js/editor.js -> html2bbcode in static/js/bbcode.js -> ptag/dstag/... in static/js/bbcode.js -> parsestyle in static/js/bbcode.js 4) 当为显示网页从数据库里提取贴子内容时: source/module/forum/forum_viewthread.php -> viewthread_procpost in source/module/forum/forum_viewthread.php -> discuzcode in source/function/function_discuzcode.php
下面是在这些相关处需要添加和修改的内容:
1) 前面日志/文章编辑器修改步骤1)中添加的图标这里也同样需要。
2) 在语言包里添加新按钮上的文字。在文件里 source/language/forum/lang_template.php 添加: 'e_justify' => '两端对齐', 3) 在编辑器的工具栏里加入新按钮,在文件 template/default/forum/post_editor_body.htm 里的这句 <a id="{$editorid}_justifyright" title="{lang e_right}">Right</a> 后添加: <a id="{$editorid}_justifyfull" title="{lang e_justify}" style="background-image: url({STATICURL}image/editor/justify.gif)">Justify</a> 4) 修改按钮点击事件处理代码。在文件 static/js/editor.js 里要做数处改动:
4a) 在函数 applyFormat 中的这段 case 'justifyright': wrapTags('align', cmd.substr(7)); break; 后添加: case 'justifyfull': wrapTags('align', 'justify'); break; 4b) 将函数 discuzcode 中的这句 if (in_array(cmd, ['bold', 'italic', 'underline', 'strikethrough', 'fontname', 'fontsize', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'floatleft', 'floatright', 'removeformat', 'unlink', 'undo', 'redo'])) { 改为 if (in_array(cmd, ['bold', 'italic', 'underline', 'strikethrough', 'fontname', 'fontsize', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'floatleft', 'floatright', 'removeformat', 'unlink', 'undo', 'redo'])) { 4c) 将函数 setContext 中的这句 var contextcontrols = new Array('bold', 'italic', 'underline', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist'); 改为 var contextcontrols = new Array('bold', 'italic', 'underline', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist'); 5) 修改在客户端处理用户提交贴子的代码包括将 html 代码转换成 bb 代码的处理。修改 static/js/bbcode.js 里的函数:
5a) 将函数 dstag 中的这句 if(in_array(align, ['left', 'center', 'right'])) { 改为 if(in_array(align, ['left', 'center', 'right', 'justify'])) { 5b) 修改函数 ptag 里的三句代码:
5b-1) 将这句 re = /text-align\s?:\s?(left|center|right)/i; 改为 re = /text-align\s?:\s?(left|center|right|justify)/i; 5b-2) 将这句 align = in_array(align, ['left', 'center', 'right']) ? align : 'left'; 改为 align = in_array(align, ['left', 'center', 'right', 'justify']) ? align : 'left'; 5b-3) 将这句 style = preg_replace(['line-height\\\s?:\\\s?(\\\d{1,3})px', 'text-indent\\\s?:\\\s?(\\\d{1,3})em', 'text-align\\\s?:\\\s?(left|center|right)'], '', style); 改为 style = preg_replace(['line-height\\\s?:\\\s?(\\\d{1,3})px', 'text-indent\\\s?:\\\s?(\\\d{1,3})em', 'text-align\\\s?:\\\s?(left|center|right|justify)'], '', style); 5c) 将函数 parsestyle 中的这句 ['align', true, 'text-align:\\s*(left|center|right);?', 1], 改为 ['align', true, 'text-align:\\s*(left|center|right|justify);?', 1], 6) 最后我们还要修改提取储存的贴子后将 bb 代码转换成 html 代码的处理。在文件 source/function/function_discuzcode.php 里函数 discuzcode 中的这句 "/\[align=(left|center|right)\]/i", 改为 "/\[align=(left|center|right|justify)\]/i",

注:基于Discuz3.2 20150609版的相关改动文件可在这里下载 (链接)

发表评论 评论 (25 个评论)

回复 firstuanl 2016-11-25 03:07 AM
谢谢。这个重要。

我想在论坛编辑器中默认就是2端对齐,要哪里再修改一下,改了点地方都没见到效果。

你好。
回复 e0759 2016-9-12 10:39 AM
天香公主: 欢迎新网友来一起讨论。
没觉得"换行需要按两次回车",是偶尔发生还是总是这样,是某种浏览器特有的现象?
"有时候插入图片换行不成功",好象当内容复杂时遇 ...
是编辑器的bug,这个问题当时和discuz的负责人提过,后来他们打了一次补丁,可惜只fix了按两次回车才能换行的bug(你文章内容非常多,有图文的时候,还是会出现换行不成功),偶尔换行不成功和内容末尾插入多余空白行的bug依然存在。x3之后的版本都会有这样的问题。
回复 天香公主 2016-9-12 10:14 AM
e0759: 自discuz x3.0版本以来,编辑器都是有换行的bug,换行需要按两次回车(有时候插入图片换行不成功),发帖的时候内容会在最末加入几个空白行。天香公主你们的站的 ...
欢迎新网友来一起讨论。
没觉得"换行需要按两次回车",是偶尔发生还是总是这样,是某种浏览器特有的现象?
"有时候插入图片换行不成功",好象当内容复杂时遇到过。
彼岸网用的是3。1版本,估计其它网站有的问题这里也会有的吧。
同意。不过我的兴趣主要是学习Discuz系统,而不是修正或改进它。
回复 e0759 2016-9-12 09:51 AM
自discuz x3.0版本以来,编辑器都是有换行的bug,换行需要按两次回车(有时候插入图片换行不成功),发帖的时候内容会在最末加入几个空白行。天香公主你们的站的编辑器有没有这些问题?很希望有人能fix这些bug,或者改进discuz的编辑器。
回复 a1980 2015-12-9 10:29 PM
天香公主:    不客气啦。欢迎有空暇时来这一起讨论
好的,我已經把您的網誌加入到書籤裡了,覺得可以在您這邊學到好多東西,由衷感謝!
回复 天香公主 2015-12-9 10:04 PM
a1980: 真是辛苦您了!謝謝!
   不客气啦。欢迎有空暇时来这一起讨论
回复 a1980 2015-12-9 09:09 PM
天香公主: 谢谢指正。我修改了4a,并添加了5b-1, 5b-3, 和 5c。文末的下载链接也更新过了。请再试试。
真是辛苦您了!謝謝!
回复 a1980 2015-12-9 09:08 PM
天香公主: 谢谢指正。我修改了4a,并添加了5b-1, 5b-3, 和 5c。文末的下载链接也更新过了。请再试试。
真的很謝謝天香公主的幫忙,小弟真的感激不盡,您這樣不辭辛勞的幫助大家,真的很謝謝你!
回复 天香公主 2015-12-9 06:28 PM
a1980: 感謝天香公主回信,我剛剛已經回信給您,謝謝您的幫忙
谢谢指正。我修改了4a,并添加了5b-1, 5b-3, 和 5c。文末的下载链接也更新过了。请再试试。
回复 a1980 2015-12-8 03:11 AM
天香公主: 欢迎新朋友。我刚给你发了邮件。如果没收到的话,请电邮 txgz999@yahoo.com
感謝天香公主回信,我剛剛已經回信給您,謝謝您的幫忙
回复 天香公主 2015-12-7 07:59 AM
a1980: 我想請問一下,我是DX3.2 UTF8繁體,很感謝這篇文章,因為真的很需要,可是,我將檔案下載覆蓋後,發現使用之後,發現代碼會自動消失,並不會真的執行左右對齊, ...
欢迎新朋友。我刚给你发了邮件。如果没收到的话,请电邮 txgz999@yahoo.com
回复 a1980 2015-12-7 01:18 AM
我想請問一下,我是DX3.2 UTF8繁體,很感謝這篇文章,因為真的很需要,可是,我將檔案下載覆蓋後,發現使用之後,發現代碼會自動消失,並不會真的執行左右對齊,在帖子編輯器裡,因此很苦惱,請問作者有辦法幫忙一下嗎?
小弟感激不盡
小弟的信箱service@jackliu.com.tw
回复 aikato 2015-10-12 09:57 AM
小时候很迷茫: 百度编辑器其实也不错的,你可以去操作一下
有空的話去摸索一下怎樣搞,因為都沒搞懂太多 php 跟 js 跟 database 的東西唷
回复 小时候很迷茫 2015-10-12 12:15 AM
aikato: 原來是這樣子喔 0.0
辛苦了 (拍拍背)
百度编辑器其实也不错的,你可以去操作一下
回复 aikato 2015-10-11 11:21 AM
小时候很迷茫: 这个以前尝试过,花了大概有10天时间,最后已失败而告终
原來是這樣子喔 0.0
辛苦了 (拍拍背)
回复 小时候很迷茫 2015-10-10 05:23 AM
天香公主: 期待中,最好也说说帝国强在哪里比如哪些东西在帝国里能实现而在Discuz里就做不到。
帝国能实现的discuz也可以做到的,就拿个最简单的资讯功能来说,在帝国就可以很完美的实现资讯想要的功能及其效果。但是在discuz上面来做资讯就相对比较麻烦;这两个系统我觉得互补性还不错,discuz适合做交互类型的网站,而帝国就适合做新闻门户这类的网站。从B2B O2O 这类角度来说,discuz就不是一般的弱了,虽然应用中心有很多该类的模版与插件,但是却不适合消费人群;而帝国却是相反,它可以完美的让商品(作品)进行不同形式的内容展示,在SEO上面也有其独到的优势,这点discuz就做不到了。二开或者修改核心文件这又另当别论,帝国适合新手建站,discuz适合懂些许代码的朋友
回复 小时候很迷茫 2015-10-10 05:16 AM
天香公主: 你是说你在Discuz里用百度编辑器替换了Discuz编辑器?那很有意思,值得分享
替换是替换了,但是有些功能还是没有实现 只是实现了我想要的效果,因为我是做的一个图片上传站,当时只保留了上传图片跟简单的排版功能。附件还有视频这些都是报错
回复 小时候很迷茫 2015-10-10 05:14 AM
aikato: 其實挺想知道怎樣能用 markdown 編輯器取代 discuz 內的 bbcode editor 唷
这个以前尝试过,花了大概有10天时间,最后已失败而告终
回复 天香公主 2015-10-9 10:45 AM
小时候很迷茫: 功能虽小,作用还是蛮大滴;我整合了百度编辑器

    我商铺也差不多快做完,最近在整理一篇关于帝国生成的教程,到时候欢迎来点评 ...
你是说你在Discuz里用百度编辑器替换了Discuz编辑器?那很有意思,值得分享
回复 aikato 2015-10-9 09:38 AM
小时候很迷茫: 功能虽小,作用还是蛮大滴;我整合了百度编辑器

    我商铺也差不多快做完,最近在整理一篇关于帝国生成的教程,到时候欢迎来点评 ...
其實挺想知道怎樣能用 markdown 編輯器取代 discuz 內的 bbcode editor 唷
12下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-8-21 11:54 AM , Processed in 0.064769 second(s), 19 queries.

返回顶部