kindeditor富文本编辑器的使用精华版

最新推荐文章于 2021-05-19 12:44:48 发布

一只孤傲的狼

最新推荐文章于 2021-05-19 12:44:48 发布

阅读量257

点赞数

分类专栏：后端前端

本文链接：https://blog.csdn.net/weixin_45591668/article/details/105136130

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

后端

3 篇文章 0 订阅

订阅专栏

前端页面 (前端页面主要注意需要引入相关的js文件,我会在下面附图片你对应相对自己项目的地址位置)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/custom.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../css/font.css">
<link rel="stylesheet" href="../css/xadmin.css">
<link rel="stylesheet" href="../css/inputTags.css">
<link rel="stylesheet" href="../css/layui.css">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/custom.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
	href="../css/zTreeStyle.css">
<link rel="stylesheet" href="../css/treeselect.css">
<link rel="stylesheet" href="../css/base.css">


<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
<style type="text/css">
#editor-container {
	height: 600px;
	
}


</style>
</head>

<body style="background: #ffffff">
	<div class="">
		<div style="text-align:left;">
			<div class="x_content">
				<form class="form-horizontal form-label-left"
					style="margin-left: -90px">


					<div class="form-group">

						<label class="control-label col-md-2 col-xs-2" for="last-name">新闻标题：<span
											class="required">*</span>
						</label>
						<div class="col-md-4 col-xs-4">




							<input type="text" id="infoTitle" name="infoTitle"
								required="required" class="form-control col-md-7 col-xs-12">
						</div>


					</div>
					<div class="form-group">


						<label class="control-label col-md-2 col-xs-2" for="last-name">是否公示：<span
											class="required">*</span>
						</label>
						<div class="col-md-4 col-xs-4">
							<p>

								<input type="radio" class="flat" name="Publish" id="isPublish"
									value="1" checked="" required> 是 <input type="radio"
									class="flat" name="Publish" id="isPublish" value="0">否
							</p>
						</div>

					</div>


					<div class="form-group">
						<label class="control-label col-md-2 col-xs-2" for="last-name">新闻内容：<span
											class="required">*</span>
						</label>
						<div class="col-md-10  col-xs-10">
							<div class="" style="background: #ffffff">

								<div class="x_content">
									<div id="alerts"></div>

									<!-- 文本框的infocontent的内容   就是控制富文本的-->

	<textarea name="content" style="width: 99%; height: 400px; visibility: hidden;"></textarea>

									<br>

								</div>
							</div>
						</div>
					</div>
			</div>

			</form>
		<!--  <div class="ln_solid"></div> -->
			<div class="form-group">
				<div class="col-md-12 col-xs-12" style="text-align: center">
					<button type="button" onclick="cancleFunction()"
						class="btn btn-primary" style="margin-left: -5px;">取消</button>
					<button type="submit" onclick="submitFunction()"
						class="btn btn-primary" style="margin-left: 41px;">确定</button>
				</div>
			</div>


		</div>
	</div>
	<div class="main_container" style="background-color: #ffffff">
		<!-- page content -->
		<div class="right_col" role="main">
			<div class="clearfix"></div>
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12"></div>
			</div>

		</div>


	</div>
	</div>
	<style>
.col-md-7 {
	height: 28px;
	margin-top: 4px;
}
</style>
	<script type="text/javascript" src="../libs/layui/layui.js"
		charset="utf-8"></script>
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/inputTags.js"></script>
	<script type="text/javascript" src="../js/xadmin.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>
	<script type="text/javascript" src="../js/custom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.cookie.js"></script>
	<!-- jQuery -->
	<!-- jQuery -->
	<script type="text/javascript">
		function cancleFunction() {
			//关闭
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);

		}

		function submitFunction() {
			var layer = layui.layer;
			//提交
			// 新闻标题校验
			var isPublish = $('input:radio:checked').val();

			var planProjectName = $("#infoTitle").val();
			if (null == planProjectName || '' == planProjectName) {
				layer.msg('<a style="color:red">请输入新闻标题</a>', {
					icon : 2
				});
				return false;
			}

			/** 新闻内容不能为空*/
			/* var infoContent=$("#infoContent").html(); */
			var infoContent = editor.html();

			if (null == infoContent || '' == infoContent) {
				layer.msg('<a style="color:red">请输入新闻内容</a>', {
					icon : 2
				});
				return false;
			}

			获取分类

			var data = {
				"infoTitle" : planProjectName,
				"isPublish" : isPublish,
				"infoContent" : infoContent,

			};
			addNews(data);
		}

		function addNews(data) {
			$.ajax({
				type : "POST",
				dataType : "json",
				url : serverUrl.url + serverUrl.addInfo,
				data : data,
				cache : false,
				success : function(result) {
					if (result.returnCode == 0) {
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
						//parent.showMsg(result.reason);
						//window.parent.location.reload();
						//parent.layui.table.reload('table');
						layer.msg('添加成功', {
							icon : 0
						});
						parent.getData();
					} else {
						//parent.showMsg(result.reason);
						layer.msg('<a style="color:red">' + result.reason
								+ '</a>', {
							icon : 2
						});
					}

				},
				error : function() {
					layer.msg('<a style="color:red">' + '修改新闻失败!' + '</a>', {
						icon : 2
					});
				}
			});
		}

		layui.use([ 'inputTags' ], function() {
			var inputTags = layui.inputTags;
			inputTags.render({
				elem : '#trainMonths',//定义输入框input对象
				content : [],//默认标签
				aldaBtn : false,//是否开启获取所有数据的按钮
				done : function(value) { //回车后的回调
				}
			})
		})
	</script>




	<script>
		var editor;
		KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {  //跟上面的name  想对应即可
				allowFileManager : true,
				uploadJson : "/uap/sxykt/rest/info/upload", //上传文件的接口
				allowImageRemote : false,
				items : [
	        		'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
	        		'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
	        		'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
	        		'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
	        		'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
	        		'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 
	        		  'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
	        		'anchor',  '|', 'about'
	        	]  //设置需要的功能按钮  如果全都要 就把这个项目删除
			});

		});
	</script>

</body>
</html>

后端接口

// 文件上传
	@RequestMapping("/upload")
	@ResponseBody
	public Map<String, Object> upload(@RequestParam("imgFile") MultipartFile imgFile, HttpServletRequest req)
			throws IllegalStateException, IOException {
		Map<String, Object> map = new HashMap<String, Object>();
		// 判断文件是否为空，空则返回失败页面
		if (imgFile.isEmpty()) {
			map.put("url", "");
			map.put("error", 1);
			return map;
		}
		// 获取文件存储路径（绝对路径） //这里写 自己的项目地址  可以打印出来看看
		// String path = req.getServletContext().getRealPath("/upload");
		String path = System.getProperty("catalina.home") + "/webapps/" + FileConfigUtil.SHOW_PATH;

		// 获取原文件名
		String fileName = imgFile.getOriginalFilename();
		// 创建文件实例
		File filePath = new File(path, fileName);
		// 如果文件目录不存在，创建目录
		if (!filePath.getParentFile().exists()) {
			filePath.getParentFile().mkdirs();
		}
		// 写入文件
		imgFile.transferTo(filePath);

		map.put("url", FileConfigUtil.SHOW_PATH + fileName);
		map.put("error", 0);
		return map;
	}

一只孤傲的狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kindeditor富文本编辑器的使用精华版

前端页面 (前端页面主要注意需要引入相关的js文件,我会在下面附图片你对应相对自己项目的地址位置)<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- Meta,...
复制链接

扫一扫