纯javascript的HTML在线编辑器-技术开发专区

纯javascript的HTML在线编辑器

作者：ITPUB论坛编辑： nancy 2008-04-16 11:47

【IT168技术文档】

因工作需要，需使用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;
}
}

关注我们