在intraweb11中輕松實(shí)現(xiàn)通用的html文本編輯器

1、在IntraWeb11中輕松實(shí)現(xiàn)通用的HTML文本編輯器高勇摘要：在delphiXE下用IntraWeb實(shí)現(xiàn)了HTML文本編輯器。詳述了其實(shí)現(xiàn)的關(guān)鍵步驟，并給出了所有源代碼。關(guān)鍵詞：IntraWeb；HTML；文本編輯器；Ckedit筆者之前在2010年23期上發(fā)表的一篇：“使用IntraWeb實(shí)現(xiàn)通用的HTML文本編輯器”，近期突然發(fā)現(xiàn)在新的開發(fā)環(huán)境下調(diào)試不能通過。經(jīng)過幾天細(xì)致分析終于把問題解決了，也為了讓新讀者不必再去翻找之前的文章

2、，現(xiàn)將其整體修改如下。其他可視控件的前面，請(qǐng)?jiān)贗WMemo110上點(diǎn)擊右鍵，選擇Control下的SendtoBack即可。（3）將一IWRectangle控件放在頁面上，這里面將放置HTML多功能編輯器，它的寬度為程序運(yùn)行時(shí)的實(shí)際寬度。（4）編寫如下函數(shù)（導(dǎo)入HTML多功能編輯器的代碼）。當(dāng)頁面生成時(shí)運(yùn)行以下代碼：所有源代碼在文件夾edit1中，其中，edit1wwwrootfiles文件夾中的images文件夾是要使用的基本素材，靠

3、它來實(shí)現(xiàn)HTML文本編輯器，如果愿意的話，就把它當(dāng)成一個(gè)控件吧。運(yùn)行效果如圖1所示。procedureTIWFm1.IWAppFmCreate(Sender:TObject)varAText:TStringListAFile:StringBegin找到“控件”中的edithtml.htm文件。WebApplication.ApplicationPath為主程序所在根目錄AFile:=WebApplication.ApplicationP

4、athfilesimagespostedithtml.htm如果文件存在，則將其內(nèi)容導(dǎo)入到AText，再將AText.Text的值賦予IWRectangle1.Text，這樣，程序運(yùn)行時(shí)就會(huì)在IWRectangle1中顯示HTML文本編輯器ifFileExists(AFile)thenbeginAText:=TStringList.CreateAText.LoadFromFile(AFile)IWRectangle1.Text:=ATe

5、xt.TextAText.Free釋放臨時(shí)創(chuàng)建的AText變量endend編輯器的實(shí)現(xiàn)像以前一樣新建一個(gè)IntraWeb工程，命名為Project1.dpr。請(qǐng)打開源代碼自己對(duì)照來看。以下是關(guān)鍵步驟：（1）將“控件”放到files文件夾中（將images文件夾拷貝到files文件夾下），不要改變其中任何內(nèi)容，這是必要條件。請(qǐng)看Unit1單元。（2）將一TIWMemo控件放在該頁面上，并命名為IWMemo110（切記一定要是這個(gè)名字），將

6、其拉伸到最小，放到其他可視控件的后面，這里是放在IWRectangle1控件的后面，移動(dòng)IWRectangle1控件即可看到。切記一定要放在可視控件的后面，這樣做是為了在程序運(yùn)行時(shí)不被用戶看到。如果在1（5）在窗口中放置一個(gè)提交用的按鈕IWButton1，如圖2所示。其TIWEvents中的屬性onMouseDown中加入如下代碼：Dvbbs_CopyData(Body)returnCheckpostdata()在IWFm中的OnRen

7、der添加（如在OnCreate添加，只要刷新過頁面，編輯器的文件上傳功能就失效）則宋體楷體黑體仿宋體隸書微軟雅黑config.fontSize_defaultLabel=12pxconfig.fontSize_sizes=88px99px1010px1111px1212px1414px1616px1818px2020px2222px2424px2626px2828px3636px4848px7272pxconfig.filebrows

8、erBrowseUrl=ckfinderckfinder.htmlconfig.toolbar_Full=[[SourceNewPagePreviewTemplates][CutCopyPastePasteTextPasteFromWdPrintSpellCheckerScayt][UndoRedoFindReplaceAllRemoveFmat][FmCheckboxRadioTextFieldTextareaButtonImageB

9、uttonHiddenField][BoldItalicUnderlineStrikeSubSu（3）提交前的處理在窗口中放置一個(gè)提交用的按鈕IWButton1，如圖5所示，其TIWEvents中的屬性onMouseDown中加入如下代碼（MEMEDIT為iwmemo控件名大寫）：per][NumberedListBulletedListOutdentIndentBlockquote][JustifyLeftJustifyCenterJ

10、ustifyRightJustifyBlock][LinkUnlinkAnch][ImageFlashflvPlayerTableHizontalRuleSmileySpecialPageBreak][StylesFmatFontFontSize][TextColBGCol][MaximizeShowBlocks]]config.extraPlugins=flvPlayerconfig.filebrowserBrowseUrl=conf

11、ig.filebrowserImageBrowseUrl=ckfinderckfinder.htmlType=Imagesconfig.filebrowserFlashBrowseUrl=ckfinderckfinder.htmlType=Flashconfig.filebrowserUploadUrl=UploadFile.Htmlconfig.filebrowserImageUploadUrl=UploadImage.Htmlcon

12、fig.filebrowserFlashUploadUrl=UploadFlash.Html這樣做的目的是什么呢？大家可以試一下，如果沒有這一步，將編輯框內(nèi)的值取出來時(shí)為空，且刷新頁面后編輯框內(nèi)的內(nèi)容為空。這是將編輯框內(nèi)的htlm代碼取出來的關(guān)鍵一步。（4）配置CKEdit打開Filesckedit下config.js文件對(duì)編輯器作如下配置：（5）為Ckedit實(shí)現(xiàn)上傳圖片、文件及Flash、FLV功能在ServerController

13、的添加上傳代碼，具體如下：unitServerControllerinterfaceusesSysUtilsClassesIWServerControllerBaseIWBaseFmHTTPAppFOnNewSessionEvent新加入的:CKEDIT.editConfig=function(config)Definechangestodefaultconfigurationhere.Fexample:config.language=

14、frconfig.uiCol=#AADC6Econfig.language=zhcn配置語言config.uiCol=#FFF背景顏色config.width=auto寬度config.height=300px高度config.skin=office2003界面v2kamaoffice2003config.toolbar=Fullconfig.font_names=ArialTimesNewRomanVerdanavaroEdit=CK

15、EDIT.instances.MEMEDITdocument.getElementById(“MEMEDIT“).value=oEdit.getData()procedureTfrmDefault.IWAppFmRender(Sender:TObject)varjsString:stringbeginjsString:=CKEDIT.replace(“MEMEDIT“jsString:=jsStringfilebrowserImageU