仓酷云

标题: 来一发TinyEditor:简便且易用的html所见即所得编纂器 [打印本页]

作者: 冷月葬花魂 时间: 2015-1-15 23:17
标题: 来一发TinyEditor:简便且易用的html所见即所得编纂器
一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。网页制造poluoluo文章简介：前几日曾给人人先容过一款国产的xhtml编纂器，明天要给人人保举的TinyEditor，是外洋出名Web计划博客leigeber.com刚公布的一款简便且易用的html所见即所得编纂器。

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

登录/注册后可看大图

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

它利用Javascript编写，不依附于别的类库
这是一个轻量级的编纂器，要挪用的文件唯一8kb
它能够处置年夜多半的html格局化需求，而且内置的功效使得天生的标志只管简便
编纂器顶用到的小图标利用了CSSSprite手艺，削减了http毗连
在支流扫瞄器中测试经由过程
可团体或贸易项目中利用，遵守creativecommonslicense

上面来看怎样利用：
1，在网页文件中援用TinyEditor供应的js文件和css文件
2，在网页文件中增加编纂器所必要的标签，实在就是个textarea，以下

<textareaid="input"style="width:400px;height:200px"></textarea>

复制代码

注重textarea中界说的长宽也就是编纂器的巨细。
3，经由过程剧本初始化编纂器，并设置各类参数，以下：

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
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 变相怪杰 时间: 2015-1-26 23:04
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 爱飞 时间: 2015-2-5 06:12
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 柔情似水 时间: 2015-2-11 08:00
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 乐观 时间: 2015-3-2 01:08
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 蒙在股里 时间: 2015-3-11 04:06
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 仓酷云 时间: 2015-3-17 22:09
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 精灵巫婆 时间: 2015-3-25 08:17
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

欢迎光临仓酷云 (http://www.ckuyun.com/)

Powered by Discuz! X3.2