纯javascript的HTML在线编辑器

来源：互联网发布：联通怎么开副卡软件编辑：程序博客网时间：2024/05/16 06:58

因工作需要，需使用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源代码如下: