HTML5內嵌文本編輯器

時間 2019-11-15

標籤 html5 html 內嵌文本編輯器欄目 HTML5 简体版

原文原文鏈接

1.這個編輯器用的是KindEditorjavascript

　　先看下效果：php

2.準備：html

　　a)：從官網下載KindEditor———>http://kindeditor.net/down.phpjava

　　b)：解壓到桌面測試文件夾下的plugin文件夾下（解壓到其餘地方也能夠）app

　　c)：在測試文件夾中新建一個測試html文件，整體結構以下圖：編輯器

3.編輯textJavaScript.html文件：post

<!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>