array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 jquery 文本编辑器插件 - 爱码网

jquery 文本编辑器插件

hdjjun

markitup轻量级的文本编辑器

jQuery Universal Markup Editor是一个基于jQuery的轻量级的文本编辑器，可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式，具体很强的扩展性，使用非常方便，markitup效果图如下：
jQuery插件markitup轻量级的文本编辑器

使用说明
需要使用jQuery库文件和markitup库文件
使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
  3. <script type="text/javascript" src="markitup/sets/html/set.js"></script>

二，HTML部分

  1. <textarea id="html" cols="80" rows="20">
  2. ...biuuu.com...
  3. </textarea>

三，javascrpt部分

  1. <script language="javascript">
  2. $(document).ready(function()    {
  3. $(\'#html\').markItUp(myHtmlSettings);
  4. });
  5. </script>

以上实例可知，使用jQuery插件markitup实现在线文本编辑器非常简单，功能非常丰富，这里只介绍了一个简单的HTML实例，大家可去markitup官方网址查看相关文档。

点我查看jQuery插件markitup的jQuery官方文档介绍
点我查看jQuery插件markitup轻量级的文本编辑器在线演示

 

 

 

HtmlBox文本编辑器

 

上期在[jQuery插件markitup轻量级的文本编辑器]介绍了一个基于jQuery的文本编辑器，这里介绍另外一个jQuery插件HtmlBox文本编辑器，提供一个textarea表单元素，即可实现一个功能强大的HTML文本编辑器，使用非常简单，效果图如下：
jquery_htmlbox
使用说明
需要使用jQuery库文件和HtmlBox文本编辑器库文件

使用实例
一，包含文件部分

  1. <script language="Javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>
  2. <script language="Javascript" src="htmlbox.min.js" type="text/javascript"></script>

二，HTML部分

  1. <textarea id=\'biuuu\'></textarea>

三，Javascript部分

  1. <script language="Javascript" type="text/javascript">
  2. $("#biuuu").css("width",220).css("height",120).htmlbox()
  3. .separator("dots").button("cut").button("copy").button("paste")
  4. .separator("dots").button("bold").button("italic").button("underline")
  5. .separator("dots",2).button("undo",2).button("redo",2)
  6. .separator("dots",2).button("left",2).button("center",2).button("right",2).button("justify",2)
  7. .init();
  8. </script>

代码分析：
width表示宽度
height表示高度
$("#biuuu").css("width",220).css("height",120).htmlbox()表示生成一个宽度为220高度为120的HtmlBox文本编辑器。然后增加一些使用功能，上面实例定义了几个功能，如剪切cut、复制copy、粘贴paste、加粗bold等。

这只是一个非常小的使用实例，其中只包含了HtmlBox文本编辑器部分功能，这些都可以自定义，具体大家可以查看完整的演示代码，使用非常简单。

点我下载jQuery插件HtmlBox文本编辑器

 

 

可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器

 

 

很多的PHP开发者应该对FCKeditor文本编辑器非常熟悉，因为大部分的国产PHP教材书中在介绍CMS制作时都会推荐使用这个文本编辑器，另外一个就是WYSIWYG编辑器，，这里介绍一个可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器，IPWEditor插件可实现少量的代码改动就能实现这二个编缉器的结合，效果图如下：
ipweditor
使用说明
需要使用jQuery库文件和editable.wysiwyg库文件
可结合fckeditor组件

必优推荐级别：★★★

点我查看IPWEditor文本编辑器在线演示

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  2. <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
  3. <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

二，HTML部分

  1. <div id="editable" class="biuuu">点击弹出editable 和 WYSIWYG编辑器 </div>

三，Javascript部分

  1. <script type="text/javascript">
  2. var oFCKeditor = new FCKeditor( \'editor1\') ;
  3. oFCKeditor.BasePath = "fckeditor/" ;
  4. $(\'.biuuu\').editable(
  5. {
  6. type: \'wysiwyg\',
  7. editor: oFCKeditor,
  8. onSubmit:function submitData(content){
  9. alert(content.current)
  10. },
  11. submit:\'save\'
  12. });
  13. </script>

如上实例，实现如效果图的文本编辑器，实现当点击类名为biuuu的DIV弹出一个文本编辑器，具体说明如下：

一，初始化FCKeditor对象
var oFCKeditor = new FCKeditor( \'editor1\') ;

二，设置FCKeditor路径
oFCKeditor.BasePath = "fckeditor/" ;

三，加载编辑器部分
$(\'.biuuu\').editable({});

具体参数部分比较简单，分别是type类型，editor编辑器，onSubmit提交回调事件，submit提交元素名称，具体可查看editable的JS文件配置部分。

这个可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器，非常有意思，创新的想法是需要的，这样才能有更多灵感和火化。

 

 

TrackBack：http://www.biuuu.com/tag-jQuery%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8.html

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode