杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1396312
今日课堂无聊，简单写了些前台，顺便给大家说说富文本编辑器的使用教程
对于分类描述，我采用了富文本编辑器~KingEditer的插件。 什么是富文本编辑器？
1.搭建富文本编辑器
去KingEditor官网去下载KingEditor文件 kingeditor网址链接： http://kindeditor.net/demo.php 不过要访问外国网站 或者直接CSDNhttps://download.csdn.net/download/kese7952/10838028 下载下来解压，把文件放入java项目中
下载解压后，如下图：
我是在WebContent或者WebRoot下新建了一个文件夹Folder，命名为：kindEditer，将lang,plugins,themes,kindediteror-all.js,kindediteror-all-min.js拷贝到kindEditer文件夹下了。如图：
在WebContent里新建了一个页面，命名为header.jsp,在其中引入了部分官方提供模板代码，（大家也可以选择拷贝我的代码：）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/kingEditer/themes/default/default.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" />
<script charset="utf-8" src="${pageContext.request.contextPath}/kingEditer/kindeditor-all-min.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kingEditer/lang/zh_CN.js"></script>
<!-- <script>
//简单模式初始化
//默认模式 注意：下方中的content属性值要与textarea的name属性值相同才可以
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script> -->
<script>
//默认模式 注意：下方中的content属性值要与textarea的name属性值相同才可以
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
K('input[name=getHtml]').click(function(e) {
alert(editor.html());
});
K('input[name=isEmpty]').click(function(e) {
alert(editor.isEmpty());
});
K('input[name=getText]').click(function(e) {
alert(editor.text());
});
K('input[name=selectedHtml]').click(function(e) {
alert(editor.selectedHtml());
});
K('input[name=setHtml]').click(function(e) {
editor.html('<h3>Hello KindEditor</h3>');
});
K('input[name=setText]').click(function(e) {
editor.text('<h3>Hello KindEditor</h3>');
});
K('input[name=insertHtml]').click(function(e) {
editor.insertHtml('<strong>插入HTML</strong>');
});
K('input[name=appendHtml]').click(function(e) {
editor.appendHtml('<strong>添加HTML</strong>');
});
K('input[name=clear]').click(function(e) {
editor.html('');
});
});
</script>
</head>代码中，我涉及到了两种模式：（二选一） 第一种简约模式，效果如图：
第二种默认的富文本编辑模式，效果如图：
这里，我选择的是第二种模式。【即，把简约模式进行了注释】
以下是我的代码示例： 步骤一：新建一个jsp页面，起名为addCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/header.jsp" %>
<br/>
<center>
<form action="${pageContext.request.contextPath}/CategoryServlet?op=addCategory" method="post" >
<table>
<tr>
<td>分类名称：</td>
<td>
<input type="text" name="name" >
</td>
</tr>
<tr>
<td>分类描述：</td>
<td><textarea id="mul_input" name="description" style="width:700px;height:200px;visibility:hidden;display: block;"></textarea>
</tr>
<tr class="input_control">
<td colspan="2">
<input type="submit" value="添加图书" id="btn1" >
</td>
</tr>
</table>
</form>
</center>首先我是在addCategory.jsp的开头就引进了一个header页面，header页面代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/kingEditer/themes/default/default.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" />
<script charset="utf-8" src="${pageContext.request.contextPath}/kingEditer/kindeditor-all-min.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kingEditer/lang/zh_CN.js"></script>
<!-- <script>
//简单模式初始化
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="description"]', {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script> -->
<script>
//默认模式
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="description"]', {
allowFileManager : true
});
K('input[name=getHtml]').click(function(e) {
alert(editor.html());
});
K('input[name=isEmpty]').click(function(e) {
alert(editor.isEmpty());
});
K('input[name=getText]').click(function(e) {
alert(editor.text());
});
K('input[name=selectedHtml]').click(function(e) {
alert(editor.selectedHtml());
});
K('input[name=setHtml]').click(function(e) {
editor.html('<h3>Hello KindEditor</h3>');
});
K('input[name=setText]').click(function(e) {
editor.text('<h3>Hello KindEditor</h3>');
});
K('input[name=insertHtml]').click(function(e) {
editor.insertHtml('<strong>插入HTML</strong>');
});
K('input[name=appendHtml]').click(function(e) {
editor.appendHtml('<strong>添加HTML</strong>');
});
K('input[name=clear]').click(function(e) {
editor.html('');
});
});
</script>
</head>
<body>
<h1>欢迎来到趣读书屋</h1>
<br/>
<br/>
<ul>
<li>
<a href="">添加分类</a>
</li>
<li>
<a href="">添加图书</a>
</li>
<li>
<a href="">用户注册</a>
</li>
<li>
<a href="">用户登录</a>
</li>
<li>
<a href="">购物车</a>
</li>
<li>
<a href="">我的订单</a>
</li>
</ul>
<br/>
<br/>
<hr/>注意：
因为我在设计分类实体的属性时，采用了描述的单词description，所以我在表单中的属性值也是description，所以在header中的content需要改成description，才会有效！！！
此时的富文本编辑器就实现了。 但是我还加入一些css样式，在WebContent下创建一个文件夹，命名为css，并且在css文件夹中船舰了一个文件，命名为main.css 代码如下：
@CHARSET "UTF-8";
body {
margin: 20 auto; font-size : 12px;
text-align: center;
font-size: 12px;
}
/* 导航栏 */
ul {
list-style: none;
margin-left: 280px;
}
/*无序列表*/
li {
float: left; /* 向左悬浮起来 */
height: 30px;/* 告诉为30像素 */
width: 100px;/* 宽度为100像素 */
color: white;/* 向左悬浮起来 */
background-color: red;/* 背景颜色为红色 */
margin-left: 3px;/* 每个li向左空开3个像素 */
border-radius: 15px 15px 0 0;/* 属于css3的样式： 加入圆角边框的形式；上边出现圆角弧度，下边没有弧度。若想都设置为带有弧度，可以全部填写15px */
}
/* 未点击时的超链接 */
li a:LINK {
font-size: 14px;/* 字体大小 */
line-height: 32px; /* 字体行高 */
text-decoration: none; /* 去除下划线 */
color: #efefef; /* 字体颜色 */
}
/* 鼠标悬浮时的超链接 */
li a:hover {
background-color: #e151ff;
color: #efefef;
}
/* 添加分类 */
table {
margin: 20 auto;
font-size: 14px;
text-align: center;
}
/*添加分类的按钮*/
#btn1 {
width: 160px;
margin: 20px auto;
box-sizing: border-box;
text-align: center;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #6a6f77;
-web-kit-appearance: none;
-moz-appearance: none;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
height: 2.7em;
width: 30%;
}
.form-input {
-web-kit-appearance: none;
-moz-appearance: none;
font-size: 1.4em;
height: 2.7em;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #6a6f77;
}
input[type="text"], #btn2 {
box-sizing: border-box;
text-align: center;
height: 2.7em;
font-size: 1.4em;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #6a6f77;
-web-kit-appearance: none;
-moz-appearance: none;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
input[type="text"]:focus {
border: 1px solid #ff7496;
}
作者： 杨校
出处： https://blog.csdn.net/kese7952
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年12月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
