使用博客编辑工具插件的案例-->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'
}
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> </p>
</body>
</html>
- 使用博客编辑工具插件的案例-->CKeditor的使用
- CKEditor插件的使用
- CKeditor插件的使用
- 在线编辑插件的使用
- ckeditor的使用
- CKEditor的使用
- CKEditor的使用
- ckeditor的使用
- Ckeditor 的使用
- CKEditor的使用示例
- CKEditor的简单使用
- ckeditor 的使用
- ckeditor的使用
- ckeditor的使用
- ckeditor的使用
- 关于使用js插件ckeditor报错的解决办法
- Jeditable - jQuery就地编辑插件的使用
- Ckeditor 3.01的使用体会
- 过滤器Filter的简单应用
- 监听器的使用与案例
- (转)MyEclipse SVN插件的安装
- CKeditor插件的使用
- java.sql-学习(浏览)
- 使用博客编辑工具插件的案例-->CKeditor的使用
- (转)ckeditor3.2.1文档翻译(用goole翻译的)
- DBUtils的综合应用--DBUtils连接池管理工具对连接池的管理
- TCP/IP协议族
- (转)request.getParameter()与request.setAttribute()的区别
- v512工作室_刘伟_Java高端培训系列视频_2009年博客系统项目笔记心得
- linux grep命令
- display分页组件使用流程总结
- 程序员应该给自己定一个\"一日时间表\"