HTML5内嵌文本编辑器
2024-10-22 05:11:36
1.这个编辑器用的是KindEditor
先看下效果:
2.准备:
a):从官网下载KindEditor———>http://kindeditor.net/down.php
b):解压到桌面测试文件夹下的plugin文件夹下(解压到其他地方也可以)
c):在测试文件夹中新建一个测试html文件,总体结构如下图:
3.编辑textJavaScript.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试JavaScript的DOM操作</title>
//注意下面引入js文件时,src的路径要正确
<script charset="utf-8" src="plugin/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="pluginkindeditor/lang/zh-CN.js"></script>
<script type="text/javascript">
var editor; //全局变量
KindEditor.ready(function(K) {
editor = K.create('#kindedito', {
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic',
'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script>
<script type="text/javascript">
function getText(){
var text =editor.html(); //获取textarea文本域中的文本
var newNode = document.createElement("p"); //创建一个新结点
newNode.innerHTML = text; //用text设置p结点中的文本内容
var element = document.getElementById("show");//获取show结点,以show结点为父节点
element.append(newNode); //将新建的结点添加进去,相当于盒子里放盒子一样
}
</script>
</head> <body> <div id="kindeditor">
<textarea id="kindedito" name="post" rows="20" cols="100" ></textarea>
</div> <div id="show">
</div>
<input type="submit" value="获取area值" onclick="getText()" />
</body>
</html>
4.在这里有一个普遍的问题就是不知道怎么获取textarea文本域中的数据,百度一大堆,大都说可以直接var text = document.getElementById("xxx").value;或者var $text....
或者还可以用JQuery直接document.getElementById("xxx").val();来获取值,但是很多人都说获取不了
所以在这里,用来kindeditor之后通过全局变量editor可以有editor.html()来获取文本域里的数据
最新文章
- Ceph剖析:数据分布之CRUSH算法与一致性Hash
- python 随笔(property &; __class__)
- Python文档
- 如何在WordPress中使用七牛云存储
- HDU4870 Rating(概率)
- idea tomcat +eclipse式的部署
- 【ASP.NET+MVC4+Web+编程】读书笔记
- 转:解决方案your project contains error s please fix them before running your application
- 找到了解决Elite多媒体键失效的问题
- ABP入门教程
- 小梦windows phone 8.1开发:语音朗读
- HTML-移动开发技巧 响应式布局 弹性布局
- [日常] nginx记录post数据
- python学习日记(OOP——静态方法和类方法)
- python NLTK安装
- qscoj 喵哈哈村的打印机游戏 区间dp
- 【JS】【6】判断一个元素是否在数组中
- Python3练习题系列(03)
- AtCoder Beginner Contest 087 (ABC)
- Error:Execution failed for task &#39;:app:preDebugAndroidTestBuild&#39;.错误解决