分類  >  Web前端 >

CKEditor 3.0(FCKEditor3.0)的簡略安裝配置使用

tags:    時間:2013-12-09 23:20:58
CKEditor 3.0(FCKEditor3.0)的簡單安裝配置使用
寫道


CKEditor 3.0安裝配置,只是簡單的配置使用。

下載CKEditor 3.0,地址:http://ckeditor.com/

首先,下載下來解壓后,把文件夾ckeditor放到你的項目的下。

其次,在你的網頁裡面加入下面腳本:

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

注意紅色部分,這裡根據你自己的編輯器路徑修改,請務必配置正確。

再次,在需要引用CKEditor編輯器的地方加入下面代碼:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
這裡是內容
</textarea>

<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>


這樣,一個編輯器就基本可以使用了。



     <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <body id="homepage"> <div class="contentbox">     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>   <!-- Top Breadcrumb Start --> <form id="boardform" action="board!save.action" name=""boardform"" method="POST">     <table width="100%" border="0" cellspacing="3" cellpadding="0">     <tr>       <td align="right">標題:</td>       <td colspan="3">          <input type="text" value=""  size="70"  name="title" id="title"  class="easyui-validatebox"   required="true" />       </td>     </tr>           <tr>       <td align="right">公告內容:</td>       <td colspan="3">                   <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"> </textarea>             </td>     </tr>           <tr>       <td width="80" align="right">&nbsp;</td>       <td colspan="3">        <input type="button" value="提交" class="btn"  onClick="sub()" />         <input type="button" value="返回" class="btnalt"  onClick="javascript:window.location='board.action'" />         </td>     </tr>   </table>   </form>     <script type="text/javascript">     function sub(){     if($("#title").val() == ""){      top.easyAlert('提示信息','請輸入標題!');      return;     }     if(CKEDITOR.instances.content.getData() == ""){      top.easyAlert('提示信息','請輸入內容!');      return;     }     $.ajax({         type : "POST",      url : "board!save.action",        data : {'id' : $("#id").val(),'title' : $("#title").val(),'content' : CKEDITOR.instances.content.getData()},      success : function(json){       if(json != "error"){         top.easyAlert('提示信息','保存成功!','info',function(){window.location.href="/bo/board/board!newOrEdit.action?id="+json});       }else{        top.easyAlert('提示信息','更新失敗!');       }      }     });    }        CKEDITOR.replace( 'content',    {     extraPlugins : 'docprops',     // Remove unused plugins.     removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',     // Width and height are not supported in the BBCode format, so object resizing is disabled.     disableObjectResizing : true,     // Define font sizes in percent values.     fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",     toolbar :     [      ['Undo','Redo'],      ['Find','Replace','-','SelectAll','RemoveFormat'],      ['SpecialChar'],      ['Bold', 'Italic','Underline'],      ['FontSize'],      ['TextColor'],      ['NumberedList','BulletedList','-','Blockquote'],      ['Maximize']     ],     // Strip CKEditor smileys to those commonly used in BBCode.     smiley_images :     [      'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',      'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',      'cry_smile.gif','kiss.gif'     ],     smiley_descriptions :     [      'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',      'indecision', 'angel', 'cool', 'crying', 'kiss'     ]   } ); </script>      

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網