纯javascript的HTML在线编辑器

因工作需要，需使用javascript来操作HTML在线编辑器，在网上搜了许多，都是与服务器端相结合的，通过表单提交的方式来处理的。没办法，只好在此基础上对其进行更新！
参考的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() == " ") || (html.toLowerCase() == "") )

{

html = "";

}

return html;

}

js源代码如下:

var EDITOR_DEFAULT_VALUE = ""; //全局变量,用于向Editor控件传递值

function init()

{

var obj = document.getElementById("taContent");

obj.value = "粗体斜体";

}

//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() == " ") || (html.toLowerCase() == "") )

{

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

Tag标签: javascript,动态,控件,HTML,在线,编辑器,服务器端,客户端,提交,HtmlEditor

posted on 2008-04-16 11:35 红色枫叶阅读(378) 评论(0) 编辑收藏所属分类: javascript、Web页面设计开发

与我联系

搜索

常用链接

留言簿

我参加的小组

我的标签

随笔分类

随笔档案

相册

收藏夹

CSDN

积分与排名

最新评论

阅读排行榜

评论排行榜