📄 html_editor.ascx
字号:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HTML_Editor.ascx.cs" Inherits="MyEditor_HTML_Editor" %>
<%--编辑区--%>
<table onmouseout="update();">
<tr>
<td style="width: <%=width %>px; height: 27px;" >
<%--粗斜体和下划线--%>
<img id="toolbarB" runat="server" src="officeXP/bold.gif" onclick="addBold();" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" />
<img id="toolbarI" runat="server" src="officeXP/italic.gif" onclick="addItalic();" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" />
<img id="toolbarU" runat="server" src="officeXP/underline.gif" onclick="addUnderline();" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" />
<img id="seperater" runat="server" src="officeXP/separator.gif" />
字体<select id="font" style="width: 92px" onchange="addFont(this.value);"></select>
文字大小<select id="fontsize" style="width: 60px" onchange="addFontSize(this.value);"></select>
<img id="toolbarImg" runat="server" src="officeXP/insertimage.gif" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" onclick="popupImageDialog();"/>
<img id="toolbarTab" runat="server" src="officeXP/inserttable.gif" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" onclick="popupTableDialog();" />
<img id="toolbarSub" runat="server" src="officeXP/subscript.gif" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" onclick="addSub();" />
<img id="toolbarSup" runat="server" src="officeXP/superscript.gif" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" onclick="addSup();" />
<img id="toolbarSpec" runat="server" onmouseover="doStrength(this);" onmouseout="undoStrength(this);" onclick="addSpec();" src="officeXP/specialchar.gif" />
<input id="Button1" runat="server" type="button" value="显示HTML" onclick="if(this.value=='显示HTML'){edit_mode();this.value='设计HTML';}else{design_mode();this.value='显示HTML';}" />
</td>
</tr>
<tr>
<td style="width:<%=width %>px; height:<%=height %>px;">
<textarea id="<%=ClientID %>_HtmlCodeEdit" style="width:<%=width %>px; height:<%=height %>px;" ></textarea>
<iframe id="HtmlEdit" runat="server"></iframe>
</td>
</tr>
</table>
<asp:HiddenField ID="HtmlCodeField" runat="server" />
<%--上传图像对话框--%>
<iframe id="dialog" style=" width:250px; height:250px; z-index:100; position:absolute; display:none; padding:0; margin:0; border:0;">
</iframe>
<script type="text/javascript">
var selection;
var range
var editor;
init();
// var sle=document.getElementById("font");
// var opt=document.createElement("option");
// var fonts=document.getElementById("fonts").documentElement;
// fonts.first
// opt.innerHTML="";
// opt.value="";
// sle.appendChild(opt);
var fontsize = Array(
Array(1,'8pt'),
Array(2,'10pt'),
Array(3,'12pt'),
Array(4,'14pt'),
Array(5,'18pt'),
Array(6,'24pt'),
Array(7,'36pt')
);
function init()
{
document.getElementById("<%=HtmlEdit.ClientID%>").style.width="<%=width %>px";
document.getElementById("<%=HtmlEdit.ClientID%>").style.height="<%=Height %>px";
editor = document.getElementById("<%=HtmlEdit.ClientID%>").contentWindow;
//只需键入以下设定，iframe立刻变成编辑器。
//但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
editor.document.designMode ="On";
editor.focus();
editor.document.open();
editor.document.write("<html><head><title></title></head><body></body></html>");
editor.document.close();
editor.document.body.innerHTML=document.getElementById("<%=HtmlCodeField.ClientID %>").value;
var codeEditor=document.getElementById("<%=ClientID %>_HtmlCodeEdit");
codeEditor.style.display="none";
var fonts = Array(
Array('SimSun', '宋体'),
Array('SimHei', '黑体'),
Array('FangSong_GB2312', '仿宋体'),
Array('KaiTi_GB2312', '楷体'),
Array('NSimSun', '新宋体'),
Array('Arial', 'Arial'),
Array('Arial Black', 'Arial Black'),
Array('Times New Roman', 'Times New Roman'),
Array('Courier New', 'Courier New'),
Array('Tahoma', 'Tahoma'),
Array('Verdana', 'Verdana'),
Array('GulimChe', 'GulimChe'),
Array('MS Gothic', 'MS Gothic')
);
var sle=document.getElementById("font");
var i;
for(i=0;i<fonts.length;i++)
{
var opt=document.createElement("option");
opt.innerHTML=(fonts[i])[1];
opt.value=(fonts[i])[0];
sle.appendChild(opt);
}
var fontsize = Array(
Array(1,'8pt'),
Array(2,'10pt'),
Array(3,'12pt'),
Array(4,'14pt'),
Array(5,'18pt'),
Array(6,'24pt'),
Array(7,'36pt')
);
var sle1=document.getElementById("fontsize");
for(i=0;i<fontsize.length;i++)
{
var opt1=document.createElement("option");
opt1.innerHTML=(fontsize[i])[1];
opt1.value=(fontsize[i])[0];
sle1.appendChild(opt1);
}
}
function document.onreadystatechange()
{
return;
}
//字体加粗
function addBold()
{
editor.focus();
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
//斜体函数
function addItalic()
{
editor.focus();
var sel = editor.document.selection.createRange();
insertHTML("<i>"+sel.text+"</i>");
}
//下划线
function addUnderline()
{
editor.focus();
var sel=editor.document.selection.createRange();
insertHTML("<u>"+sel.text+"</u>");
}
//添加图像
function addImage(url,w,h)
{
// editor.focus();
// var sel=editor.document.selection.createRange();
var str="<img src=\""+url+"\" style=\"width:"+w+"px; height:"+h+"px;\"/>";
if (selection.type.toLowerCase() != "none")
{
selection.clear();
}
range.pasteHTML(str) ;
range.select();
var dialog=document.getElementById("dialog");
dialog.style.display="none";
}
//添加表格
function addTable(cols,rows)
{
if(cols*rows!==0)
{
// editor.focus();
// var sel=editor.document.selection.createRange();
var str="<table border=\"1\">";
var i,j;
for(i=0;i<rows;i++)
{
str+="<tr>";
for(j=0;j<cols;j++)
{
str+="<td></td>";
}
str+="</tr>";
}
str+="</table>";
//insertHTML(str);
if (selection.type.toLowerCase() != "none")
{
selection.clear();
}
range.pasteHTML(str) ;
}
range.select();
var dialog=document.getElementById("dialog");
dialog.style.display="none";
}
//上标
function addSub()
{
editor.focus();
var sel=editor.document.selection.createRange();
var str="<sub>"+sel.text+"</sub>";
insertHTML(str);
}
//下标
function addSup()
{
editor.focus();
var sel=editor.document.selection.createRange();
var str="<sup>"+sel.text+"</sup>";
insertHTML(str);
}
//字体
function addFont(type)
{
editor.focus();
var sel=editor.document.selection.createRange();
var str="<font face=\""+type+"\">"+sel.text+"</font>";
insertHTML(str);
}
//文字大小
function addFontSize(value)
{
editor.focus();
var sel=editor.document.selection.createRange();
var str="<font size=\""+value+"\">"+sel.text+"</font>";
insertHTML(str);
}
//插入特殊字符
function insertSpec(c)
{
editor.focus();
//var sel=editor.document.selection.createRange();
//var str="<sup>"+selection.text+"</sup>";
var str=c;
// //var str="№";
// var ele=document.createTextNode(c);
// if (selection.type.toLowerCase() != "none")
// {
// selection.clear();
// }
range.pasteHTML(str);
// insertHTML(str);
range.select();
//document.getSelection().addRange(range);
var dialog=document.getElementById("dialog");
dialog.style.display="none";
}
function addSpec()
{
editor.focus();
selection=editor.document.selection;
range=editor.document.selection.createRange();
var dialog=document.getElementById("dialog");
dialog.style.left=event.clientX;
dialog.style.top=event.clientY;
dialog.src='<%=ResolveUrl("specCharDialog.htm")%>';
dialog.style.display="";
}
//添加HTML代码
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear();
}
editor.document.selection.createRange().pasteHTML(html) ;
}
//转到HTML编辑模式
function edit_mode() {
//alert(editor.document.body.innerHTML);
document.getElementById("<%=HtmlCodeField.ClientID%>").value=editor.document.body.innerHTML;
var CodeEdit=document.getElementById("<%=ClientID %>_HtmlCodeEdit");
CodeEdit.value=document.getElementById("<%=HtmlCodeField.ClientID%>").value;
CodeEdit.style.display="";
var Edit=document.getElementById("<%=HtmlEdit.ClientID %>");
Edit.style.display="none";
}
//转入HTML设计模式
function design_mode() {
//alert(editor.document.body.innerHTML);
var CodeEdit=document.getElementById("<%=ClientID %>_HtmlCodeEdit");
document.getElementById("<%=HtmlCodeField.ClientID%>").value=CodeEdit.value;
CodeEdit.style.display="none";
var Edit=document.getElementById("<%=HtmlEdit.ClientID %>");
Edit.contentWindow.document.body.innerHTML=document.getElementById("<%=HtmlCodeField.ClientID%>").value;
Edit.style.display="";
}
//工具条效果
//凸显
function doStrength(item)
{
item.style.cssText="<%=highlightCss%>";
}
//恢复原状
function undoStrength(item)
{
item.style.cssText="<%=nohighlightCss%>";
}
function HtmlEditorDraw()
{
}
function HtmlEdit_onclick() {
}
//创建弹出对话框
function popupTableDialog()
{
editor.focus();
selection=editor.document.selection;
range=editor.document.selection.createRange();
var dialog=document.getElementById("dialog");
dialog.style.left=event.clientX;
dialog.style.top=event.clientY;
dialog.src='<%=ResolveUrl("tableDialog.htm")%>';
dialog.style.display="";
}
function popupImageDialog()
{
editor.focus();
selection=editor.document.selection;
range=editor.document.selection.createRange();
var dialog=document.getElementById("dialog");
dialog.style.left=event.clientX;
dialog.style.top=event.clientY;
dialog.src='<%=ResolveUrl("uploadDialog.htm")%>';
dialog.style.display="";
// var img=document.getElementById("< %=ImagePreview.ClientID% >");
// img.style.display="none";
// //create a fileupload
// var container=document.getElementById("< %=fileContainer.ClientID % >");
// if(container.firstChild==null)
// container.innerHTML="<input type=\"file\" id=\"<%=ClientID%>_file\" onChange=\"showImage(this.value)\" \>";
// var fileData=document.getElementById("<%=ClientID%>_file");
// showImage(fileData.value);
}
function hiddenDialog()
{
// var dialog=document.getElementById("< %=dialog.ClientID% >");
// dialog.style.display="none";
// var container=document.getElementById("< %=fileContainer.ClientID % ");
// var fileData=document.getElementById("<%=ClientID%>_file");
// container.removeChild(fileData);
//
}
//更新控件的内容
function update()
{
btn1=document.getElementById("<%=Button1.ClientID%>");
//设计模式
if(btn1.value=="显示HTML")
{
document.getElementById("<%=HtmlCodeField.ClientID%>").value=editor.document.body.innerHTML;
}
//HTML编辑模式
else
{
document.getElementById("<%=HtmlCodeField.ClientID%>").value=document.getElementById("<%=ClientID %>_HtmlCodeEdit").value;
}
}
function uploadImg()
{
}
</script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -