HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)

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值" οnclick="getText()" />
</body>
</html>

4.在这里有一个普遍的问题就是不知道怎么获取textarea文本域中的数据，百度一大堆，大都说可以直接var text = document.getElementById("xxx").value;或者var $text....

　　或者还可以用JQuery直接document.getElementById("xxx").val();来获取值，但是很多人都说获取不了

　　所以在这里，用来kindeditor之后通过全局变量editor可以有editor.html()来获取文本域里的数据

HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)相关推荐

html5 内嵌网页_如何分析并优化网页的性能？新梦想软件测试
一个网站的网页是好是坏,往往是体现在速度和高度两个方面,速度是网页所展示出来的时间,能否为浏览用户节约时间.高度则是一个网站网页本身的质量,能否为浏览用户带来真正的好体验.然而看似简单的两个点,但是背 ...
html5内嵌式格式,如何使用内嵌式引入css样式表
引入方法:将CSS代码集中写在HTML文档的" "头部标签中,并且用"". 本教程操作环境:windows7系统.CSS3&&HTML5版.De ...
微信小程序使用web-view，内嵌跳转h5踩坑记！！
先说说我遇到的错误,项目在部署测试环境之前一切正常,没有遇到任何阻碍性bug,但是部署测试环境之后,跳转h5报如下错误: 然后我就去查了官方文档,以及各类技术文档,意思就是需要在微信公众平台配置业务域 ...
HTML5响应式企业集团织梦模板,（自适应手机版）响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化...
名称:(自适应手机版)响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非 ...
html5 内嵌网页_HTML5与CSS3基础语法自学教程（二）
本文首发于[前端课湛]微信公众号.可以在微信里搜索[前端课湛]关注,第一时间看文章! 导读: 本小节主要讲解 HTML 的基础语法内容,将通过编写第一个 HTML 页面来学习 HTML 的基本结构. ...
(已更新)新版帝国cms内核试玩佣金WAP手机版网站源码，可打包APP
源码介绍: 新版帝国内核试玩佣金网站源码这个源码应该主要是推广一些挣钱的app,别人通过这个网站进去做任务挣钱,然后app给你拉新的费用. 做任务赚佣金的平台?通常就是一些分发众包任务的平台,可以通过 ...
针对于iosAPP内嵌H5，-webit-overflow-scrolling:touch;产生空白情况
问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动 ...
微信及企业微信内嵌浏览器内核信息及H5跑分数据-企业微信开发
加我微信li570467731,拉你进二百多人企业微信开发同行群(文末有二维码). 企业微信开发三部曲: <企业微信应用开发概述篇(免费)>已完结: <企业微信开发第三方应用开发篇& ...
手机版的python3编译器,python编辑器安卓下载
如何用手机编程Python? 1.QPython3:这是一个在安卓手机上运行python3的脚本引擎,整合了python3解释器.控制台.QEdit编辑器和SLA4库,可以在安卓手机上运行python ...
[Discuz!] 头像HTML5上传 1.2 (saya_avatarupload)支持手机版
插件简介 HTML5头像上传,抛弃FLASH方法支持手机版!支持手机版!支持手机版!(非"新触屏版") 支持UCenter与论坛不在同一域名下(支持跨域) 直接提交:UCente ...

HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)

HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)相关推荐

最新文章

热门文章

HTML5内嵌文本编辑器(H5文本编辑器 俗称手机版网站专用)

HTML5内嵌文本编辑器(H5文本编辑器 俗称手机版网站专用)相关推荐

最新文章

热门文章

HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)

HTML5内嵌文本编辑器(H5文本编辑器俗称手机版网站专用)相关推荐