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

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

日志

Discuz代码分析:日志编辑

热度 9已有 9322 次阅读2014-12-3 04:30 PM |个人分类:Discuz|系统分类:社交网理论与实践

本文讨论日志编辑页的两个主要功能。 一是编辑器,二是图片上传。

现有日志可以在编辑状态下编辑,新创建日志时也能填写内容。对于我们讨论的问题而言,两者非常接近。有必要举例时我们就以创建新日志为例。当点击"发表新日志"按钮来到发表日志页时,在fiddler中我们可以看到服务器向客户端发送了下列文件:


包括两个PHP生成的HTML文件,和若干个Javascript文件,包括home.js,editor_function.js,home_blog.js,upload.js 和 editor_base.js, 还有一个Flash动画文件swfupload.swf。这些文件是怎么由客户端的一个请求而加入发送的行列的呢?检查代码发现:

/home.php?mod=spacecp&ac=blog
source/module/home/home_spacecp.php
  => source/include/spacecp/spacecp_blog.php
     => template/default/home/spacecp_blog.htm
          1)    <!--{subtemplate home/editor_image_menu}-->
                 template/default/home/editor_image_menu.htm (包含选择上传图片的对话框)
                       1a) <!--{subtemplate common/upload}-->
                             template/default/common/upload.htm
                                   => static/js/upload.js (initSWFUpload => loadFlash => getFlashHTML (包含 Flash object) )
                                         => static/image/common/swfupload.swf
          2)   <iframe src='home.php?mod=editor&charset={CHARSET}&allowhtml=$allowhtml&doodle={if $_G['setting']['magicstatus'] && !empty($_G['setting']['magics']['doodle'])}1{/if}' name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;height:100%;position:relative;"></iframe>                source/module/home/home_editor.php (包含编辑器及工具条)
                      => static/image/editor/editor_base.js
                      => 编辑器<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>
          3)   <script type="text/javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
                static/image/editor/editor_function.js
          4)   <script type="text/javascript" src="{$_G[setting][jspath]}home_blog.js?{VERHASH}"></script>
                static/js/home_blog.js


1。编辑器


一个浏览器窗口里的内容就处于可编辑状态如果它的文档的designMode是on,这时文档里的内容还可以用execCommand在控制。在我们的前文中给出过一个简单的实例(链接)。


在日志编辑页上的编辑器是个识别符为HtmlEditor的iframe。在editor_base.js文件里对它有些关键的设置:

window.onload = function(){ try{ gLoaded = true; fSetEditable(); fSetFrmClick(); }catch(e){ } } function fSetEditable(){ var f = window.frames["HtmlEditor"]; f.document.designMode="on"; if(!gIsIE) f.document.execCommand("useCSS",false, true); } 注意designMode="on"将该iframe变成了一个编辑器。

那么编辑器上的工具条上的那些按纽是如何工作的呢?仅看一例:让我们来看一下加超链接的功能。整个工具条是在home_editor.php里定义的,其中加超链接的按钮是:

< a href="javascript:;" class="icoUrl" id="icoUrl" onClick="createLink(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_hyperlink'); ?>"></a> <div id="createUrl" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px"> <?php echo lang('home/editor', 'editor_prompt_textlink'); ?>:<br/> <input type="text" id="insertUrl" name="url" value="http://" onfocus="checkURL(this, 1);" onblur="checkURL(this, 0);" class="t_input" style="width: 190px;"> <input type="button" onclick="createLink();" name="createURL" value="<?php echo lang('home/editor', 'editor_ok'); ?>" class="submit" /> < a href="javascript:;" onclick="fHide($('createUrl'));return false;"><?php echo lang('home/editor', 'editor_cancel'); ?></a> </div> 这里上半部是工具条上的那个加超链接的按钮,下半部分是一个隐藏的小对话框,只在点击加超链接的按钮后才出现,让用户在里面添加链接。点击加超链接的按钮时执行的函数是createLink,定义在editor_base.js中: function createLink(e, show) { if(typeof show == 'undefined') { var urlObj = $('insertUrl'); var sURL = urlObj.value; if ((sURL!=null) && (sURL!="http://")){ setCaret(); format("CreateLink", sURL); } fHide($('createUrl')); urlObj.value = 'http://'; } else { if(gIsIE){ var e = window.event; } getCaret(); var dvUrlBox = $("createUrl"); var iX = e.clientX; var iY = e.clientY; dvUrlBox.style.display = ""; dvUrlBox.style.left = (iX-300) + "px"; dvUrlBox.style.top = 33 + "px"; } } 从其中下半段的代码可见它将隐藏的小对话框显示出来了。 在用户点击了它上面的"确定"按钮后,这个函数又一次执行。不过这次执行的是它上半段的代码。 function setCaret() { if(gIsIE){ window.frames["HtmlEditor"].focus(); var range = window.frames["HtmlEditor"].document.body.createTextRange(); range.moveToBookmark(pos); range.select(); pos = null; } } function format(type, para){ var f = window.frames["HtmlEditor"]; var sAlert = ""; if(!gIsIE){ switch(type){ case "Cut": sAlert = "您的浏览器安全设置不允许编辑器自动执行剪切操作,请使用键盘快捷键(Ctrl+X)来完成"; break; case "Copy": sAlert = "您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成"; break; case "Paste": sAlert = "您的浏览器安全设置不允许编辑器自动执行粘贴操作,请使用键盘快捷键(Ctrl+V)来完成"; break; } } if(sAlert != ""){ alert(sAlert); return; } f.focus(); if(!para){ if(gIsIE){ f.document.execCommand(type); }else{ f.document.execCommand(type,false,false); } }else{ if(type == 'insertHTML') { try{ f.document.execCommand('insertHTML', false, para); }catch(exp){ var obj = f.document.selection.createRange(); obj.pasteHTML(para); obj.collapse(false); obj.select(); } } else { try{ f.document.execCommand(type,false,para); }catch(exp){} } } f.focus(); } 从中可见它调用了execCommand('CreateLink')来将链接加到编辑器里选择的文字上的。 下面是对document.execCommand的解释(链接):
When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand will affect the currently active editable element.

最后让我们看一下当用户点击"保存发布"按钮时,Discuz是如何将编辑器里的内容取出来发送给服务器的。在spacecp_blog.htm里有着包含该按钮的表单, <form id="ttHtmlEditor" method="post" autocomplete="off" action="home.php?mod=spacecp&ac=blog&blogid=$blog[blogid]{if $_GET[modblogkey]}&modblogkey=$_GET[modblogkey]{/if}" onsubmit="validate(this);" enctype="multipart/form-data"> ... <textarea class="pt" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0">$blog[message]</textarea> ... <button type="submit" id="issuance" class="pn pnc"><strong>{lang save_publish}</strong></button> 用fiddler可以看到编辑器里的内容是放在那个名叫message的暗藏的textarea里发送到服务器的:

那么编辑器里的内容是如何被放到那个textarea里去的呢?在editor_base.js里有这样一句代码,它会在表单提交给服务器前执行: window.onbeforeunload = parent.edit_save; 其中调用的函数edit_save是在editor_function.js里定义的: function edit_save() { var p = window.frames['uchome-ifrHtmlEditor']; var obj = p.window.frames['HtmlEditor']; var status = p.document.getElementById('uchome-editstatus').value; if(status == 'code') { $('uchome-ttHtmlEditor').value = p.document.getElementById('sourceEditor').value; } else if(status == 'text') { if(BROWSER.ie) { obj.document.body.innerText = p.document.getElementById('dvtext').value; $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML; } else { obj.document.body.textContent = p.document.getElementById('dvtext').value; var sOutText = obj.document.body.innerHTML; $('uchome-ttHtmlEditor').value = sOutText.replace(/\r\n|\n/g,"<br>"); } } else { $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML; } backupContent($('uchome-ttHtmlEditor').value); }就是在这里编辑器里的内容就被放到了那个textarea里了。


2。图片上传
 
图片上传功能是由一个基于Flash的组件SWFUpload提供的。介绍见 链接SwfUploadV2.2.0中文说明文档 : SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 关于Flash技术对上传文件的支持的介绍见 链接 ,而SWFUpload组件的用法见 链接链接

关于用SWFUpload上传的简单实例见我们过去的博文(链接)。


点击编辑器上方的工具条上的"添加图片"图标后出现选择和上传图片的对话框的过程和前面所说的添加超链接的过程非常类似。 "添加图片"图标定义在home_editor.php里: < a href="javascript:;" class="icoImg" id="icoImg" onClick="parent.createImageBox(<?php echo ($isportal ? 'parent.check_catid' : '')?>);return false;" title="<?php echo lang('home/editor', 'editor_link_image'); ?>"></a> 点击后运行的函数createImageBox定义在editor_function.js里: function createImageBox(fn) { if(typeof fn == 'function' && !fn()) { return false; } var menu = $('icoImg_image_menu'); if(menu) { if(menu.style.visibility == 'hidden') { menu.style.visibility = 'visible'; } else { menu.style.width = '600px'; showMenu({'ctrlid':'icoImg_image','mtype':'win','evt':'click','pos':'00','timeout':250,'duration':3,'drag':'icoImg_image_ctrl'}); } } } 而icoImg_image_menu就是那个选择和上传图片框。定义在editor_image_menu.htm里。
 

其中的上传图片tab项是 <li class="current" id="icoImg_btn_imgattachlist">< a href="javascript:;" hidefocus="true" onclick="switchImagebutton('imgattachlist');">{lang upload_pic}</a></li> 而它对应的tab内容是 <div class="p_opt" unselectable="on" id="icoImg_imgattachlist"{if $_G['basescript'] == 'home' && !$_G['group']['allowupload']} style="display: none;"{/if}> <div class="pbm bbda cl"> <div id="uploadPanel" class="y"> <!--{if $_G['basescript'] != 'portal'}--> {lang aim_album} <select name="savealbumid" id="savealbumid" class="ps vm" onchange="if(this.value == '-1') {selectCreateTab(0);}"> <option value="0">{lang default_album}</option> <!--{loop $albums $value}--> <option value="$value[albumid]">$value[albumname]</option> <!--{/loop}--> <option value="-1" style="color:red;">+{lang create_new_album}</option> </select> <!--{/if}--> </div> <div id="createalbum" class="y" style="display:none"> <input type="text" name="newalbum" id="newalbum" class="px vm" value="{lang input_album_name}" onfocus="if(this.value == '{lang input_album_name}') {this.value = '';}" onblur="if(this.value == '') {this.value = '{lang input_album_name}';}" /> <button type="button" class="pn pnc" onclick="createNewAlbum();"><span>{lang create}</span></button> <button type="button" class="pn" onclick="selectCreateTab(1);"><span>{lang cancel}</span></button> </div> <span id="imgSpanButtonPlaceholder"></span> </div> <div class="upfilelist upfl bbda"> <div id="imgattachlist"> <!--{if $_G['basescript'] == 'portal'}-->$article[attachs]<!--{/if}--> </div> <div class="fieldset flash" id="imgUploadProgress"></div> </div> <p class="notice">{lang click_pic_to_editor}</p> </div> 在editor_image_menu.htm里还生成了SWFUpload的实例: <!--{subtemplate common/upload}--> ... var upload = new SWFUpload({ // Backend Settings upload_url: "{$_G[siteurl]}misc.php?mod=swfupload&action=swfupload&operation=<!--{if $_G['basescript'] == 'portal'}-->portal<!--{else}-->album<!--{/if}-->", post_params: {"uid" : "$_G[uid]", "hash":"$swfconfig[hash]"<!--{if $_G['basescript'] == 'portal'}-->,"aid":$aid,"catid":$catid<!--{/if}-->}, // File Upload Settings file_size_limit : "$swfconfig[max]", // 100MB file_types : "$swfconfig[imageexts][ext]", file_types_description : "$swfconfig[imageexts][depict]", file_upload_limit : 0, file_queue_limit : 0, // Event Handler Settings (all handlers are in the upload.js file) swfupload_preload_handler : preLoad, swfupload_load_failed_handler : loadFailed, file_dialog_start_handler : fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : "{IMGDIR}/uploadbutton.png", button_placeholder_id : "imgSpanButtonPlaceholder", button_width: 100, button_height: 25, button_cursor:SWFUpload.CURSOR.HAND, button_window_mode: "transparent", custom_settings : { progressTarget : "imgUploadProgress", uploadSource: 'portal', uploadType: <!--{if $_G['basescript'] == 'portal'}-->'portal'<!--{else}-->'blog'<!--{/if}-->, imgBoxObj: $('imgattachlist') //thumbnail_height: 400, //thumbnail_width: 400, //thumbnail_quality: 100 }, // Debug Settings debug: false }); 注意upload_url指明了处理上传文件的PHP文件,upload_success_handler里指明了上传成功后会call的函数。

在用户选择了上传文件后,文件upload.js里的函数fileDialogComplete被执行,其中call了startUpload,因而引发了文件上传。从Fiddler里可见:





上传成功后,那个上传图片的缩影是怎么出现在对话框里的呢? 用POST请求将图片发给misc.php?mod=swfupload&action=swfupload&operation=album后,处理这个请求的脚本文件是 source/module/misc/misc_swfupload.php: } elseif($_GET['operation'] == 'album') { $showerror = true; if(helper_access::check_module('album')) { require_once libfile('function/spacecp'); if($_FILES["Filedata"]['error']) { $file = lang('spacecp', 'file_is_too_big'); } else { require_once libfile('function/home'); $_FILES["Filedata"]['name'] = addslashes(diconv(urldecode($_FILES["Filedata"]['name']), 'UTF-8')); $file = pic_save($_FILES["Filedata"], 0, '', true, 0); if(!empty($file) && is_array($file)) { $url = pic_get($file['filepath'], 'album', $file['thumb'], $file['remote']); $bigimg = pic_get($file['filepath'], 'album', 0, $file['remote']); echo "{\"picid\":\"$file[picid]\", \"url\":\"$url\", \"bigimg\":\"$bigimg\"}"; $showerror = false; } } } if($showerror) { echo "{\"picid\":\"0\", \"url\":\"0\", \"bigimg\":\"0\"}"; } 返回给客户端的一个数组,例如 {"picid":"5", "url":"data/attachment/album/201412/03/104756g0t02vdtzh2uwwut.jpg.thumb.jpg", "bigimg":"data/attachment/album/201412/03/104756g0t02vdtzh2uwwut.jpg"} 接听上传成功事件的函数是uploadSuccess,定义在upload.js文件中,其中服务器的那个返回值被赋予了参数serverData。 function uploadSuccess(file, serverData) { try { ... } else if(this.customSettings.uploadType == 'blog') { var data = eval('('+serverData+')'); if(parseInt(data.picid)) { var tdObj = getInsertTdId(this.customSettings.imgBoxObj, 'image_td_'+data.picid); var img = new Image(); img.src = data.url; var imgObj = document.createElement("img"); imgObj.src = img.src; imgObj.className = "cur1"; imgObj.onclick = function() {insertImage(data.bigimg);}; tdObj.appendChild(imgObj); var inputObj = document.createElement("input"); inputObj.type = 'hidden'; inputObj.name = 'picids['+data.picid+']'; inputObj.value= data.picid; tdObj.appendChild(inputObj); } else { showDialog('图片上传失败', 'notice', null, null, 0, null, null, null, null, sdCloseTime); } $(file.id).style.display = 'none'; 从中可见新图片的缩影是如何加到对话框了的。

另一个有趣的功能是当用户点击缩影图后,那个图片就加入了编辑框里,这是由上面的函数中的一行代码决定的: imgObj.onclick = function() {insertImage(data.bigimg);}; 这个insertImage函数是在文件static/image/editor/editor_function.js中定义的: function insertImage(image, url, width, height) { url = typeof url == 'undefined' || url === null ? image : url; width = typeof width == 'undefined' || width === null ? 0 : parseInt(width); height = typeof height == 'undefined' || height === null ? 0 : parseInt(height); var html = '<p>< a href="' + url + '" target="_blank"><img src="'+image+'"'+(width?' width="'+width+'"':'')+(height?' height="'+height+'"':'')+'></a></p>'; edit_insert(html); } function edit_insert(html) { var p = window.frames['uchome-ifrHtmlEditor']; var obj = p.window.frames['HtmlEditor']; var status = p.document.getElementById('uchome-editstatus').value; if(status != 'html') { alert('本操作只在多媒体编辑模式下才有效'); return; } obj.focus(); if(BROWSER.ie){ var f = obj.document.selection.createRange(); f.pasteHTML(html); f.collapse(false); f.select(); } else { obj.document.execCommand('insertHTML', false, html); } }
SWFUpload虽好,但完全基于Flash的局限性迟早要解决。我看到百度开发了一个类似的上传组件叫WebUploader,以HTML5为主,Flash 技术为辅。值得一试 (链接)。

注:本文中的代码里的<符号如果后面的字符是a的话,在它们中间加了一个不应该有的空格,以避免Discuz在保存日志时自动改变日志内容。

发表评论 评论 (52 个评论)

回复 drimmeer 2018-3-17 06:41 PM
天香公主:    解决了就好。更正下我前面说的话,论坛里的图片上传和日志里一样也是基于flash的,但只有论坛里提供了在浏览器不支持flash情况下使用的基于html的备用方 ...
太好了!谢谢您!
回复 天香公主 2018-3-15 08:15 PM
drimmeer: 您真厉害!果然是flash屏蔽的问题。开放之后就有上传按钮了。那最后那个问题也不用管它了。省点心。(我太懒了:) ...
解决了就好。更正下我前面说的话,论坛里的图片上传和日志里一样也是基于flash的,但只有论坛里提供了在浏览器不支持flash情况下使用的基于html的备用方案,我写过一篇博文讨论了怎样给日志也加上这个备用方案 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1076
回复 drimmeer 2018-3-15 07:25 PM
天香公主: 您好。您说的那个’选择文件上传‘的按钮不见了应该是浏览器里没有激活flash。论坛里可以上传图片是因为那里的功能不依赖flash。

我在chrome里disable了flash后 ...
您真厉害!果然是flash屏蔽的问题。开放之后就有上传按钮了。那最后那个问题也不用管它了。省点心。(我太懒了:)
回复 天香公主 2018-3-14 10:07 PM
drimmeer: 天香公主,您好!又来麻烦您了。没想到还是跟这个主题有关的问题。

这次是上传图片的对话框出问题。我不知道这个问题什么时候开始的,以前没有问题的,也不知道 ...
您好。您说的那个’选择文件上传‘的按钮不见了应该是浏览器里没有激活flash。论坛里可以上传图片是因为那里的功能不依赖flash。

我在chrome里disable了flash后,按您后面那段的步骤做了一遍没出现问题。要不你把你的网址给我,我去你那试试?
回复 drimmeer 2018-3-14 09:46 PM
天香公主,您好!又来麻烦您了。没想到还是跟这个主题有关的问题。

这次是上传图片的对话框出问题。我不知道这个问题什么时候开始的,以前没有问题的,也不知道是什么引起的。程序文件应该基本没有人动的。

问题是:在编辑日志的时候点击’上传图片‘出来的那个对话框里,那个’选择文件上传‘的按钮不见了。我在chrome和ie都试过,都不见。上传到相册的页面也没有了选择上传的按钮,以前也有的。

后来我发现在发表论坛的帖子的时候可以上传图片,而且可以把图片放进相册。但是回头去发表日志,然后从相册里选择刚刚上传的图片之后,那个图片怎么也不出现在日志的内容里。

麻烦您帮我看看,先谢谢您!
回复 艾芯 2018-1-7 07:39 AM
天香公主: 我试了美国中文网在Chrome里也有这问题。所以它应该是Discuz固有的问题。而且仅出现在Chrome中,在IE和Firefox都没这问题。

我的解决办法是在文件 static\image ...
哈哈,感谢天香公主,好像真解决了。
回复 天香公主 2017-12-25 11:30 AM
drimmeer: 真神奇啊!真的解决问题了!我就是象carry0987一样在第一段后面加多一个参数‘0,’
非常感谢您!
  
回复 drimmeer 2017-12-24 06:56 PM
天香公主: 不客气,原来想在我的测试网站上试试,但它本周出了些问题,暂时不能用了,所以没能测试。不过我感觉你说的问题我和carry0987过去讨论过,http://www.bian-wang. ...
真神奇啊!真的解决问题了!我就是象carry0987一样在第一段后面加多一个参数‘0,’
非常感谢您!
回复 天香公主 2017-12-23 10:03 PM
drimmeer: 很高兴能得到您的帮助!
应该是discuz带来的问题,因为我没有做过改动。我试过在后台设置编辑器为‘高级’,那一下似乎问题解决了,但是第二天再试,问题又回来 ...
不客气,原来想在我的测试网站上试试,但它本周出了些问题,暂时不能用了,所以没能测试。不过我感觉你说的问题我和carry0987过去讨论过,http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=884&page=2#comment,请试试我在2017-3-8 11:04 PM评论里建议的修改。
回复 drimmeer 2017-12-21 12:36 PM
天香公主: 欢迎新网友来一起讨论。关于你说的“问题是在手机上使用discuz的日志编辑器保存文章之后,显示出来的是插入了html码的文字”,你感觉是Discuz带来的问题(即你新 ...
很高兴能得到您的帮助!
应该是discuz带来的问题,因为我没有做过改动。我试过在后台设置编辑器为‘高级’,那一下似乎问题解决了,但是第二天再试,问题又回来了,搞得我以为前一天看到的是幻觉。
对了,我安装的是discuz 3.2.
我现在还没有权限在彼岸网发表日志,所以不知道是不是也有这个问题。
回复 天香公主 2017-12-19 09:41 PM
drimmeer: 您好!非常高兴看到您这篇文章,很有用的信息!谢谢您!我最近被discuz的日志编辑器搞晕了,无从下手,看到这篇文章,开始有些头绪了。

不过我太新手了,不知道 ...
欢迎新网友来一起讨论。关于你说的“问题是在手机上使用discuz的日志编辑器保存文章之后,显示出来的是插入了html码的文字”,你感觉是Discuz带来的问题(即你新装一个Discuz网站就会有这个问题),还是你修改了什么代码后才出现的?在彼岸网上也有你说的这个问题吗?

等周末我试下,如果是Discuz带来的问题,应该不难解决,因为它的电脑版对客户端是电脑还是手机好像仅有几处有区别对待。
回复 drimmeer 2017-12-19 03:39 PM
sesemule: 天香,您有没有发现这个问题:写日志时,编辑框最上面那一排按钮的最右边的那个——“切换到纯文本”,如果在编辑框里没有内容时点这个按钮会出现整片空白,完全 ...
我在手机上切换成纯文本也出现这个问题,用的也是chrome浏览器,但是在电脑上切换就没有这个问题了。
回复 drimmeer 2017-12-19 03:36 PM
您好!非常高兴看到您这篇文章,很有用的信息!谢谢您!我最近被discuz的日志编辑器搞晕了,无从下手,看到这篇文章,开始有些头绪了。

不过我太新手了,不知道遇到的问题是不是别人已经有了解决方法,可否请您指教?

问题是在手机上使用discuz的日志编辑器保存文章之后,显示出来的是插入了html码的文字,好像是normalize的问题。在手机上用的是电脑版,chrome的浏览器。但是在电脑上用chrome浏览器没有这个问题。论坛的文章编辑器在两种情况下也没有这个问题。不知道为什么独独手机编辑日志时出问题。麻烦您指点一下!先行谢过!
回复 carry0987 2016-11-7 09:30 PM
东风: +100 他是我们的大神~
趕緊膜拜一下
回复 东风 2016-11-7 02:56 PM
carry0987: 以前也遇過這個問題,不過沒注意.....感謝天香~
+100 他是我们的大神~
回复 carry0987 2016-11-7 10:18 AM
天香公主: 我试了美国中文网在Chrome里也有这问题。所以它应该是Discuz固有的问题。而且仅出现在Chrome中,在IE和Firefox都没这问题。

我的解决办法是在文件 static\image ...
以前也遇過這個問題,不過沒注意.....感謝天香~
回复 sesemule 2016-11-6 06:27 PM
天香公主: 我试了美国中文网在Chrome里也有这问题。所以它应该是Discuz固有的问题。而且仅出现在Chrome中,在IE和Firefox都没这问题。

我的解决办法是在文件 static\image ...
原来如此……
已解决。谢谢
回复 天香公主 2016-11-6 02:39 PM
sesemule: 你直接在彼岸测试就能看到这种现象。(我用的谷歌浏览器和360浏览器测试。)

不是“编辑代码”那个按钮,是最最右边,在”全屏“按钮右边的那个记事本图标(鼠 ...
我试了美国中文网在Chrome里也有这问题。所以它应该是Discuz固有的问题。而且仅出现在Chrome中,在IE和Firefox都没这问题。

我的解决办法是在文件 static\image\editor\editor_base.js 里将下面这行
    dvtext.style.display = "";
改成
    dvtext.style.display = "block";
注意修改后更新缓存
回复 天香公主 2016-11-4 11:50 PM
sesemule: 你直接在彼岸测试就能看到这种现象。(我用的谷歌浏览器和360浏览器测试。)

不是“编辑代码”那个按钮,是最最右边,在”全屏“按钮右边的那个记事本图标(鼠 ...
明白了,等我解决了再告诉你,谢谢。
回复 天香公主 2016-11-4 11:44 PM
忆江南: 我注意到一个问题,博客目录页只能显示前100页,再早就出错“抱歉,分页数不在允许的范围内”。怎么扩大允许的分页数呢? ...
在管理中心里可以设置下:全局->空间设置->列表最大分页数
123下一页

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2018-8-20 01:08 PM , Processed in 0.060320 second(s), 9 queries. ,ApcOn

返回顶部