概述
关于IFrame编辑模式
开启编辑模式
document.getElementById("iframeid").contentWindow.document.designMode = "on";
document.getElementById("iframeid").contentWindow.document.contentEditable = true;注意：如果是使用外链时需要处理同源校验，并且需要在控件内容加载完成后，设置编辑模式，如果不是链接，不需要监听加载完成，可以直接设置编辑模式。
默认函数
document.getElementById("iframeid").contentWindow.document.execCommand(cmd, isDefaultShowUI, value);注意：一般的编辑操作JS已经提供了函数库，参考以下函数对照表即可。
函数对照表
| 命令（cmd） | 展示界面交互（isDefaultShowUI） | 参数值（value） | 函数说明 |
| bold | false/true | null | 将选择的文字加粗 |
| italic | false/true | null | 将选择的文字转换为斜体 |
| underline | false/true | null | 将选择的文字加下划线 |
| strikethrough | false/true | null | 将选择的文字加删除线 |
| fontsize | false/true | 1-7 | 将选择的文字修改为指定字体大小 |
| justifyleft | false/true | null | 将选择的文字居左 |
| justifycenter | false/true | null | 将选择的文字居中 |
| justifyright | false/true | null | 将选择的文字居右 |
| indent | false/true | null | 左缩进 |
| outdent | false/true | null | 右缩进 |
| insertorderedlist | false/true | null | 插入有序列表 |
| insertunorderedlist | false/true | null | 插入无序列表 |
| undo | false/true | null | 撤销 |
| redo | false/true | null | 恢复撤销 |
| removeformat | false/true | null | 将选择的文字清除格式 |
| forecolor | false/true | 颜色字符串(#aaaaaa) | 设置文档背景色 |
| backcolor | false/true | 颜色字符串(#aaaaaa) | 将选择的文字修改为指定颜色 |
注意：isDefaultShowUI存在兼容性问题，如无特殊需求，建议设置成false。
内容获取
document.getElementById("iframeid").contentWindow.document.body.innerHTML;参考链接
最后
以上就是欣喜老师为你收集整理的IFrame编辑关于IFrame编辑模式的全部内容，希望文章能够帮你解决IFrame编辑关于IFrame编辑模式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复