京山游俠

          專注技術(shù),拒絕扯淡
          posts - 50, comments - 868, trackbacks - 0, articles - 0
            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

            Web 2.0時(shí)代時(shí)代的Web項(xiàng)目,是無(wú)論如何也少不了一個(gè)在線編輯器的,因此在我們的項(xiàng)目中整合一個(gè)Web編輯器就顯得至關(guān)重要。在這里,我依然以前面的xkland項(xiàng)目為例,來(lái)探討在項(xiàng)目中整合FCKeditor的方方面面。

          一、關(guān)于用戶發(fā)表文章的功能設(shè)計(jì)

            用戶發(fā)表文章的功能,大家見(jiàn)過(guò)不少,也用過(guò)不少,最簡(jiǎn)單的,莫過(guò)于提供一個(gè)文本框,數(shù)據(jù)提交后直接寫入數(shù)據(jù)庫(kù)了事,稍復(fù)雜一點(diǎn)的最少也要提供一個(gè)輸入標(biāo)題和選擇分類的功能。當(dāng)然,我們也可以把我們的功能設(shè)計(jì)得更有特色。在這個(gè)示例項(xiàng)目中,我假設(shè)開(kāi)發(fā)的是一個(gè)以圖文為中心的網(wǎng)絡(luò)社區(qū),我們每一篇文章都需要用戶在它上傳的圖片中選擇一個(gè)作為主題圖片,那么,在網(wǎng)站首頁(yè)的文章列表上,大家看到的將不僅僅只是一個(gè)文字的標(biāo)題,還有主題圖片的縮略圖。

            先來(lái)看看數(shù)據(jù)表的結(jié)構(gòu),創(chuàng)建數(shù)據(jù)表的SQL語(yǔ)句如下:

          CREATE ? TABLE ?`topics`?(
          ??`id`?
          int ( 11 )? NOT ? NULL ?auto_increment,
          ??`catalogid`?
          int ( 11 )? NOT ? NULL ,
          ??`subject`?
          varchar ( 60 )? default ? NULL ,
          ??`content`?
          text ,
          ??`pictures`?
          varchar ( 2000 )? NOT ? NULL ,
          ??`mainpicture`?
          varchar ( 40 )? NOT ? NULL ,
          ??`userid`?
          int ( 11 )? NOT ? NULL ,
          ??`time`?
          timestamp ? NOT ? NULL ? default ? CURRENT_TIMESTAMP ? on ? update ? CURRENT_TIMESTAMP ,
          ??`lastedittime`?
          timestamp ? NOT ? NULL ? default ? ' 2007-01-01?00:00:00 ' ,
          ??`lastreplytime`?
          timestamp ? NOT ? NULL ? default ? ' 2007-01-01?00:00:00 ' ,
          ??`visitcount`?
          int ( 11 )? NOT ? NULL ,
          ??
          PRIMARY ? KEY ??(`id`),
          ??
          KEY ?`subject`?(`subject`),
          ??
          KEY ?`userid`?(`userid`),
          ??
          KEY ?`time`?(`time`),
          ??
          KEY ?`lastreplytime`?(`lastreplytime`)
          )?ENGINE
          = InnoDB? DEFAULT ?CHARSET = utf8? |


            其中,catalogid字段為文章分類,subject字段為標(biāo)題,content字段為正文。比較特殊的是pictures字段和mainpicture字段,pictures保存文章中包含的所有圖片的url,以“|”符號(hào)分割,如“001.jpg|002.jpg|003.jpg...”,而mainpicture就是主題圖片的url了。有人會(huì)問(wèn):“保存主題圖片的url就夠了,為什么還要保存所有的圖片url呢?”,這樣設(shè)計(jì)主要是為了考慮到用戶有時(shí)候會(huì)修改文章,重新選擇別的圖片作為主題圖片,這個(gè)時(shí)候pictures字段就派上用場(chǎng)了,因?yàn)樗梢韵蛴脩籼峁┖蜻x項(xiàng)。

            這樣的功能設(shè)計(jì)應(yīng)該提供如下的用戶界面,該頁(yè)面文件名為EditPosts.jsp:
          45.JPG

            在這里,我們還沒(méi)有Web編輯器可用,暫時(shí)用一個(gè)文本區(qū)域代替。

          二、初識(shí)FCKeditor

            在聽(tīng)說(shuō)FCKeditor之前,我用過(guò)一個(gè)在線編輯器eWebEditor,提供ASP/JSP/PHP等好幾個(gè)版本,功能是非常的好,文檔也很詳細(xì),但是聽(tīng)說(shuō)只支持IE瀏覽器;而FCKeditor在網(wǎng)上大名鼎鼎,是一個(gè)受關(guān)注非常高的開(kāi)源項(xiàng)目,并且能夠跨瀏覽器支持。因此我選擇FCKeditor。FCKeditor的最新版本是2.4,大家可以到
          http://www.fckeditor.net/download這里下載,如下圖
          46.JPG

            下載并解壓縮到fckeditor文件夾,打開(kāi)該文件夾,我們可以看到如下文件及目錄:
          47.JPG
            其中_samples目錄下是示例,_testcases目錄下是測(cè)試用例,editor目錄下是編輯器的主要文件;此外,從該目錄中的文件不難看出,F(xiàn)CKeditor提供支持asp、php、perl、python等等各種服務(wù)器技術(shù)的版本,但不支持.net和Java Web。不過(guò)不要擔(dān)心,F(xiàn)CKeditor與Java Web之間的整合早就有人做好了,稍后我們就會(huì)用到。

            了解瀏覽器技術(shù)的人都不難想到,Web編輯器其實(shí)應(yīng)該是客戶端技術(shù),它是通過(guò)JavaScript來(lái)控制頁(yè)面上的元素和通過(guò)彈出窗口來(lái)模擬對(duì)話框而做到的;只有在提交文章或者上傳文件的時(shí)候才需要跟服務(wù)器端交互。因此,要將該編輯器快速整合到項(xiàng)目中以看到效果,是非常簡(jiǎn)單的。

          三、使用JavaScript整合FCKeditor

            將剛剛解壓得到的fckeditor目錄拷貝到我們的項(xiàng)目中的src\main\webapp目錄下,打開(kāi)剛才建立的EditPosts.jsp,加入如下代碼:

          1 < script?src = " fckeditor/fckeditor.js " ></ script >
          2 < script?language = " javascript " >
          3 window.onload? = ? function () {
          4 ???? var ?oFCKeditor? = ? new ?FCKeditor(?'myTextArea'?)?;
          5 ????oFCKeditor.BasePath? = ? " fckeditor/ " ;
          6 ????oFCKeditor.ReplaceTextarea();
          7 }?
          ????? </scrip>


            在這里,第一行代碼是引入fckeditor中的fckeditor.js文件,其中定義了FCKeditor類,第四行就是利用該類創(chuàng)建一個(gè)編輯器對(duì)象,而myTextArea是表單中文本區(qū)域的名字,在第六行,通過(guò)FCKeditor類的ReplaceTextArea方法,文本區(qū)域就被替換成了Web編輯器。刷新頁(yè)面,就可以看到效果:
          48.JPG

            FCKeditor類提供幾個(gè)基本屬性,可以讓我們對(duì)編輯器進(jìn)行簡(jiǎn)單的控制,它們是:

            InstanceName:返回編輯器示例的名字
            Width:設(shè)置編輯器的寬度,默認(rèn)為100%
            Height:設(shè)置編輯器的高度,默認(rèn)值為200
            ToolbarSet:設(shè)置編輯器的工具條集合,默認(rèn)值為"default",稍后會(huì)講到怎樣自定義工具條
            Value:設(shè)置顯示在編輯器中的內(nèi)容(包含HTML),默認(rèn)值為空
            BasePath:編輯器的目錄,一定要設(shè)置正確,否則編輯器會(huì)找不到它需要的文件,在本例中,由于我們直接將fckeditor目錄放到項(xiàng)目的根目錄下,因此設(shè)置為"fckeditor/"
            CheckBrowser:設(shè)置是否檢測(cè)瀏覽器,默認(rèn)為true
            DisplayErrors:設(shè)置是否顯示錯(cuò)誤信息,默認(rèn)為true

            此外,F(xiàn)CKeditor類還有一個(gè)集合屬性Config[ key ] = value,通過(guò)該集合屬性,我們可以進(jìn)行一個(gè)更高級(jí)的設(shè)置,如設(shè)置默認(rèn)語(yǔ)言、更換皮膚等等。

            綜上所述,下面的代碼將重新設(shè)置編輯器的高和寬、將工具條設(shè)置為基本工具條,將皮膚設(shè)置為office2003樣式:
          <script?src="fckeditor/fckeditor.js"></script>
          <script?language="javascript">
          window.onload?
          =?function(){
          ????
          var?oFCKeditor?=?new?FCKeditor(?'myTextArea'?)?;
          ????
          ????oFCKeditor.BasePath?
          =?"fckeditor/";
          ????oFCKeditor.Width?
          =?"800";
          ????oFCKeditor.Height?
          =?"300";
          ????oFCKeditor.ToolbarSet?
          =?"Basic";
          ????
          ????oFCKeditor.Config[
          "SkinPath"]?=?"skins/office2003/";
          ????
          ????oFCKeditor.ReplaceTextarea();
          }

          </script>

            效果圖:
          50.JPG

          四、通過(guò)FCKeditor.java整合FCKeditor

            使用JavaScript整合FCKeditor,我們很快就能看到編輯器的效果,并進(jìn)行文章的編輯。但是,在需要和服務(wù)器端進(jìn)行交互的時(shí)候(比如上傳圖片),就會(huì)出錯(cuò)。因此,我們不得不在服務(wù)器端做一點(diǎn)手腳。這里,我們需要使用的是FCKeditor.java,其最新版本是2.3,還是在剛才的下載頁(yè)面,找到下載鏈接,如下圖:
          49.JPG

            將下載文件解壓,我們可以看到有doc目錄,有src目錄,甚至還有一個(gè)build.xml,讓我們可以重新構(gòu)建項(xiàng)目;但是,這些我們統(tǒng)統(tǒng)都不需要,我們只要web\WEB-INF目錄下的東西,在這個(gè)目錄下,提供了一個(gè)web.xml,同時(shí)在lib目錄下提供了兩個(gè).jar文件,這便是全部。看到這里,大家肯定能夠想到,Java Web項(xiàng)目的靈魂是什么?那就是web.xml。我們所要做的,就是把lib目錄下的兩個(gè).jar文件拷貝到我們項(xiàng)目的src/main/webapp/WEB-INF/lib下,同時(shí)將web.xml中的內(nèi)容整合到我們項(xiàng)目的src/main/webapp/WEB-INF/web.xml中。

            web.xml中的內(nèi)容很簡(jiǎn)單,只定義了兩個(gè)Servlet映射,并且對(duì)上傳文件的目錄和允許哪些文件上傳、拒絕哪些文件上傳做了設(shè)置,如下:
          <servlet>
          ????????
          <servlet-name>Connector</servlet-name>
          ????????
          <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
          ????????
          <init-param>
          ????????????
          <param-name>baseDir</param-name>
          ????????????
          <param-value>/UploadFiles/</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>debug</param-name>
          ????????????
          <param-value>true</param-value>
          ????????
          </init-param>
          ????????
          <load-on-startup>1</load-on-startup>
          ????
          </servlet>

          ????
          <servlet>
          ????????
          <servlet-name>SimpleUploader</servlet-name>
          ????????
          <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
          ????????
          <init-param>
          ????????????
          <param-name>baseDir</param-name>
          ????????????
          <param-value>/UploadFiles/</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>debug</param-name>
          ????????????
          <param-value>true</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>enabled</param-name>
          ????????????
          <param-value>true</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>AllowedExtensionsFile</param-name>
          ????????????
          <param-value></param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>DeniedExtensionsFile</param-name>
          ????????????
          <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>AllowedExtensionsImage</param-name>
          ????????????
          <param-value>jpg|gif|jpeg|png|bmp</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>DeniedExtensionsImage</param-name>
          ????????????
          <param-value></param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>AllowedExtensionsFlash</param-name>
          ????????????
          <param-value>swf|fla</param-value>
          ????????
          </init-param>
          ????????
          <init-param>
          ????????????
          <param-name>DeniedExtensionsFlash</param-name>
          ????????????
          <param-value></param-value>
          ????????
          </init-param>
          ????????
          <load-on-startup>1</load-on-startup>
          ????
          </servlet>

          ??????
          <servlet-mapping>
          ????????
          <servlet-name>Connector</servlet-name>
          ????????
          <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
          ??????
          </servlet-mapping>
          ??
          ??????
          <servlet-mapping>
          ????????
          <servlet-name>SimpleUploader</servlet-name>
          ????????
          <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
          ??????
          </servlet-mapping>?

            請(qǐng)注意,這兩個(gè)servlet的url-pattern我都在原來(lái)代碼的前面加上了/fckeditor。

            然后,我們就可以拋開(kāi)JavaScript,而在服務(wù)器端使用標(biāo)簽來(lái)創(chuàng)建Web編輯器了。先在EditPosts.jsp中引入標(biāo)簽庫(kù):
          <%@?taglib?uri="http://fckeditor.net/tags-fckeditor"?prefix="FCK"?%>

            再在原來(lái)放textarea的地方,放如下代碼:
          <FCK:editor?id="EditorDefault"?basePath="/xkland/fckeditor/"
          ????????imageBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
          ????????linkBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
          ????????flashBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
          ????????imageUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
          ????????linkUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
          ????????flashUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
          ????????????This?is?some?
          <strong>sample?text</strong>.?You?are?using?<a?href="http://www.fredck.com/fckeditor/">FCKeditor</a>.
          ????
          </FCK:editor>

            
            這里有一點(diǎn)一定要注意,那就是這里的屬性都要避免使用相對(duì)路徑。

            刷新頁(yè)面,又見(jiàn)編輯器,此時(shí),可以順利的上傳文件了。整合編輯器的任務(wù)到此完成。下一步,就是怎樣對(duì)編輯器進(jìn)行更多的控制了。

          五、對(duì)編輯器進(jìn)行更多控制

            1、自定義工具條:打開(kāi)fckeditor目錄下的fckconfig.js文件,添加如下代碼:

          FCKConfig.ToolbarSets["Usable"]?=?[
          ????['Source','Preview'],
          ????['Undo','Redo','
          -','SelectAll','Cut','Copy','Paste','-','RemoveFormat','-','Find','Replace'],
          ????['Link','Unlink','Anchor'],
          ????['FitWindow','
          -','About'],
          ????'
          /',
          ????['Bold','Italic','Underline','StrikeThrough','
          -','Subscript','Superscript'],
          ????['OrderedList','UnorderedList','
          -','Outdent','Indent'],
          ????['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
          ????['Image','Flash','Table','Rule','Smiley'],
          ????'
          /',
          ????['Style','FontFormat','FontName','FontSize'],
          ????['TextColor','BGColor']
          ]?;



            2、添加常用的中文字體:在上面打開(kāi)的文件中找到

          FCKConfig.FontNames?=?'Arial;Comic?Sans?MS;Courier?New;Tahoma;Times?New?Roman;Verdana'?;
          加上幾種我們常用的字體
          FCKConfig.FontNames?=?'宋體;黑體;隸書;楷體_GB2312;Arial;Comic?Sans?MS;Courier?New;Tahoma;Times?New?Roman;Verdana'?;


            3、更改JSP頁(yè)面中定義編輯器的標(biāo)簽,如下:
          <FCK:editor?id="EditorDefault"?basePath="/xkland/fckeditor/"
          ????????skinPath
          ="/xkland/fckeditor/editor/skins/office2003/"
          ????????toolbarSet
          ="Usable"
          ????????imageBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
          ????????linkBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
          ????????flashBrowserURL
          ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
          ????????imageUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
          ????????linkUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
          ????????flashUploadURL
          ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
          ????????????This?is?some?
          <strong>sample?text</strong>.?You?are?using?<a?href="http://www.fredck.com/fckeditor/">FCKeditor</a>.
          ????
          </FCK:editor>

          ?

            刷新頁(yè)面,可以看到編輯器的效果如下:
          51.JPG


          六、如何獲取編輯器中插入的圖片

            從文章開(kāi)頭的功能設(shè)計(jì)我們可以看出,當(dāng)用戶編輯完文章后,我們應(yīng)該能獲取文章中插入的圖片信息。怎樣獲取編輯器中的插入的圖片呢?IT進(jìn)行時(shí)在他的文章FCKeditor的幾點(diǎn)重要改進(jìn)和使用心得,值得分享 中是這樣做的:在上傳圖片的對(duì)話框的JavaScript中添加代碼,使得當(dāng)用戶插入圖片點(diǎn)OK后通知列表框,代碼如下:

          try??{????????
          ?????????
          var??obj??=??window.dialogArguments.Editor.parent.document;
          ????????obj.getElementById(?
          "?tip.c_tip_has_pic?"?).value??=???"?1?"?;
          ????}
          ?catch?(e)??{}?

            
            我認(rèn)為這個(gè)方法不好,第一,這個(gè)方法是侵入性的,需要修改FCKeditor的代碼;第二,這種方法能夠在用戶插入圖片的時(shí)候獲得圖片信息,但是如果用戶插入的圖片,接著又把圖片從文章中刪除了呢?這時(shí)候是無(wú)法跟蹤的。

            正確的思路應(yīng)該是在編輯器失去焦點(diǎn)的時(shí)候,獲取編輯器中的文檔,通過(guò)DOM取得文章中所有的圖片。代碼如下:

          function?FCKeditor_OnComplete(?editorInstance?)
          {
          ????editorInstance.Events.AttachEvent(?'OnBlur',?onEditorBlur?)?;
          }


          function?onEditorBlur(){
          ????
          var?oSelect?=?$("img_select");
          ????
          for(var?i=oSelect.options.length-1;?i>0;?i--){
          ????????oSelect.options[i]?
          =?null;
          ????}

          ????oEditor?
          =?FCKeditorAPI.GetInstance('EditorDefault');
          ????
          var?imgs?=?oEditor.EditorDocument.body.all.tags("img");
          ????
          for(var?i=0;?i?<?imgs.length;?i++){
          ????????
          var?oOption?=?document.createElement("option");
          ????????oOption.appendChild(document.createTextNode(imgs[i].src));
          ????????oSelect.appendChild(oOption);
          ????}

          }


            上面是我在探索FCKeditor中的一些心得,有問(wèn)題的地方,歡迎大家探討。


          評(píng)論

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-15 22:41 by dudu
          FCKeditor 2.4在IE中Tab鍵不能產(chǎn)生空格,http://www.cnblogs.com/dudu/archive/2007/03/15/676467.html

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-15 22:57 by 海邊沫沫
          請(qǐng)問(wèn)站長(zhǎng)
          cnblogs是用的哪個(gè)編輯器啊?

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-15 23:20 by dudu
          CuteEditor和FreeTextBox。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-15 23:35 by 海邊沫沫
          我最喜歡的就是博客園的貼代碼的功能。
          還有對(duì)上傳的圖片的管理也是我喜歡的。

          對(duì)這兩個(gè)編輯器,我也要試試看。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-15 23:52 by 祎恬凡
          今天晚上也在整合這個(gè)東西 ,不過(guò)我第一次 看你文章的時(shí)候,還是只有 第一段

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-16 08:47 by dudu
          @海邊沫沫
          CuteEditor、FreeTextBox只支持.NET。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-16 12:55 by liujf
          很好的東西,試一下看看:)

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-16 12:56 by liujf
          不錯(cuò)啊,借鑒借鑒:)

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-25 23:15 by 海邊沫沫
          通過(guò)上面的一篇文章,使我又認(rèn)識(shí)到一個(gè)問(wèn)題,那就是數(shù)據(jù)庫(kù)中其實(shí)根本不需要pictures字段,因?yàn)樵诳蛻舳耸褂肈OM解析也很方便,正如文中代碼所示。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-25 23:27 by 海邊沫沫
          還有其它幾個(gè)表,它們的創(chuàng)建代碼分別如下:

          存儲(chǔ)文章類別的表

          CREATE TABLE `catalogs` (
          `id` int(11) NOT NULL auto_increment,
          `name` varchar(20) NOT NULL,
          `image` varchar(40) NOT NULL,
          PRIMARY KEY (`id`)
          ) ENGINE=InnoDB DEFAULT CHARSET=utf8


          存儲(chǔ)文章回復(fù)的表

          CREATE TABLE `replys` (
          `id` int(11) NOT NULL auto_increment,
          `subject` varchar(50) NOT NULL,
          `content` text,
          `pictures` varchar(2000) default NULL,
          `userid` int(11) NOT NULL,
          `time` timestamp NOT NULL default CURRENT_TIMESTAMP,
          PRIMARY KEY (`id`)
          ) ENGINE=InnoDB DEFAULT CHARSET=utf8

          這里其實(shí)也可以完全不要pictures字段,因?yàn)楣芾砩蟼鲌D片的工作已經(jīng)完全由FCKeditor編輯器代勞了。

          如果要開(kāi)發(fā)一個(gè)完善的系統(tǒng),還有很多問(wèn)題需要考慮。比如說(shuō)安全問(wèn)題。如果有的用戶希望自己上傳的圖片和發(fā)表的主題只有自己可以看,那么我們需要讓用戶選擇是公開(kāi)發(fā)表,還是僅群內(nèi)用戶可見(jiàn),還是只有自己能看見(jiàn)。因此需要修改topics表,以判斷一篇文章是能夠公開(kāi)的,還是屬于群組的,還是只有自己可以看的。另外,由于一個(gè)用戶可以屬于多個(gè)組,而有時(shí)他并不想一篇文章讓所有的組都可見(jiàn),所以還需要加入groups_topics表,以幫助某個(gè)主題在哪些群組里面可以看見(jiàn)。

          create table groups_topics(
          id int not null auto_increment primary key,
          groupid int not null,
          topicid int not null,
          index(groupid),
          index(topicid));

          alter table topics
          add column ispublic tinyint not null,
          add column isgroupvisiable tinyint not null;

          此外,由于所有上傳圖片的工作都由編輯器代勞了,所以不需要專門的表來(lái)對(duì)上傳文件進(jìn)行維護(hù)。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-03-25 23:32 by 海邊沫沫
          此外,還有一個(gè)難題,那就是如何給每一個(gè)用戶分配一個(gè)單獨(dú)的目錄用來(lái)保存用戶上傳的圖片。

          經(jīng)過(guò)我對(duì)FCKeditor的文檔的反復(fù)閱讀,發(fā)現(xiàn)FCKeditor自帶的API沒(méi)有辦法實(shí)現(xiàn)這樣的功能,所以,修改的重點(diǎn)還是在FCKeditor.java中。我們可以對(duì)源代碼進(jìn)行如下修改:

          1、打開(kāi)FCKeditor-2.3\src\com\fredck\FCKeditor\uploader目錄下的SimpleUploaderServlet.java文件,找到SimpleUploaderServlet類的doPost方法,它的代碼如下:

          public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

          if (debug) System.out.println("--- BEGIN DOPOST ---");

          response.setContentType("text/html; charset=UTF-8");
          response.setHeader("Cache-Control","no-cache");
          PrintWriter out = response.getWriter();


          String typeStr=request.getParameter("Type");

          String currentPath=baseDir+typeStr;

          String userName = request.getSession().getUser().getName();
          currentPath = currentPath + userName + "/";

          String currentDirPath=getServletContext().getRealPath(currentPath);
          currentPath=request.getContextPath()+currentPath;

          if (debug) System.out.println(currentDirPath);

          String retVal="0";
          String newName="";
          String fileUrl="";
          String errorMessage="";

          if(enabled) {
          DiskFileUpload upload = new DiskFileUpload();
          try {
          List items = upload.parseRequest(request);

          Map fields=new HashMap();

          Iterator iter = items.iterator();
          while (iter.hasNext()) {
          FileItem item = (FileItem) iter.next();
          if (item.isFormField())
          fields.put(item.getFieldName(),item.getString());
          else
          fields.put(item.getFieldName(),item);
          }
          FileItem uplFile=(FileItem)fields.get("NewFile");
          String fileNameLong=uplFile.getName();
          fileNameLong=fileNameLong.replace('\\','/');
          String[] pathParts=fileNameLong.split("/");
          String fileName=pathParts[pathParts.length-1];

          String nameWithoutExt=getNameWithoutExtension(fileName);
          String ext=getExtension(fileName);
          File pathToSave=new File(currentDirPath,fileName);
          fileUrl=currentPath+"/"+fileName;
          if(extIsAllowed(typeStr,ext)) {
          int counter=1;
          while(pathToSave.exists()){
          newName=nameWithoutExt+"("+counter+")"+"."+ext;
          fileUrl=currentPath+"/"+newName;
          retVal="201";
          pathToSave=new File(currentDirPath,newName);
          counter++;
          }
          uplFile.write(pathToSave);
          }
          else {
          retVal="202";
          errorMessage="";
          if (debug) System.out.println("Invalid file type: " + ext);
          }
          }catch (Exception ex) {
          if (debug) ex.printStackTrace();
          retVal="203";
          }
          }
          else {
          retVal="1";
          errorMessage="This file uploader is disabled. Please check the WEB-INF/web.xml file";
          }


          out.println("");
          out.flush();
          out.close();

          if (debug) System.out.println("--- END DOPOST ---");

          }

          我們要做的就是在String currentPath=baseDir+typeStr;這一句之后加入從Session中取出用戶名,并添加到currentPath字符串之后的操作,如代碼中加亮部分所示。

          2、打開(kāi)FCKeditor-2.3\src\com\fredck\FCKeditor\connector目錄中的ConnectorServlet.java文件,進(jìn)行同法處理。

          最后,重新編譯打包即可,記得一定要import com.xkland.domain.User類才能編譯通過(guò)哦。

          至此,經(jīng)過(guò)簡(jiǎn)單的修改即可實(shí)現(xiàn)我們想要的功能。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-07-15 09:32 by MagicBlack
          正確的思路應(yīng)該是在編輯器失去焦點(diǎn)的時(shí)候,獲取編輯器中的文檔,通過(guò)DOM取得文章中所有的圖片。代碼如下:

          請(qǐng)問(wèn)一下這個(gè)代碼 直接復(fù)制到文件里就能用嗎?

          失去焦點(diǎn) 事件怎么添加進(jìn)去???

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-07-16 21:02 by 海邊沫沫
          不錯(cuò),這段代碼是Javascript代碼,直接拷貝到j(luò)sp頁(yè)面的<script></script>標(biāo)簽中,就會(huì)對(duì)這個(gè)頁(yè)面中的編輯器起作用。

          失去焦點(diǎn)事件是怎么加進(jìn)去的呢?因?yàn)樵诰庉嬈骷虞d完成后,它會(huì)自動(dòng)調(diào)用FCKeditor_OnComplete事件,而我們就是在這個(gè)事件里面注冊(cè)O(shè)nBlur事件的,如下代碼:

          function FCKeditor_OnComplete( editorInstance )
          {
          editorInstance.Events.AttachEvent( 'OnBlur', onEditorBlur ) ;
          }

          而OnBlur事件就會(huì)調(diào)用下面的函數(shù)
          function onEditorBlur(){
          var oSelect = $("img_select");
          for(var i=oSelect.options.length-1; i>0; i--){
          oSelect.options[i] = null;
          }
          oEditor = FCKeditorAPI.GetInstance('EditorDefault');
          var imgs = oEditor.EditorDocument.body.all.tags("img");
          for(var i=0; i < imgs.length; i++){
          var oOption = document.createElement("option");
          oOption.appendChild(document.createTextNode(imgs[i].src));
          oSelect.appendChild(oOption);
          }
          }

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-07-30 16:25 by 小白之家
          回帖,好,越來(lái)越喜歡blog主了

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-08-13 19:59 by 烏龍
          可不可以發(fā)一下你修改后的源文件給我啊??謝謝了。。
          我的郵箱;shendiao_no.1@163.com

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-08-23 11:03 by Jessica
          我想問(wèn)下樓主我在利用FCK上傳圖片的時(shí)候出現(xiàn) this file uploader is disabled,please check the WEB-INF/web.xml file,是什么問(wèn)題啊?

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-08-26 17:47 by 海邊沫沫
          @烏龍

          因?yàn)槲业碾娔X曾多次重新分區(qū)重裝系統(tǒng),因此也不知道原來(lái)的代碼到哪里去了。
          抱歉!

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-08-26 17:50 by 海邊沫沫
          @Jessica
          請(qǐng)看我文章中的第四大點(diǎn)

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-08-28 14:24 by 姜利陽(yáng)
          好東東,收藏

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2007-10-09 17:04 by 小偉
          @Jessica
          <init-param>
          <param-name>enabled</param-name>
          <param-value>true</param-value>
          </init-param>
          在web.xml中設(shè)enabled為true

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2007-10-13 00:19 by apple0668
          好東東,收藏啦。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-02-18 22:43 by FastUnit
          有深度,學(xué)習(xí)。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-02-19 09:03 by yaping
          好東西!

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-03-25 21:35 by 和風(fēng)細(xì)雨
          記號(hào)!

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-04-04 15:28 by wswz
          博主真是好人。加油,繼續(xù)關(guān)注您的博客

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-06-17 22:20 by 在線時(shí)光
          博主真歷害,講得非常好!

          想請(qǐng)教一個(gè)問(wèn)題,為什么我在FCKeditor編輯器里粘貼來(lái)自網(wǎng)上的文章或word中的文章,前提是不去除原有的格式信息,當(dāng)我點(diǎn)擊發(fā)布后,JSP的POST頁(yè)面出現(xiàn)出錯(cuò)誤,在此上下文中不允許使用'times'。此處只允許使用常量、表達(dá)式或變量。不允許使用列名等錯(cuò)誤,不知是什么原因,我如果在編輯器里粘貼的信息是去除掉格式的,那我點(diǎn)發(fā)布時(shí)沒(méi)有問(wèn)題,會(huì)正常保存到SQL2000的數(shù)據(jù)庫(kù)的CONTENT字段中去,我的CONTENT字段用的是NTEXT類型.謝謝了!希望能幫我一下

          郭中革
          13867353043

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2008-08-05 12:44 by aa
          你用的是哪個(gè)模板啊

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2008-08-13 08:13 by 笑笑笑笑笑笑笑
          你用的是哪個(gè)模板啊

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-01-09 02:05 by rachel
          博主寫的真好

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-04-02 16:56 by 創(chuàng)意產(chǎn)品網(wǎng)
          嗯,不錯(cuò)。好像ECshop也是用的這個(gè)編輯器吧。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-04-27 21:34 by zsrnm
          博主,小弟資質(zhì)愚鈍,想請(qǐng)教個(gè)問(wèn)題,var oSelect = $("img_select"); 是什么意思,我沒(méi)看懂。因?yàn)樵趫?zhí)行過(guò)程中,運(yùn)行到這句時(shí)會(huì)報(bào)錯(cuò)。如果能解答的話,非常感謝

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2009-05-04 18:10 by 海邊沫沫
          這個(gè)語(yǔ)句用到了Prototype庫(kù)的$函數(shù),要成功運(yùn)行必須在你的頁(yè)面中導(dǎo)入該庫(kù)

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-05-08 10:02 by zsrnm
          那么實(shí)際上var oSelect = $("img_select"); 和var oSelect = document.getElementById("img_select");是一回事吧?

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2009-05-11 18:15 by 海邊沫沫
          是的

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-05-13 21:21 by zsrnm
          謝謝博主!

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2009-05-26 17:10 by yy
          有個(gè)問(wèn)題啊,如果放在失去焦點(diǎn)事件里的話,切換到其他任何窗口時(shí)都會(huì)觸發(fā)這個(gè)事件啊?但是這個(gè)時(shí)候?qū)嶋H上是不用觸發(fā)事件的。所以這個(gè)樓主這個(gè)方法還不見(jiàn)得是最好的。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-05-26 17:48 by 海邊沫沫
          樓上的有道理,不過(guò)在這個(gè)案例中這不是問(wèn)題,因?yàn)槲覀冎皇且崛∥恼轮械乃袌D片信息并加入下面的選擇框而已。當(dāng)然,如果是對(duì)于一些要彈出對(duì)話框這樣的應(yīng)用,那就比較煩人了。

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-06-26 23:58 by zsrnm
          另外我還有個(gè)問(wèn)題,就是在fck編輯器里,查看源代碼,圖片的路徑是 src="/ztc/pubfile/image/2009/05/351117.jpg" ,但是為什么在選擇框中出現(xiàn)的卻是http://localhost:8080/ztc/pubfile/image/2009/05/351117.jpg" target="_new" rel="nofollow">http://localhost:8080/ztc/pubfile/image/2009/05/351117.jpg
          ,為什么會(huì)出現(xiàn)前面的那一串東西http://localhost:8080?為什么選擇框中不是/ztc/pubfile/image/2009/05/351117.jpg

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-06-27 00:01 by zsrnm
          另外我還有個(gè)問(wèn)題,就是在fck編輯器里,查看源代碼,圖片的路徑是 src="/ztc/pubfile/image/2009/05/351117.jpg" ,但是為什么在選擇框中出現(xiàn)的卻是http://localhost:8080/ztc/pubfile/image/2009/05/351117.jpg"" target="_new" rel="nofollow">http://localhost:8080/ztc/pubfile/image/2009/05/351117.jpg",為什么會(huì)出現(xiàn)前面的那一串東西http://localhost:8080?為什么選擇框中不是/ztc/pubfile/image/2009/05/351117.jpg

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-10-13 16:19 by 星期五
          站長(zhǎng) 這個(gè)編輯器 2.3 跟 2.4 之間有個(gè)問(wèn)題,2.3 選擇字體,鼠標(biāo)點(diǎn)擊不會(huì)還原上一個(gè)字體,但是 2.4選擇字體后,鼠標(biāo)點(diǎn)擊時(shí)會(huì)還原上一個(gè)字體。這是配置問(wèn)題,還是代碼問(wèn)題?

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2009-10-30 19:29 by Merlinbest
          LZ真強(qiáng)大 謝謝啦 研究研究

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor  回復(fù)  更多評(píng)論   

          2012-04-03 13:10 by xiaoyi

          <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
          </servlet-mapping>

          <servlet-mapping>
          <servlet-name>SimpleUploader</servlet-name>
          <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>

          樓主我的connectors下沒(méi)jsp這個(gè)文件呀!!!

          # re: SpringSide開(kāi)發(fā)實(shí)戰(zhàn)(七):在項(xiàng)目中整合FCKeditor[未登錄](méi)  回復(fù)  更多評(píng)論   

          2013-03-28 13:57 by jack
          博主 我想您能給我發(fā)一份Java應(yīng)用 fckeditor 的源碼文件給我嗎? 931594331@qq.com 或者 liaomingfu_java@163.com 非常謝謝!!!急求
          主站蜘蛛池模板: 新泰市| 达尔| 卢湾区| 鹤峰县| 稻城县| 龙陵县| 平湖市| 绩溪县| 咸丰县| 永顺县| 新民市| 瑞安市| 林州市| 武宣县| 留坝县| 绥德县| 丹巴县| 黔江区| 临沭县| 清流县| 东兴市| 武城县| 石林| 吴忠市| 理塘县| 页游| 隆安县| 伊通| 齐河县| 元朗区| 蕉岭县| 琼中| 玉环县| 辰溪县| 兴安盟| 嘉鱼县| 荣昌县| 湛江市| 美姑县| 宣威市| 勐海县|