首页 > 代码库 > 富文本编辑器开发

富文本编辑器开发

2024-07-21 16:15:17   218人阅读

<body onl oad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value=http://www.mamicode.com/"B" />>接下来添加iframe：
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe> 

编写js代码：
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close(); 

这里主要是给iframe的body添加样式，下面是命令函数，比如改变字体大小颜色之类都要通过它来实现：
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}

添加各种编辑用的按钮和下拉框：
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value=http://www.mamicode.com/"B" onClick="fontEdit('bold')" />>
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
   <option value=http://www.mamicode.com/"Arial">Arial>
下面是整个完整的代码：
<html>
<head>
</head>
<body onl oad="def()"><center>
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value=http://www.mamicode.com/"B" onClick="fontEdit('bold')" />>





富文本编辑器开发


联系
我们