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

HTML5内嵌文本编辑器的更多相关文章

  1. zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

    ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...

  2. Webform——内嵌word编辑器

    word编辑器,类似于Word的. 首先需要添加两个引用: 然后把一个文件夹仍在根目录下: 继而在工具箱里 选择项→浏览找到这两个引用,直接把工具拽进来就行: 获取编辑器文本: protected v ...

  3. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  4. Squire – 简洁的 HTML5 富文本编辑器

    Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示      源码下载 您可能 ...

  5. Popline：帅气的浮动 HTML5 文本编辑器工具栏

    Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便. 您可能感兴趣的 ...

  6. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  7. html5 frameset5内嵌框架集

    利用html5 frameset内嵌框架简单做一个网页,网页的布局大体如下: 我们可以将其分为四个部分: 第一部分:top图片栏 第二部分:left链接栏 第三部分:right内容栏 第四部分:网页整 ...

  8. [国嵌笔记][006][Linux文本编辑器]

    Linux中常见的文本编辑器有Vi和Emacs Vim有3中工作模式:命令行模式.插入模式.底行模式 1.键入i进入插入模式 2.键入[Esc]退回到命令行模式 3.键入:进入底行模式,再键入wq保存 ...

  9. [HTML/HTML5]4 使用文本

    4.1  组织文本 在已经采用结构化方式将页面划分为多个关键内容区域(content area)并添加相应的标题之后,就可以进一步对这些内容区域中的文本进行组织. 4.1.1  段落 p元素的具体功能 ...

随机推荐

  1. Luogu P4313 文理分科

    link 最小割 双倍经验 这道题运用了最小割最常用的一种用法:集合划分. 因为源汇最小割即就是将源汇划分到不同的集合,那么最简单的应用就是最小代价划分集合了. 本题中,题意是将 \(n\cdot m ...

  2. 痞子衡嵌入式：串行NOR Flash的页编程模式对于量产时间的影响

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是串行NOR Flash的页编程模式对于量产时间的影响. 任何嵌入式产品最终都绕不开量产效率话题,尤其是对于主控是非内置 Flash 型 ...

  3. C语言:字符编码

    C语言是 70 年代的产物,那个时候只有 ASCII,各个国家的字符编码都还未成熟,所以C语言不可能从底层支持 GB2312.GBK.Big5.Shift-JIS 等国家编码,也不可能支持 Unico ...

  4. C语言入门思路

    C语言编程入门 0.数学中的常数在编程语言中称为常量,是一直不变的.如1,2,'a',"abc",3456,34.56等1.变量:类似于数学中的未知数.实际上就是指可用内存的一块区 ...

  5. File类与常用IO流第三章IO流概述

    一:以内存为基准,按照数据的流动方向,流向内存为输入(读取数据),流出内存为输出.IO流有四大顶级父类: IO流四大顶级父类   输入流 输出流 字节流 字节输入流 InputStream 字节输出流 ...

  6. 前端开发入门到进阶第三集【获取cookie然后单点登录后重定向】

    /* var token ;//https://blog.csdn.net/qq_29207823/article/details/81745757 if( $.cookie('BBK_TOKEN') ...

  7. C#中使用jieba.NET、WordCloudSharp制作词云图

    目录 词云简介 准备工作 基本算法 算法实现 运行测试 参考资料 词云简介 "词云"由美国西北大学新闻学副教授.新媒体专业主任里奇·戈登(Rich Gordon)于2006年最先使 ...

  8. 【每日算法】存在重复元素 III

    题目描述 这是 LeetCode 上的 220. 存在重复元素 III, 难度为 [中等] 给你一个整数数组 nums 和两个整数 k 和 t .请你判断是否存在 两个不同下标 i 和 j,使得 ab ...

  9. ssm框架下 数据库连接异常 java.sql.SQLException: The server time zone value '???&#250;&#177;&#234;&#215;??&#177;??' is unrecognized or represents more

    1.错误截图 2.修改操作 我是在框架的中连接的数据库,如果在类中把    &换成& 修改前代码 <property value="com.mysql.jdbc.Dri ...

  10. Intouch/ifix语音报警系统制作(2)

    在我的先前一篇关于语音报警系统制作的文章中,阐述了如何通过标签组来获得@name@的详细内容,以通过这种方式来进行详细的设备故障播报.经过一段时间的试运行,发现使用标签组的方式会产生较大的耦合,(即当 ...