手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >制作WEB在线编辑器-插入HTML标签
制作WEB在线编辑器-插入HTML标签
摘要:以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死...

以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板。由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如:

a.focus();

a.document.execCommand('insertButton','','btn');

这里的a对象是一个iframe对象。execcommand中的第一个参数是需要插入的控件的命令,第2个目前还不知道,第3个是ID名,这里将插入一个ID=btn的BUTTON控件,如果想加入其他属性只需要接着后面写就行了,例如

a.document.execCommand('insertButton','','btnclass=btnclasscolor=red');

第一个参数的详细列表

2D-Position允许通过拖曳移动绝对定位的对象。

AbsolutePosition设定元素的position属性为“absolute”(绝对)。

BackColor设置或获取当前选中区的背景颜色。

BlockDirLTR目前尚未支持。

BlockDirRTL目前尚未支持。

Bold切换当前选中区的粗体显示与否。

BrowseMode目前尚未支持。

Copy将当前选中区复制到剪贴板。

CreateBookmark创建一个书签锚或获取当前选中区或插入点的书签锚的名称。

CreateLink在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。

Cut将当前选中区复制到剪贴板并删除之。

Delete删除当前选中区。

DirLTR目前尚未支持。

DirRTL目前尚未支持。

EditMode目前尚未支持。

FontName设置或获取当前选中区的字体。

FontSize设置或获取当前选中区的字体大小。

ForeColor设置或获取当前选中区的前景(文本)颜色。

FormatBlock设置当前块格式化标签。

Indent增加选中文本的缩进。

InlineDirLTR目前尚未支持。

InlineDirRTL目前尚未支持。

InsertButton用按钮控件覆盖当前选中区。

InsertFieldset用方框覆盖当前选中区。

InsertHorizontalRule用水平线覆盖当前选中区。

InsertIFrame用内嵌框架覆盖当前选中区。

InsertImage用图像覆盖当前选中区。

InsertInputButton用按钮控件覆盖当前选中区。

InsertInputCheckbox用复选框控件覆盖当前选中区。

InsertInputFileUpload用文件上载控件覆盖当前选中区。

InsertInputHidden插入隐藏控件覆盖当前选中区。

InsertInputImage用图像控件覆盖当前选中区。

InsertInputPassword用密码控件覆盖当前选中区。

InsertInputRadio用单选钮控件覆盖当前选中区。

InsertInputReset用重置控件覆盖当前选中区。

InsertInputSubmit用提交控件覆盖当前选中区。

InsertInputText用文本控件覆盖当前选中区。

InsertMarquee用空字幕覆盖当前选中区。

InsertOrderedList切换当前选中区是编号列表还是常规格式化块。

InsertParagraph用换行覆盖当前选中区。

InsertSelectDropdown用下拉框控件覆盖当前选中区。

InsertSelectListbox用列表框控件覆盖当前选中区。

InsertTextArea用多行文本输入控件覆盖当前选中区。

InsertUnorderedList切换当前选中区是项目符号列表还是常规格式化块。

Italic切换当前选中区斜体显示与否。

JustifyCenter将当前选中区在所在格式化块置中。

JustifyFull目前尚未支持。

JustifyLeft将当前选中区所在格式化块左对齐。

JustifyNone目前尚未支持。

JustifyRight将当前选中区所在格式化块右对齐。

LiveResize迫使MSHTML编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。

MultipleSelection允许当用户按住Shift或Ctrl键时一次选中多于一个站点可选元素。

Open打开。

Outdent减少选中区所在格式化块的缩进。

OverWrite切换文本状态的插入和覆盖。

Paste用剪贴板内容覆盖当前选中区。

PlayImage目前尚未支持。

Print打开打印对话框以便用户可以打印当前页。

Redo重做。

Refresh刷新当前文档。

RemoveFormat从当前选中区中删除格式化标签。

RemoveParaFormat目前尚未支持。

SaveAs将当前Web页面保存为文件。

SelectAll选中整个文档。

SizeToControl目前尚未支持。

SizeToControlHeight目前尚未支持。

SizeToControlWidth目前尚未支持。

Stop停止。

StopImage目前尚未支持。

StrikeThrough目前尚未支持。

Subscript目前尚未支持。

Superscript目前尚未支持。

UnBookmark从当前选中区中删除全部书签。

Underline切换当前选中区的下划线显示与否。

Undo撤消。

Unlink从当前选中区中删除全部超级链接。

Unselect清除当前选中区的选中状态。

另外,在当前鼠标所点的位置插入字符可用以下方法:

<script>

functionshowselect(){

varoText=document.selection.createRange();

oText.text=111;

}

</script>

<bodyonmouseup="showselect()">

<spanid=span1>zdfzadfasfdasdfadsf</span>

【制作WEB在线编辑器-插入HTML标签】相关文章:

对div盒子模型使用心得总结

CSS出现overflow的一些问题

使用css3仿造window7的开始菜单

如何在网页中插入CSS

使用CSS3实现圆角,阴影,透明

CSS样式:background-position的理解

CSS中Font的一些基本知识点归纳总结

CSS教程:可扩展圆角标签

CSS教程:DIV底部放置文字

input的Css样式

精品推荐
分类导航