Kindeditor富文本编辑器使用

1、效果图

2、本次使用只对文本内容进行编辑，不包含图片视频表情包等等

2.1 下载kindeditor前端样式，全部都需要

2.2 jsp页面引入js样式

<script type="text/javascript" src="<%=path %>/static/js/kindeditor-4.1.10/kindeditor.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=path %>/static/js/kindeditor-4.1.10/lang/zh_CN.js" charset="UTF-8"></script>

2.3 kindeditor初始化

//items中是需要的功能，不需要可以进行修改删除KindEditor.ready(function(K) {K.create('#content', {  //uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',  //fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',  //allowFileManager : true,
                 items : [  'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',  'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',  'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  'superscript', '|', 'selectall', '-',  'title', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  'italic', 'underline', 'strikethrough', 'removeformat', '|',  'advtable', 'hr', 'link', 'unlink', '|', 'about'  ],afterBlur: function(){this.sync();}});  });

//如果都需要可以使用以下代码KindEditor.ready(function(K) {K.create('#content', {  uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',  fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',  allowFileManager : true, afterBlur: function(){this.sync();}   //这行代码是将输入内容赋值于textarea，必须存在});  });

<textarea style="width:100%;height:200px;visibility:hidden;" name="content" id="content" ></textarea>

转载于:https://www.cnblogs.com/lsjBlog/p/9442502.html

Kindeditor富文本编辑器使用相关推荐

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
kindEditor 富文本编辑器使用介绍
第一版:存放位置: ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <s ...
KindEditor富文本编辑器【图片、视频等功能的富文本编辑器】
官方下载地址:http://kindeditor.net/demo.php 下载插件: 简单模式.默认模式富文本编辑器: 默认模式html页面: <!DOCTYPE html> <h ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
KindEditor富文本编辑器，从客户端中检测到有潜在危险的 Request.Form 值
在用富文本编辑器时经常会遇到的问题是asp.net报的"检测到有潜在危险的 Request.Form 值"一般的解法是在aspx页面 page 标签中加上 validater ...

Kindeditor富文本编辑器使用

Kindeditor富文本编辑器使用相关推荐

最新文章

热门文章