CKEditor 3.0（FCKEditor3.0)的简略安装配置使用 _Web前端

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>