专栏首页Java技术分享圈杨老师教你学会使用富文本编辑器KindEditor之添加页面设计

杨老师教你学会使用富文本编辑器KindEditor之添加页面设计

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/84922606

今日课堂无聊,简单写了些前台,顺便给大家说说富文本编辑器的使用教程

对于分类描述,我采用了富文本编辑器~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)咨询。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

            1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

    杨校
  • 杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比

    杨校
  • 杨老师课堂之JavaScript右下角广告弹框

    杨校
  • 简单的文本框输入自动提示

    简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来。

    书童小二
  • python脚本

    py3study
  • Javascript基础回顾 之(一) 类型

      本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Jav...

    用户1153966
  • Javascript基础回顾 之(一) 类型

      本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Jav...

    用户1153966
  • 零基础学习 Python 之嵌套函数

    我在几天以前的文章中(零基础学习 Python 之函数对象)说过,函数不单单可以作为对象来传递,还可以在一个函数里面嵌套一个函数,这个就是我们今天要讲的嵌套函数...

    Rocky0429
  • Object.observe简介

    Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是...

    IMWeb前端团队
  • Object.observe 简介

    Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是“谨慎使用”级...

    腾讯IVWEB团队

扫码关注云+社区

领取腾讯云代金券