2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'各浏览器对 document.execCommand 方法的首参数可选值范围存在差异',
blogAbstract:'\r\n标准参考\r\n无。\r\n问题描述\r\nexecCommand 方法通常用于控制可编辑的 IFRAME 内容，制作富文本编辑器。 但他现在为止还是非标准的，方法的首参数 Commmands 的可选值由各个浏览器厂商制定，支持程度并不统一。\r\n造成的影响\r\n使用仅有某个浏览器支持的 Commmands 参数会造成其他浏览器运行时脚本出错，从而影响其他浏览器内正常脚本继续执行。\r\n受影响的浏览器\r\n\r\n\r\n\r\n所有浏览器\r\n&\r\n问题分析\r\ndocument.execCommand 方法提供了对浏览器内置命令调用的接口，他暂时不属于任何现行规范定义范围，由浏览器各自实现。 \r\n在现有 HTML5 规范草案中，已经加入对 execCommand 方法的描述，他被安置在 HTMLDocument 接口定义中。该方法执行参数： ',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}利用contenteditable属性与execCommand()步骤制作简易富文本编辑器 - HTML/CSS当前位置:& &&&利用contenteditable属性与execCommand()步骤制作简利用contenteditable属性与execCommand()步骤制作简易富文本编辑器&&网友分享于：&&浏览：0次利用contenteditable属性与execCommand()方法制作简易富文本编辑器
　 HTML5新增contenteditable全局属性，通过此属性与document.execCommand()方法来制作富文本编辑器　
contenteditable属性
　　作用：指定是否可以在浏览器里编辑内容
　　值：true/false
　　注意：设置document.designMode ='on'时，页面的任意位置都可以编辑；使用contenteditable ='true'则只对具体元素和其包含的元素起作用
　　移动端：移动端ios5以及android3之后才支持该属性
&div contenteditable&我是测试文字&/div&
document.execCommand()方法
document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
//aCommandName为命令名称，不可省略
//aShowDefaultUI为是否展示用户界面，默认为false，可省略
//aValueArgument为额外参数值，默认为null,可省略
　　&[注意]firefox浏览器在第二个参数为true时，会抛出错误，所以为了确保兼容性，第二个参数应该始终为false。
【1】段落格式
　　[1.1]居中
document.execCommand('justifyCenter');
　　[1.2]左对齐&
document.execCommand('justifyLeft');
　　[1.3]右对齐
document.execCommand('justifyRight');
　　[1.4]添加缩进
document.execCommand('indent');
　　[1.5]去掉缩进
document.execCommand('outdent');
【2】文本格式
　　[2.1]字体类型
document.execCommand('fontname',false,sFontName)
　　[2.2]字体大小
document.execCommand('fontsize',false,sFontSize)
　　[2.3]字体颜色
document.execCommand('forecolor',false,sFontColor)
　　[2.4]背景色
document.execCommand('backColor',false,sBackColor)
　　[2.5]加粗
document.execCommand('bold');
　　[2.6]斜体
document.execCommand('italic');
　　[2.7]下划线
document.execCommand('underline');
　　[3.1]复制
document.execCommand('copy');
　　[3.2]剪切
document.execCommand('cut');
　　[3.3]粘贴(经测试无效)
document.execCommand('paste');
　　[3.4]全选
document.execCommand('selectAll');
　　[3.5]删除
document.execCommand('delete');
　　[3.6]删除光标后字符
document.execCommand('forwarddelete');
　　[3.7]清空格式
document.execCommand('removeFormat');
　　[3.8]前进一步
document.execCommand('redo');
　　[3.9]后退一步
document.execCommand('undo');
　　[3.10]打印(对firefox无效)
document.execCommand('print');
　　[注意]与剪切板有关的命令在不同浏览器中差异很大。opera不支持，firefox默认禁用，而safari和chrome未实现paste。&
document.execCommand('insertImage',false,'image.png');
简易富文本编辑器
&div class="box"&
&div class="con" id="con"&
&button data-name="selectAll"&全选&/button&
&button data-name="delete"&删除&/button&
&button data-name="undo"&撤销&/button&
&button data-name="print"&打印&/button&
&button data-name="bold"&加粗&/button&
&button data-name="italic"&斜线&/button&
&button data-name="underline"&下划线&/button&
&button data-name="fontsize" data-value="16px"&大号字体&/button&
&button data-name="forecolor" data-value="red"&红色文本&/button&
&button data-name="backcolor" data-value="gray"&灰色背景&/button&
&button data-name="removeFormat"&清空格式&/button&
&div class="show" id="show" contenteditable&我是测试文字&/div&
width: 500
margin-bottom: 6
.con button{
padding: 2
margin-right: 2
height: 200
border: 2px solid rgba(0,0,0,0.3);
var aCon = document.getElementById('con').getElementsByTagName('button');
for(var i = 0; i & aCon. i++){
aCon[i].onclick = function(){
document.execCommand(this.dataset.name,false,this.dataset.value);
　　&演示框&选中文字后，点击下列相应属性值可进行演示
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有execCommand - 博客频道 - CSDN.NET
分类：HTML5
document对象的execCommand方法
调用方法：function（effect）{editPane.document.execCommand（effect,false,null）
execCommand（）操作命令
是否有参数
设置文档背景颜色，在IE中只是设置文本的颜色，需要传递参数
设置光标插入点后或被选中文本为粗体
contentReadOnly
设置文档是否为只读。需要传递是/否参数
拷贝选中的内容到剪切板上。剪切板的内容可以通过document.getSelection()来获取。IE下获取方式为document.selection.creareRange().text
createLink
把选中的内容作为链接。需要传递链接地址
剪切选中的内容
decreaseFontSize
缩小光标插入点后或者选中文字的大小。IE不支持
删除选中内容
改变光标插入点后或者被选择文字的样式。需要传递参数
改变光标插入点后或者被选择文字的大小。需要传递参数，从1-7
改变光标插入点后或者被选择文字的颜色。需要传递颜色值
formatBlock
在光标掺入后或者被选中内容外插入格式化标签。需要传递标签名字，比如&&h1&&。常见的还包括BUTTON,TEXTAREA等等。IE只支持H1-H6，ADDRESS和PRE
hiliteColor
改变光标插入点后或者被选中内容的背景色。需要传递颜色值
increaseFontSize
放大光标插入点后或者被选中文字的大小。IE不支持
缩进光标插入点后或者被选中文字
insertHTML
在光标插入点后或者被选中的内容上（删除被选中内容)插入HTML代码。IE不支持
insertImage
在光标插入后或者被选中内容上（删除被选中内容）插入图片
insertOrderedList
在光标插入点后或者被选中内容上（删除被选中内容）插入一个人数字排序的&ol&
insertUnorderedList
在光标插入点后或者被选中内容上（删除被选中内容）插入一个人数字排序的&ul&
改变光标插入后或者被选中文本为斜体
justifyCenter
改变光标插入后或者被选中文本居中
justifyLeft
改变光标插入后或者被选中文本向左移动
justifyRight
改变光标插入后或者被选中文本向右移动
减少光标插入后或者被选中文字
在光标插入点后或者被选中内容上（覆盖被选中内容）插入剪切板内容
执行前一个操作
removeFormat
删除选中内容上的所有样式
选择编辑器中所有内容
strikeThrough
改变光标插入后或者被选中文本为删除线
改变光标插入后或者被选中文本为下标
superscript
改变光标插入后或者被选中文本为上标
改变光标插入后或者被选中文本为下划线
取消前一个操作
取消createLink创建的链接
styleWithCSS
当样式改变实时生成CSS还是生成一个样式控制标签，参数为true时生成CSS
chang_yuan_2011
排名：千里之外
（9）（3）（2）（1）（1）（1）（2）（1）（1）（1）（14）