纯javascript的HTML在线编辑器
因工作需要，需使用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://files.cnblogs.com/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://files.cnblogs.com/redleaf1995/editor.rar