使用博客编辑工具插件的案例-->CKeditor的使用

来源:互联网 发布:淘宝军用正品望远镜 编辑:程序博客网 时间:2024/06/06 03:55


1.到fckeditor网站下载相关的fckeditor插件的压缩包,然后寻找相关的使用文档。通常在developer那个相关类别中,如上一篇日志就是在其网站上查找到的相关文档。
2.将其解压并粘贴到工程的根目录即是WebRoot中,对于有红叉的点击右键-->MyEclipse-->Exclude Form Validation来忽略它的错误。
3.在head文件中进行调用其内部的js文件。如下所示,其中很重要的是第二个Script文件中的replace文件名要与body中的textarea中的name的名字要相同。
4.我调试的最主要的错误在于:网站上的技术文档中指明第一个javascript中的src中应该写为“src="/ckeditor/ckeditor.js”,而实际上在操作的时候第一个“/”应该去掉,即是编程所谓的src="ckeditor/ckeditor.js”。然后就调试成功了,相比于就插件的页面,新的插件明显的美观得多了。如下图所示:当然这个是简洁版本的,还有功能比较强大一点的,不过要对代码进行设置,即是不要那个basic属性,去掉的代码如下:uiColor:'#CCFFFF'这个值也可以在config.js文件中进行设置,不一定非要在这个地方来进行设置。

,
      {
        toolbar : 'Basic',
        uiColor : '#CCFFFF'
      }

 

使用博客编辑工具插件的案例--CKeditor的使用 - lishirong - The CTO of LiShirong
 
完整版的样式如下:
使用博客编辑工具插件的案例--CKeditor的使用 - lishirong - The CTO of LiShirong
 

 

5.以下是代码部分:

<%@page language="java" contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8s" />
<title>add Blog content</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
   window.onload = function()
   {
      CKEDITOR.replace( 'editor1',
      {
        toolbar : 'Basic',
        uiColor : '#CCFFFF'
      } );
   }; 
</script>
</head>

<body>
<p>请输入博客内容</p>
<form id="form1" name="form1" method="post" action="">
  <table width="100%" border="0">
    <tr>
      <th width="8%" scope="row">主题:</th>
      <td width="92%"><label>
        <input name="title" type="text" id="title" size="60" />
      </label></td>
    </tr>
    <tr>
      <th scope="row">类别:</th>
      <td><label>
        <select name="select">
          <option value="1">心情故事</option>
          <option value="2">旅游的故事</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <th scope="row">内容:</th>
      <td><label>
        <textarea name="editor1" cols="58" rows="15" id="editor1"></textarea>
      </label></td>
    </tr>
    <tr>
      <th scope="row"><label>
        <input name="reset" type="reset" id="reset" value="重置" />
      </label></th>
      <td><label>
        <input name="Submit" type="submit" id="Submit" value="提交" />
      </label></td>
    </tr>
  </table>
</form>
<p>&nbsp;</p>
</body>
</html>

0 0
原创粉丝点击