仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1021|回复: 8
打印 上一主题 下一主题

[HTML5] 来一发TinyEditor:简便且易用的html所见即所得编纂器

[复制链接]
冷月葬花魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:17:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一些公司联合起来,成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup(Web超文本应用技术工作组-WHATWG)的组织。网页制造poluoluo文章简介:前几日曾给人人先容过一款国产的xhtml编纂器,明天要给人人保举的TinyEditor,是外洋出名Web计划博客leigeber.com刚公布的一款简便且易用的html所见即所得编纂器。

前几日曾给人人先容过一款国产的xhtml编纂器,明天要给人人保举的TinyEditor,是外洋出名Web计划博客leigeber.com刚公布的一款简便且易用的html所见即所得编纂器。
TinyEditor有以下特性


  • 它利用Javascript编写,不依附于别的类库
  • 这是一个轻量级的编纂器,要挪用的文件唯一8kb
  • 它能够处置年夜多半的html格局化需求,而且内置的功效使得天生的标志只管简便
  • 编纂器顶用到的小图标利用了CSSSprite手艺,削减了http毗连
  • 在支流扫瞄器中测试经由过程
  • 可团体或贸易项目中利用,遵守creativecommonslicense
上面来看怎样利用:
1,在网页文件中援用TinyEditor供应的js文件和css文件
2,在网页文件中增加编纂器所必要的标签,实在就是个textarea,以下
  1. <textareaid="input"style="width:400px;height:200px"></textarea>
复制代码
注重textarea中界说的长宽也就是编纂器的巨细。
3,经由过程剧本初始化编纂器,并设置各类参数,以下:
  1. newTINY.editor.edit(editor,{id:input,//(必需)下面第二步中界说的textarea的idwidth:584,//(选填)编纂器宽度height:175,//(选填)编纂器高度cssclass:te,//(选填)编纂器的class,用来经由过程css把持款式controlclass:tecontrol,//(选填)编纂器上按钮的classrowclass:teheader,//(选填)编纂器按钮行的classdividerclass:tedivider,//(选填)编纂器按钮间支解线的款式controls:[bold,italic,underline,strikethrough,|,subscript,superscript,|,orderedlist,unorderedlist,|,outdent,indent,|,leftalign,centeralign,rightalign,blockjustify,|,unformat,|,undo,redo,n,font,size,style,|,image,hr,link,unlink,|,cut,copy,paste,print],//(必需)要依据必要在编纂器上增加按钮控件,个中|代表功效按钮间的竖支解线,n代表按钮行间的支解线footer:true,//(选填)是不是显现编纂器底部fonts:[Verdana,Arial,Georgia,TrebuchetMS],//(选填)编纂器中可选择的字体xhtml:true,//(选填)编纂器天生xhtml仍是html标志cssfile:style.css,//(选填)要为编纂器附加的内部css文件content:startingcontent,//(选填)设置编纂器编纂地区中的初始内容css:body{background-color:#ccc},//(选填)设置编纂器编纂地区背景bodyid:editor,//(选填)设置编纂地区IDfooterclass:tefooter,//(选填)设置编纂器底部classtoggle:{text:源代码,activetext:可视化,cssclass:toggle},//(选填)设置源代码扫瞄切换笔墨,及切换按钮的classresize:{cssclass:resize}//(选填)设置编纂器巨细调剂按钮的class});
复制代码
能够说的上是高度可设置了,并且设置项都对照明晰。
在TinyEditor的实践使用中,必要注重的是,在提交编纂器内容之前,必定挪用instance.post()函数,以确保编纂地区中最新的可视化内容转化为标志文本。
检察示例:http://sandbox.leigeber.com/tinyeditor/
下载:TinyEditor源码及示例文件
本文http://css9.net/javascript-wysiwyg-editor-tinyeditor/
</p>
使用HTML5也是断断续续的有些历史了,但是没有系统的总结过,最近发现公司的图书馆有不少藏书,
冷月葬花魂 该用户已被删除
沙发
 楼主| 发表于 2015-1-17 21:25:49 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
变相怪杰 该用户已被删除
板凳
发表于 2015-1-26 23:04:44 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
爱飞 该用户已被删除
地板
发表于 2015-2-5 06:12:28 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
柔情似水 该用户已被删除
5#
发表于 2015-2-11 08:00:46 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
乐观 该用户已被删除
6#
发表于 2015-3-2 01:08:48 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
蒙在股里 该用户已被删除
7#
发表于 2015-3-11 04:06:13 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
8#
发表于 2015-3-17 22:09:22 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
精灵巫婆 该用户已被删除
9#
发表于 2015-3-25 08:17:42 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-26 01:09

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表