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

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

日志

Discuz功能改进:iPad上编辑长博文的问题

热度 3已有 3156 次阅读2014-10-11 05:50 PM |个人分类:Discuz|系统分类:社交网理论与实践

在iPad上编辑博文时,博文的内容达到一定长度后会覆盖博文下方的选项和保存发布的按纽,使得我们无法保存博文。


出现这个问题的原因是在iPad上iframe(编辑框就是一个iframe)会自动扩张高度来容纳下它包括的所有内容,因而会超出包含它的div高度, 而覆盖那个div的下一个div的表面。解决办法是将包含编辑框iframe的div设置从height:100%改为 height:365px;overflow:auto;-webkit-overflow- scrolling:touch。 我们将高度设为365px的原因是有个外层的div的高度是400px,减去工具栏的高度后剩下的高度大致就是365px。 这样修改后,我们就可以编辑长博文了(见下图)。 注意现在在iPad上编辑框的右端就出现了滚动条。


博文修改网页的HTML的DOM结构的相关部分及其对应的HTML/PHP文件的note:

template/default/home/spacecp_blog.htm
form#ttHtmlEditor
  table.tfm
    tr.td
      input#subject
  table.tfm
    tr.td
      textarea#uchome-ttHtmlEditor
      div: height: 400px
        iframe#uchome-ifrHtmlEditor: height: 100%
        -> home.php?mod=editor&charset=utf-8&allowhtml=1&doodle=
           (source/module/home/home_editor.php)
              -> div.dvhtml
                   div#divEditor: height:100% => height:365px;overflow: auto; -webkit-overflow-scrolling: touch;
                     iframe#HtmlEditor



代码修改小结:

在source/module/home/home_editor.php的靠近结尾处,关于divEditor的语句里:在

document.write('<div id="divEditor" style="padding-left:4px;height:100%;background-color:#fff"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style="height:100%;width:100%;" frameBorder="0" marginHeight=0 marginWidth=0 src="home.php?mod=editor&op=blank&charset=<?php echo $_GET['charset']; ?>" onload="blank_load();"></IFRAME></div>');
中将第一个
height:100%;
改为
height:365px;overflow:auto;-webkit-overflow-scrolling:touch;


参考文献:
1.  Strategies for the iFrame on the iPad Problem http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

发表评论 评论 (13 个评论)

回复 carry0987 2016-8-2 08:24 AM
天香公主: 对
那.....應該沒什麼問題了~我試著研究了一下open graph的代碼,要使它能夠抓到帖子的內容,代碼可能無法達到這個效果...(顯示帖子內容的代碼我使用discuz的搜尋功能所搜尋到的帖子列表,不過相同的代碼加入open graph後,沒辦法使用)
回复 天香公主 2016-8-2 08:08 AM
carry0987: 博客上傳圖片不是已經被你解決了嗎?
回复 carry0987 2016-8-2 07:26 AM
天香公主: 这么多年在iPad上看美国中文网等Discuz网站,只遇到两个问题,除本文说的问题外,还有就是在博客里无法上传图片。

关于手机版网站,刚看到倍可亲推出了APP  htt ...
博客上傳圖片不是已經被你解決了嗎?
回复 carry0987 2016-8-2 07:14 AM
天香公主: 这么多年在iPad上看美国中文网等Discuz网站,只遇到两个问题,除本文说的问题外,还有就是在博客里无法上传图片。

关于手机版网站,刚看到倍可亲推出了APP  htt ...
沒錯,就像Facebook有手機版網站與電腦版網站,卻還是推出手機專用APP一樣
回复 天香公主 2016-8-2 06:03 AM
carry0987: 其實iPad很多人用,所以關於Ipad 對Discuz的相關優化還是必要的(我會協助做iPhone的優化的~
这么多年在iPad上看美国中文网等Discuz网站,只遇到两个问题,除本文说的问题外,还有就是在博客里无法上传图片。

关于手机版网站,刚看到倍可亲推出了APP  http://www.backchina.com/news/2016/08/02/440064.html,是不是现在更流行这样在APP里浏览网站(而不是在浏览器里浏览手机版的网站)?
回复 carry0987 2016-8-2 03:34 AM
天香公主: 我试过了,挺好。其实不改也无所谓,对非iPad用户这不是问题。只是象我这样用iPad阅读和上网的人,要修改或写博文不能用iPad有点不方便。

最后那段没啥用处,就 ...
其實iPad很多人用,所以關於Ipad 對Discuz的相關優化還是必要的(我會協助做iPhone的優化的~
回复 天香公主 2016-8-1 07:34 AM
jiaswen: 很有用 谢谢
欢迎新网友来一起交流。

同感,的确是个简单而有用的修改。
回复 jiaswen 2016-8-1 12:11 AM
彼岸网: 看不太清楚,到底是要改哪个文件?source/module/home/home_editor.php,还是
template/default/home/spacecp_blog.htm
我两个都查了,也没有找到相关的语句,不 ...
source/module/home/home_editor.php
回复 jiaswen 2016-8-1 12:10 AM
很有用 谢谢
回复 天香公主 2014-10-11 11:19 PM
彼岸网: 我改了,你一会儿试一下吧。
但你这段是什么意思?
template/default/home/spacecp_blog.htm
form#ttHtmlEditor
  table.tfm
    tr.td
      input#subject
  t ...
我试过了,挺好。其实不改也无所谓,对非iPad用户这不是问题。只是象我这样用iPad阅读和上网的人,要修改或写博文不能用iPad有点不方便。

最后那段没啥用处,就是博文修改网页的HTML的DOM结构的相关部分及其对应的HTML/PHP文件的note。就是从这个结构里找到要改的地方的。
回复 彼岸网 2014-10-11 11:09 PM
天香公主: 我刚装了3.2。在source/module/home/home_editor.php的靠近结尾处(我给的行数可能不对,因为我在Visual Studio里将文件格式化过了),在
document.write('<div  ...
我改了,你一会儿试一下吧。
但你这段是什么意思?
template/default/home/spacecp_blog.htm
form#ttHtmlEditor
  table.tfm
    tr.td
      input#subject
  table.tfm
    tr.td
      textarea#uchome-ttHtmlEditor
      div: height: 400px
        iframe#uchome-ifrHtmlEditor: height: 100%
回复 天香公主 2014-10-11 11:00 PM
彼岸网: 看不太清楚,到底是要改哪个文件?source/module/home/home_editor.php,还是
template/default/home/spacecp_blog.htm
我两个都查了,也没有找到相关的语句,不 ...
我刚装了3.2。在source/module/home/home_editor.php的靠近结尾处(我给的行数可能不对,因为我在Visual Studio里将文件格式化过了),在
document.write('<div id="divEditor" style="padding-left:4px;height:100%;background-color:#fff"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style="height:100%;width:100%;" frameBorder="0" marginHeight=0 marginWidth=0 src="home.php?mod=editor&op=blank&charset=<?php echo $_GET['charset']; ?>" onload="blank_load();"></IFRAME></div>');
中将第一个
height:100%;
改为
height:365px;overflow:auto;-webkit-overflow-scrolling:touch;
回复 彼岸网 2014-10-11 10:41 PM
看不太清楚,到底是要改哪个文件?source/module/home/home_editor.php,还是
template/default/home/spacecp_blog.htm
我两个都查了,也没有找到相关的语句,不知道是不是因为版本的问题?

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2024-3-28 07:55 PM , Processed in 0.023127 second(s), 11 queries. ,ApcOn

返回顶部