制作WEB在线编辑器-插入HTML标签

原创 2007年10月08日 10:03:00
以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板。由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如:
a.focus();
a.document.execCommand('insertButton','','btn');
这里的a对象是一个iframe对象。 execcommand中的第一个参数是需要插入的控件的命令,第2个目前还不知道,第3个是ID名,这里将插入一个ID=btnBUTTON控件,如果想加入其他属性只需要接着后面写就行了,例如
a.document.execCommand('insertButton','','btn class=btnclass color=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>
function showselect() {
var oText = document.selection.createRange();
oText.text=111;
}
</script>
<body onmouseup="showselect()">
<span id=span1>zdfzadfasfdasdfadsf</span>
 

百度ueditor富文本编辑器插入html代码问题

今天下午想把ueditor保存的html代码从数据库取出来放回到ueditor中编辑,然后就一直放不进去,经过不断地查资料,通过不断地测试终于成功,接下来我讲一下我的解决方法从后台取到值后想在js中直...
  • askycat
  • askycat
  • 2017年03月10日 20:39
  • 8788

在线office编辑 iWebOffice系列的交互操作

office 控件编辑 基本介绍 iWebOffice系列文档控件,是江西金格网络科技有限责任公司经过两年的完全自主开发设计,拥有自主知识产权的中间件软件,于2003年3月取得了国家软件著作权...
  • XingKong22star
  • XingKong22star
  • 2014年08月04日 14:23
  • 4054

web前端之html图片操作详解从零开始(三)----img标签

Image.html
  • qq939782569
  • qq939782569
  • 2017年02月25日 15:51
  • 2512

Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!

Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!
  • sleks
  • sleks
  • 2014年06月25日 10:17
  • 1528

KindEditor在线HTML文本编辑器在asp.net中的使用

KindEditor在线HTML文本编辑器在asp.net中的使用
  • yangyisen0713
  • yangyisen0713
  • 2014年04月25日 16:27
  • 1939

HTML在线编辑器的基本概念

1,什么是HTML在线编辑器 顾名思义,在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档。 2,HTML在线编辑器有什么用? 因为HTML在线编辑器可用于在线编辑基于HTML...
  • ilvu999
  • ilvu999
  • 2012年10月30日 18:48
  • 400

HTML在线编辑器。。一看就会的

HTML在线编辑器(HTML online editor) 在Web程序应用中,最常见的一种是信息和言论的发布和交流。 在信息发布的同时,往往需要对发布的数据进行格式的转换,才能使信息以用户需要的...
  • AFei_student
  • AFei_student
  • 2011年09月15日 20:58
  • 509

FCKeditor html在线编辑器

FCKeditor介绍  FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务。它不需要安装任何形式的客户端,兼容绝大多数主流浏览器...
  • rubychen410
  • rubychen410
  • 2011年04月25日 16:37
  • 716

用Javascript 编写 HTML在线编辑器

在线编辑器主要有3大类:1.直接用textarea 标签 优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得 缺点:不直观,功能非常少 2.用 DIV或者TABLE的CONTENTEDI...
  • yiluoAK_47
  • yiluoAK_47
  • 2012年05月04日 11:11
  • 912

在线HTML编辑器——ueditor,跟struts2结合

如果你在struts2下面使用上一篇的配置的话,还是不够的。 因为  struts2  会把  ueditor  的上传路径给过滤掉,导致不能正常上传。 还要做的也不多,写一个过滤器就行了...
  • l30961171
  • l30961171
  • 2012年07月28日 09:40
  • 3465
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:制作WEB在线编辑器-插入HTML标签
举报原因:
原因补充:

(最多只允许输入30个字)