fckeditor的简单使用
时间:2022-07-24
本文章向大家介绍fckeditor的简单使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="res/js/jquery.js"></script>
<script type="text/javascript" src="res/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
$(function(){
var fck=new FCKeditor("myTextArea");
fck.BasePath="res/fckeditor/";
fck.ReplaceTextarea();
})
</script>
</head>
<body>
<textarea rows="" cols="" id="myTextArea"></textarea>
</body>
</html>
以上是最基础的引入,同时可以自定义编辑框的工具栏,在fckconfig.js中复制
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
更改为
FCKConfig.ToolbarSets["myToolBar"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']
] ;
之后在jsp中添加
$(function(){
var fck=new FCKeditor("myTextArea");
fck.BasePath="res/fckeditor/";
fck.ToolbarSet="myToolBar";//自定义工具栏
fck.ReplaceTextarea();
})
fck支持图片上传到服务器,只要加入
//指定到后台Control层进行实现
fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";
注意:写控制层时需要引入相应的jar包java-core-2.6.jar,使用该jar包提供的类来完成代码,如下:
// 上传Fck图片
@RequestMapping(value = "/upload/uploadFck.do")
public void uploadFck(HttpServletRequest request, HttpServletResponse response) {
// 强转request 支持多个
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
// 获取值 支持多个
Map<String, MultipartFile> fileMap = mr.getFileMap();
// 遍历Map
Set<Entry<String, MultipartFile>> entrySet = fileMap.entrySet();
for (Entry<String, MultipartFile> entry : entrySet) {
// 上传上来的图片
MultipartFile pic = entry.getValue();
// 扩展名
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
// 图片名称生成策略
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
// 图片名称一部分
String format = df.format(new Date());
// 随机三位数
Random r = new Random();
// n 1000 0-999 99
for (int i = 0; i < 3; i++) {
format += r.nextInt(10);
}
// 实例化一个Jersey
Client client = new Client();
// 保存数据库
String path = "upload/" + format + "." + ext;
// 另一台服务器的请求路径是?
String url = Constants.IMAGE_URL + path;
// 设置请求路径
WebResource resource = client.resource(url);
// 发送开始 POST GET PUT
try {
resource.put(String.class, pic.getBytes());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 返回Url给Fck fck-core...jar ckeditor
UploadResponse ok = UploadResponse.getOK(url);
// response 返回对象
// response write
// response print
// 区别:
// 字符流
// 字节流
try {
response.getWriter().print(ok);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 图片缓存机制的深入理解
- Ubuntu18.04安装Nvidia显卡驱动教程(图文)
- Android控件Spinner的使用方法(1)
- 学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果
- Ubuntu 20.04 CUDA&cuDNN安装方法(图文教程)
- Android开发之基于DialogFragment创建对话框的方法示例
- Android图片压缩的实例详解
- Android编程之手机壁纸WallPaper设置方法示例
- 手把手教你在腾讯云上搭建hadoop3.x伪集群的方法
- Android从网络中获得一张图片并显示在屏幕上的实例详解
- Android ListView中headerview的动态显示和隐藏的实现方法
- Android编程使用Service实现Notification定时发送功能示例
- Android基于ViewFilpper实现文字LED显示效果示例
- Android ViewPager导航小圆点实现无限循环效果
- ViewPager打造轮播图Banner/引导页Guide