KindEditor 在线编辑器使用
2017-12-27 11:32
507 查看
下载kindeditor
可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙;或者直接CSDN
下载解压完放入自己的项目中
在解压完后可以删除不需要的文件夹,我是删除了asp、asp.net、jsp、php,examples可以放到其他地方,用作代码参考。
![](https://img-blog.csdn.net/20170413170019300?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZEtuaWdodEw=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
初始化kindeditor富文本编辑器
首先先导入下面css和js文件
2
3
然后初始化(textarea 为富文本编辑器主题,script代码初始化)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
![](https://img-blog.csdn.net/20170413170201222?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZEtuaWdodEw=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙;或者直接CSDN
下载解压完放入自己的项目中
在解压完后可以删除不需要的文件夹,我是删除了asp、asp.net、jsp、php,examples可以放到其他地方,用作代码参考。
初始化kindeditor富文本编辑器
首先先导入下面css和js文件
<link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script>1
2
3
然后初始化(textarea 为富文本编辑器主题,script代码初始化)
<textarea id="mul_input" name="content" style="width:700px;height:200px;visibility:hidden;display: block;">KindEditor</textarea> <script> //简单模式初始化 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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//默认模式 <script> 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> <body> <h3>默认模式</h3> <form style="margin: 0;"> <textarea name="content" style="width:800px;height:400px;visibility:hidden;display: block;">KindEditor</textarea> <p> <input type="button" name="getHtml" value="取得HTML" /> <input type="button" name="isEmpty" value="判断是否为空" /> <input type="button" name="getText" value="取得文本(包含img,embed)" /> <input type="button" name="selectedHtml" value="取得选中HTML" /> <br /> <br /> <input type="button" name="setHtml" value="设置HTML" /> <input type="button" name="setText" value="设置文本" /> <input type="button" name="insertHtml" value="插入HTML" /> <input type="button" name="appendHtml" value="添加HTML" /> <input type="button" name="clear" value="清空内容" /> <input type="reset" name="reset" value="Reset" /> </p> </form> </body>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
相关文章推荐
- KindEditor 4.x 在线编辑器常用使用方法
- ASP.NET一款免费富文本(RichText)编辑器KindEditor,实现在线排版编辑文章。这里简单介绍下如何使用
- 在线编辑器的使用总结(kindeditor , )
- Html 在线编辑器 KindEditor 的使用例子
- 国产网页在线编辑器kindeditor的使用
- 【杂记】KindEditor 4.x 在线编辑器常用使用方法
- kindeditor-4.1.10在线编辑器的使用[多个]
- kindeditor-4.1.10在线编辑器的使用
- 在线编辑器KindEditor的使用
- KindEditor 4.x 在线编辑器常用使用方法
- kindeditor在线HTML编辑器简单使用教程
- 在线编辑器的使用总结(kindeditor , )
- 在线编辑器 KindEditor 在ASP.NET MVC 中使用
- (六)在线文档编辑器的使用和数据字典(ueditor编辑器/my97datepicker日期控件)
- KindEditor编辑器的使用
- 为什么要写工作日记及一个在线编辑器的使用
- 在线html编辑器---HtmlArea的使用
- 在线HTML编辑器 KindEditor
- bluePen – 使用在线 CSS 编辑器美化你的网站
- KindEditor在线编译器怎么使用详解