TinyEditor 简洁且易用的html所见即所得编辑器_HTML/Xhtml

首页

web前端

html教程

TinyEditor 简洁且易用的html所见即所得编辑器_HTML/Xhtml_网页制作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:41 PM

css3

TinyEditor

前几日曾给大家介绍过一款国产的xhtml编辑器，今天要给大家推荐的TinyEditor，是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。

TinyEditor有以下特点

它使用Javascript编写，不依赖于其它类库
这是一个轻量级的编辑器，要调用的文件仅有8kb
它可以处理大多数的html格式化需求，并且内置的功能使得生成的标记尽量简洁
编辑器中用到的小图标使用了CSS Sprite技术，减少了http连接
在主流浏览器中测试通过
可个人或商业项目中使用，遵循creative commons license

下面来看如何使用：

在网页文件中引用TinyEditor提供的js文件和css文件

在网页文件中添加编辑器所需要的标签，其实就是个textarea，如下

<span style="COLOR: #009900"><<span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span> <span style="COLOR: #000066">id</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"input"</span> <span style="COLOR: #000066">style</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"width:400px; height:200px"</span>><<span style="COLOR: #66cc66">/</span><span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span>></span>

登录后复制

注意textarea中定义的长宽也就是编辑器的大小。

通过脚本初始化编辑器，并配置各种参数，如下：

<span style="FONT-WEIGHT: bold; COLOR: #003366">new</span> TINY.<span style="COLOR: #660066">editor</span>.<span style="COLOR: #660066">edit</span><span style="COLOR: #009900">(</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span><span style="COLOR: #009900">{</span>
	id<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'input'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (必须)上面第二步中定义的textarea的id</span>
	width<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">584</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器宽度</span>
	height<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">175</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器高度</span>
	cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'te'</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器的class，用来通过css控制样式</span>
	controlclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tecontrol'</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器上按钮的class</span>
	rowclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'teheader'</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮行的class</span>
	dividerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tedivider'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮间分割线的样式</span>
	controls<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'bold'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'italic'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'underline'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'strikethrough'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'subscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'superscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'orderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unorderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'outdent'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'indent'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'leftalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'centeralign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'rightalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'blockjustify'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unformat'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'undo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'redo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'n'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'font'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'size'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'style'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'image'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'hr'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'link'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unlink'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'cut'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'copy'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'paste'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'print'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线</span>
	footer<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 是否显示编辑器底部</span>
	fonts<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'Verdana'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Arial'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Georgia'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Trebuchet MS'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>  
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器中可选择的字体</span>
	xhtml<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器生成xhtml还是html标记</span>
	cssfile<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'style.css'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 要为编辑器附加的外部css文件</span>
	content<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'starting content'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域中的初始内容</span>
	css<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'body{background-color:#ccc}'</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域背景</span>
	bodyid<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑区域ID</span>
	footerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tefooter'</span><span style="COLOR: #339933">,</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器底部class</span>
	toggle<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>text<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'源代码'</span><span style="COLOR: #339933">,</span>activetext<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'可视化'</span><span style="COLOR: #339933">,</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'toggle'</span><span style="COLOR: #009900">}</span><span style="COLOR: #339933">,</span>
 <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置源代码浏览切换文字，及切换按钮的class</span>
	resize<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'resize'</span><span style="COLOR: #009900">}</span> 
<span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器大小调整按钮的class</span>
<span style="COLOR: #009900">}</span><span style="COLOR: #009900">)</span><span style="COLOR: #339933">;</span>

登录后复制

可以说的上是高度可配置了，而且配置项都比较清晰。

在TinyEditor的实际应用中，需要注意的是，在提交编辑器内容之前，一定调用instance.post()函数，以确保编辑区域中最新的可视化内容转化为标记文本。

查看示例：http://sandbox.leigeber.com/tinyeditor/
下载：TinyEditor源码及示例文件

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn