富文本框KindEditer编辑器的介绍和使用详情

18 篇文章 0 订阅

KindEditer介绍和使用详情

目录

一、KindEditer介绍

二、KindEditer使用方法

1、下载编辑器,下载页面:http://www.kindsoft.net/down.php

2、部署编辑器,

3、引入对应的kindeditor-all.js文件

4、  添加多行文本框textarea,id为editor_id

5、为id为editor_id的文本框创建kindeditor编辑器。


一、KindEditer介绍

        KindEditer是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得的编辑效果,开发人员可以用KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本框。KindEditor使用JavaScript编写,可以无缝地与java、.net、php、asp等程序集成。比较适合在cms,商城,论坛、博客。wiki、电子邮件等互联网应用上使用。

二、KindEditer使用方法

1、下载编辑器,下载页面:http://www.kindsoft.net/down.php

2、部署编辑器,

解压kindediter-x.x.x.zip文件,将所有的文件上传到您的网站程序目录里,例如:http://您的域名/editor

3、引入对应的kindeditor-all.js文件

4、  添加多行文本框textarea,id为editor_id

5、为id为editor_id的文本框创建kindeditor编辑器。

使用代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--	
	           引入对应的js文件
	     -->
		<script charset="utf-8" src="./kindeditor/kindeditor-all.js"></script>
	</head>

	<body>
		<!--
                    添加多行文本框
        -->
		<textarea id="editor_id" name="content"
			style="width: 700px; height: 300px;">
           &lt;strong&gt;HTML内容&lt;/strong&gt;
         </textarea>
	</body>
    <!--
          实例化出kindediter编辑器
     -->
	<script>
	KindEditor.ready(function(K) {
		window.editor = K.create('#editor_id');
	});
</script>
</html>

效果图:

https://i-blog.csdnimg.cn/blog_migrate/f3cf3eeb5e6aeb3c5cff12b390acdb09.png

 

6、kindeditor编辑器的创建参数,高度-height,宽度width,各种按钮是否显示-items,等等,

K.create('#id', {
        width : '700px',
       height : '700px',
       items:['undo', 'redo', 'preview']
});

详情请看下面的地址:

http://kindeditor.net/docs/option.html#items

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值