HTML5內嵌文本編輯器


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()來獲取文本域里的數據

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM