博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在线编辑器的原理简单示例
阅读量:4685 次
发布时间:2019-06-09

本文共 1210 字,大约阅读时间需要 4 分钟。

很多论坛都使用在线编辑器,一直好奇它们是如何实现的,在网上搜索了一些资料,终于有所收获,纠正了资料中的一些错误,凑了一个可以直接demo的例子:

-----------------------------------------------------------------------------------------------------------------------------------------------------

<IFRAME id="HtmlEdit" style="WIDTH: 100%; HEIGHT: 296px" marginWidth="0" marginHeight="0"></IFRAME>

<script language="javascript">                                                                                                                                          
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
//但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();
//只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On';
//字体特效 - 加粗方法一
function addBold()
{
    editor.focus();
    //所有字体特效只是使用execComman()就能完成。
    editor.document.execCommand("Bold", false, null);
    alert(editor.document.body.innerHTML);
}
</script>
<input type=button οnclick='addBold()'value='粗体'/>

-------------------------------------------------------------------------------

将上面代码拷贝并保存为html文件,运行即可见效果,最重要的是下面两句:

editor.document.designMode = 'On';  //用这句打开iframe窗口的编辑模式

editor.document.execCommand("Bold", false, null);  //用这句对窗口中选中的文字进行加粗操作

document.execCommand命令用法网上可搜出一大堆,不再赘述。

 

转载于:https://www.cnblogs.com/zzyyxxjc/p/7845092.html

你可能感兴趣的文章
Linux 2.6 字符设备驱动程序
查看>>
返回一个二维数组中最大子数组的和
查看>>
memcached知识点梳理
查看>>
《构建之法》第一、二、十六章阅读笔记
查看>>
asp.net mvc在Model中控制日期格式
查看>>
Pandas基础(十一)时间序列
查看>>
arrow:让Python的日期与时间变的更好
查看>>
大型网站技术架构 大纲
查看>>
nginx https ssl 设置受信任证书[转然哥]
查看>>
【转载】注意 ExecuteNonQuery() 返回值问题
查看>>
让IIS支持ASPX,添加Web服务扩展的方法,没法调试的解决办法
查看>>
【转】linux分区大小调整完全手册
查看>>
【BZOJ-3238】差异 后缀数组 + 单调栈
查看>>
SAS学习笔记 - R的数据操作
查看>>
spi master vhd timing
查看>>
MySQL命令行参数
查看>>
2.25-2.26 MapReduce执行流程Shuffle讲解
查看>>
【题解】localmaxima 数论
查看>>
SAP MM 明明已经扩展供应商到采购组织下,采购订单里还是报错?
查看>>
改变Notes ID密码
查看>>