HTML5内嵌文本编辑器

顺晟科技

2022-09-15 22:20:12

204

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()来获取文本域里的数据

上一篇：学习js在线html(富文本)编辑器下一篇：纯JS文本在线HTML编辑器Kind

网站建设

Html

HTML5内嵌文本编辑器