kindEditor编辑器的使用

川长思鸟来 2022-05-17 07:29 182阅读 0赞

1.在官网下载        [http://kindeditor.net/down.php][http_kindeditor.net_down.php]

2.导入必须的js和css文件

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/js/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor/plugins/code/prettify.js"></script>

3.html代码

<textarea id="text" name="text" style="width: 100%; height: 300px"></textarea>

4.创建编辑器

<script type="text/javascript">
    	
    
    	 /* 创建编辑器,并指定相应的css样式和上传文件的处理  */
    	   KindEditor.ready(function(K) {
    	     var editor1 = K.create('#text', {
    	     cssPath : '${pageContext.request.contextPath}/js/kindeditor/plugins/code/prettify.css',
    	     //图片上传方法
    	     uploadJson : '${pageContext.request.contextPath}/js/kindeditor/jsp/upload_json.jsp',
    	     //fileManagerJson : '${pageContext.request.contextPath}/js/kindeditor/jsp/file_manager_json.jsp',
    	     allowFileManager : true
    	   });
    	    
    	     //将编辑器取到的值赋值给 textarea；
    	   K('input[name="button"]').click(function(e) {
    	   		alert(editor1.text());
    	      	$('#text').val(editor1.text());
    	      	return false;
    	    });
    	    	  
    	  });
    </script>

[http_kindeditor.net_down.php]: http://kindeditor.net/down.php

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器KindEditor

目录下载引入前端使用KindEditor 后端处理表单 ajax K

蔚落/ 2022年12月11日 06:25/ 0 赞/ 378 阅读

相关 asp.net mvc4 使用KindEditor文本编辑器

http://blog.csdn.net/csethcrm/article/details/43526619 最近做项目要用文本编辑器，编辑器好多种，这里介绍Kin

Love The Way You Lie/ 2022年07月12日 11:29/ 0 赞/ 114 阅读

相关清空KindEditor编辑器内容

//创建 var editor = KindEditor.create("textarea[name='desc']", {....}); //清空ki

Dear 丶/ 2022年06月15日 02:49/ 0 赞/ 257 阅读

相关 kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中可以删除一些不必要的文件夹然后在页面引入 <link href="kindeditor-4.1.10/themes/

深藏阁楼爱情的钟/ 2022年05月17日 09:40/ 0 赞/ 314 阅读

相关 kindEditor编辑器的使用

1.在官网下载 [http://kindeditor.net/down.php][http_kindeditor.net_down.php] 2.导入必须的js

川长思鸟来/ 2022年05月17日 07:29/ 0 赞/ 183 阅读

相关 KindEditor 编辑器

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器

偏执的太偏执、/ 2022年04月22日 03:56/ 0 赞/ 185 阅读

相关 KindEditor4.1编辑器的使用、封装及扩展

web开发中。。少不了编辑器的使用。。经过各个编辑器的比较。个人认为 KindEditor4.1 编辑器非常的不错觉得她简单而美丽....就像一个漂亮的妞。。。嘿嘿!

小咪咪/ 2022年04月16日 07:08/ 0 赞/ 288 阅读

相关 KindEditor:富文本编辑器介绍

富文本编辑器介绍富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器 Kin

野性酷女/ 2022年04月12日 13:53/ 0 赞/ 504 阅读

相关 KindEditor富文本编辑器

KindEditor简单使用 KindEditor 引入相关JS 简单使用 KindEditor KindEditor是一套开源的HTML可视化

水深无声/ 2021年10月06日 02:50/ 0 赞/ 445 阅读

相关 kindeditor在线HTML编辑器

kindeditor在线HTML编辑器

朱雀/ 2020年06月25日 09:42/ 0 赞/ 918 阅读