因工作需要，需使用javascript來操作HTML在線編輯器，在網上搜了許多，都是與服務器端相結合的，通過表單提交的方式來處理的。沒辦法，只好在此基礎上對其進行更新！
參考的myeditor控件不知是哪位高人寫的。在此表示感謝！
首先，定義一全局變量，用於向HtmlEditor傳遞值：
![]()
var EDITOR_DEFAULT_VALUE = ""; //全局變量,用於向Editor控件傳遞值
![]()
function fSetHtmlContent()
![]()
{
![]()
var ovalue = window.parent.EDITOR_DEFAULT_VALUE;
![]()
var html = ovalue;
![]()
if (html)
![]()
{
![]()
var header = "<head><link rel="stylesheet" type="text/css" href="editorArea.css" /></head><body MONOSPACE>" ;
![]()
var f = window.frames["HtmlEditor"];
![]()
f.document.open();
![]()
//f.document.getElementsByTagName("BODY")[0].innerHTML = oLinkField.value;
![]()
f.document.write(header + html);
![]()
f.document.close();
![]()
}
![]()
}
![]()
//containername:存放iframe的容器名稱 framename:HtmlEditor的iframe名稱 editorpath:編輯器index.html的路徑
![]()
function createEditor(containername,framename,editorpath)
![]()
{
![]()
if(!document.getElementById(framename))
![]()
{
![]()
var HTMLEDITOR = document.createElement("iframe");
![]()
HTMLEDITOR.id = framename;
![]()
HTMLEDITOR.name = framename;
![]()
HTMLEDITOR.src = editorpath;
![]()
HTMLEDITOR.frameBorder = "0";
![]()
HTMLEDITOR.marginHeight = "0";
![]()
HTMLEDITOR.marginWidth = "0";
![]()
HTMLEDITOR.height = "238";
![]()
HTMLEDITOR.width = "400";
![]()
![]()
document.getElementById(containername).appendChild(HTMLEDITOR);
![]()
}
![]()
}
![]()
//設置HtmlEditor的文本 framename:HtmlEditor的iframe名稱 html_text:帶格式的文本
![]()
function setEditorText(framename,html_text)
![]()
{
![]()
HtmlEditor_Default_Value = html_text;
![]()
![]()
if(window.frames[framename].frames["HtmlEditor"] != null)
![]()
{
![]()
var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0];
![]()
html.innerHTML = HtmlEditor_Default_Value;
![]()
}
![]()
}
![]()
//獲得HtmlEditor的帶格式文本 framename:HtmlEditor的iframe名稱
![]()
function getEditorHTML(framename)
![]()
{
![]()
var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML;
![]()
if ( (html.toLowerCase() == "<p> </p>") || (html.toLowerCase() == "<p></p>") )
![]()
{
![]()
html = "";
![]()
}
![]()
return html;
![]()
}
js源代碼如下:
![]()
var EDITOR_DEFAULT_VALUE = ""; //全局變量,用於向Editor控件傳遞值
![]()
![]()
function init()
![]()
{
![]()
var obj = document.getElementById("taContent");
![]()
obj.value = "<b>粗體</b><i>斜體</i>";
![]()
}
![]()
![]()
//containername:存放iframe的容器名稱 framename:HtmlEditor的iframe名稱 editorpath:編輯器index.html的路徑
![]()
function createEditor(containername,framename,editorpath)
![]()
{
![]()
if(!document.getElementById(framename))
![]()
{
![]()
var HTMLEDITOR = document.createElement("iframe");
![]()
HTMLEDITOR.id = framename;
![]()
HTMLEDITOR.name = framename;
![]()
HTMLEDITOR.src = editorpath;
![]()
HTMLEDITOR.frameBorder = "0";
![]()
HTMLEDITOR.marginHeight = "0";
![]()
HTMLEDITOR.marginWidth = "0";
![]()
HTMLEDITOR.height = "238";
![]()
HTMLEDITOR.width = "400";
![]()
![]()
document.getElementById(containername).appendChild(HTMLEDITOR);
![]()
}
![]()
}
![]()
![]()
//設置初始值
![]()
function setEditorDefaultValue(text)
![]()
{
![]()
EDITOR_DEFAULT_VALUE = text;
![]()
}
![]()
![]()
//得到textarea的值
![]()
function getTextareaValue()
![]()
{
![]()
var obj = document.getElementById("taContent");
![]()
return obj.value;
![]()
}
![]()
![]()
//獲得HtmlEditor的帶格式文本 framename:HtmlEditor的iframe名稱
![]()
function getEditorHTML(framename)
![]()
{
![]()
var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML;
![]()
if ( (html.toLowerCase() == "<p> </p>") || (html.toLowerCase() == "<p></p>") )
![]()
{
![]()
html = "";
![]()
}
![]()
return html;
![]()
}
![]()
![]()
//設置HtmlEditor的文本 framename:HtmlEditor的iframe名稱 html_text:帶格式的文本
![]()
function setEditorText(framename,html_text)
![]()
{
![]()
HtmlEditor_Default_Value = html_text;
![]()
![]()
if(window.frames[framename].frames["HtmlEditor"] != null)
![]()
{
![]()
var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0];
![]()
html.innerHTML = HtmlEditor_Default_Value;
![]()
}
![]()
}
源代碼:點此進入下載頁面
博客園下載地址:http://www.cnblogs.com/Files/redleaf1995/editor.rar
參考的myeditor控件不知是哪位高人寫的。在此表示感謝！
首先，定義一全局變量，用於向HtmlEditor傳遞值：
var EDITOR_DEFAULT_VALUE = ""; //全局變量,用於向Editor控件傳遞值原先控件的editfunc.js中的代碼注掉了很多，刪除掉了作爲get方式傳遞的TextArea對象。
editfunc.js中設置初值的方法，作了改變：function fSetHtmlContent()
{
var ovalue = window.parent.EDITOR_DEFAULT_VALUE; var html = ovalue; if (html)
{
var header = "<head><link rel="stylesheet" type="text/css" href="editorArea.css" /></head><body MONOSPACE>" ; var f = window.frames["HtmlEditor"]; f.document.open(); //f.document.getElementsByTagName("BODY")[0].innerHTML = oLinkField.value; f.document.write(header + html); f.document.close();
}
}我是用的動態生成方式，通過點擊按鈕生成HtmlEditor：
代碼如下：
//containername:存放iframe的容器名稱 framename:HtmlEditor的iframe名稱 editorpath:編輯器index.html的路徑function createEditor(containername,framename,editorpath){ if(!document.getElementById(framename)) { var HTMLEDITOR = document.createElement("iframe"); HTMLEDITOR.id = framename; HTMLEDITOR.name = framename; HTMLEDITOR.src = editorpath; HTMLEDITOR.frameBorder = "0"; HTMLEDITOR.marginHeight = "0"; HTMLEDITOR.marginWidth = "0"; HTMLEDITOR.height = "238"; HTMLEDITOR.width = "400"; document.getElementById(containername).appendChild(HTMLEDITOR); }}設置HtmlEditor的值的代碼：
//設置HtmlEditor的文本 framename:HtmlEditor的iframe名稱 html_text:帶格式的文本function setEditorText(framename,html_text){ HtmlEditor_Default_Value = html_text; if(window.frames[framename].frames["HtmlEditor"] != null) { var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0]; html.innerHTML = HtmlEditor_Default_Value; }}獲得HtmlEditor的值的代碼：
//獲得HtmlEditor的帶格式文本 framename:HtmlEditor的iframe名稱function getEditorHTML(framename){ var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; if ( (html.toLowerCase() == "<p> </p>") || (html.toLowerCase() == "<p></p>") ) { html = ""; } return html;}var EDITOR_DEFAULT_VALUE = ""; //全局變量,用於向Editor控件傳遞值function init(){ var obj = document.getElementById("taContent"); obj.value = "<b>粗體</b><i>斜體</i>";}//containername:存放iframe的容器名稱 framename:HtmlEditor的iframe名稱 editorpath:編輯器index.html的路徑function createEditor(containername,framename,editorpath){ if(!document.getElementById(framename)) { var HTMLEDITOR = document.createElement("iframe"); HTMLEDITOR.id = framename; HTMLEDITOR.name = framename; HTMLEDITOR.src = editorpath; HTMLEDITOR.frameBorder = "0"; HTMLEDITOR.marginHeight = "0"; HTMLEDITOR.marginWidth = "0"; HTMLEDITOR.height = "238"; HTMLEDITOR.width = "400"; document.getElementById(containername).appendChild(HTMLEDITOR); }}//設置初始值function setEditorDefaultValue(text){ EDITOR_DEFAULT_VALUE = text;}//得到textarea的值function getTextareaValue(){ var obj = document.getElementById("taContent"); return obj.value;}//獲得HtmlEditor的帶格式文本 framename:HtmlEditor的iframe名稱function getEditorHTML(framename){ var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; if ( (html.toLowerCase() == "<p> </p>") || (html.toLowerCase() == "<p></p>") ) { html = ""; } return html;}//設置HtmlEditor的文本 framename:HtmlEditor的iframe名稱 html_text:帶格式的文本function setEditorText(framename,html_text){ HtmlEditor_Default_Value = html_text; if(window.frames[framename].frames["HtmlEditor"] != null) { var html = window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0]; html.innerHTML = HtmlEditor_Default_Value; }}源代碼:點此進入下載頁面
博客園下載地址:http://www.cnblogs.com/Files/redleaf1995/editor.rar
