Java Web实用开发技术(4)------在线编辑器

在线编辑器是一种通过浏览器等对文字、图片等内容进行在线编译修改的工具，让用户在网站上获得“所见即所得”效果。例如：实现诸如留言板、论坛、新闻发布等Web模块时，经常用到在线编译器，它使得我们可以像Word一样在线编译我们的留言或新闻内容。

在线编译器一般具有如下基本功能：

(1)文字的编辑

(2)文字格式(如字体、大小、颜色)的设置

(3)表格的插入和编辑；图片、音频、视频等多媒体的上传、导入和样式修改等

常见的在线编辑器有：

FreeTextBox、CKEditor(其旧版本为FCKeditor)、KindEditor、eWebEditor等

这里我用的是比较流行的CKEditor为例介绍在线编辑器的使用。

1、CKEditor的下载

CKEditor 4 的直达链接：https://ckeditor.com/ckeditor-4/download/

一般的话选择 Standard Package就可以

2、CKEditor的创建

将CKEditor工具嵌入到网页中有很多方法，可以用JavaScript或者JSP标签完成CKEditor对象的创建

3、CKEditor的使用

(1)先将解压后的ckeditor目录复制到web工程的WebContent下

(2)在WebContent下创建页面editor.html

页面中关键的步骤有两个：

第一：导入ckeditor.js文件，导入方式：

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

第二：创建textarea元素，将其class属性设置为ckeditor

4、CKEditor的配置：

CKEditor编辑器可以自由配置，如：编辑器的语言，工具集，界面背景色等等。CKEditor的配置都集中在ckeditor/config.js文件中，可以根据自己的需要添加或者更改其中的内容。

5、、CKEditor实现在线编译

案例——使用CKEditor编辑公告内容

由两个jsp文件组成，一个jsp为在线编辑的页面，另一个则是显示结果的jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"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=UTF-8">
<title>在线编辑内容</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body><center><form action="show.jsp" method="post">编辑公告内容<textarea class="ckeditor" name="newsBody" rows="10" cols="80"></textarea><input type="submit" value="显示公告内容"></form></center>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"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=UTF-8">
<title>显示公告内容</title>
</head>
<body><%request.setCharacterEncoding("UTF-8"); %>${param.newsBody }
</body>
</html>

Java Web实用开发技术(4)------在线编辑器相关推荐

Java Web实用开发技术
Java Web实用开发技术图形验证码图形验证码的实现图形验证码的生成案例--带图形验证码的登陆模块 MD5加密在线编辑器 CKEditor下载及配置 CKEditor的使用文件的上传与下 ...
java web 应用技术与案例教程_《Java Web应用开发技术与案例教程》怎么样_目录_pdf在线阅读 - 课课家教育...
出版说明前言第1章 java Web应用开发技术概述 1.1 Java Web应用开发技术简介 1.1.1 Java Web应用 1.1.2 Java Web应用开发技术 1.2 Java Web ...
java web应用开发技术_第一章 Java Web应用开发技术
Java Web应用开发是基于JavaEE(JavaEnterprise Edition)框架的,而JavaEE是建立在Java平台上的企业级应用解决方案.JavaEES框架提供的Web开发技术主要支 ...
canoe开发从入门到精通pdf_阿里技术官手写801页PDF《精通Java Web整合开发》
基础篇第1~3章为基础篇,重点讲解基于开源架构Java EE应用开发的优势及其开发运行环境的安装配置,同时对JSP技术体系也进行了详细介绍. 基础篇的主要内容包括: Java Web应用开发技术选用 ...
java实现模拟考试系统,Java Web应用开发—— 在线模拟考试系统-毕业设计
Java Web应用开发-- 在线模拟考试系统-毕业设计毕毕业业设设计(论计(论文)文) 题题目目 Java Web 应用开发在线模拟考试系统的设计与实现学学院院计算机学院专专 ...
进行Java Web项目开发需要掌握的技术
目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Ja ...
Java Web 高性能开发，第 1 部分: 前端的高性能
原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/#ibm-pcon 魏强, 研究生, 东北大学简介: Web ...
虚拟研讨会:移动Web应用开发技术最新动态
虚拟研讨会:移动Web应用开发技术最新动态 2011年03月02日为了掌握移动Web应用开发的最新动态,InfoQ邀请一些该领域最流行的库.工具和框架的缔造者,组织了一场虚拟研讨会. Michael ...
根据实践经验，讲述些学习Java web能少走的弯路，内容摘自java web轻量级开发面试教程...
在和不少比较上进的初级程序员打交道的过程中,我们总结出了一些能帮到合格程序员尽快进阶的经验,从总体上来讲,多学.多实践不吃亏.本文来是从 java web轻量级开发面试教程从摘录的. 1 哪些知识点 ...

Java Web实用开发技术(4)------在线编辑器

Java Web实用开发技术(4)------在线编辑器相关推荐

最新文章

热门文章