纯javascript的HTML在线编辑器

时间:2024-03-10 07:56:35
因工作需要,需使用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() == "<p>&nbsp;</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>&nbsp;</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;
    }

}

源代码:https://files.cnblogs.com/redleaf1995/editor.rar