纯javascript的HTML在线编辑器

最新推荐文章于 2024-08-20 10:10:54 发布

redleaf1995

最新推荐文章于 2024-08-20 10:10:54 发布

阅读量3.5k

点赞数

分类专栏： javascript、Web页面设计开发文章标签： html javascript iframe function header null

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/redleaf1995/article/details/2073421

版权

javascript、Web页面设计开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

因工作需要，需使用 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> </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://www.cnblogs.com/Files/redleaf1995/editor.rar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

redleaf1995 CSDN认证博客专家 CSDN认证企业博客

码龄21年

36: 原创

13万+: 周排名

129万+: 总排名

13万+: 访问

: 等级

1714: 积分

39: 粉丝

10: 获赞

23: 评论

22: 收藏

私信

关注

热门文章

分类专栏

最新评论

在VB.NET下利用Socket实现简单的字符串发送接收程序
gczxxu: 估计是被编译器容错了，你可以运行时出错信息！！应该有提示建议的，如果是c# 绝对不允许你少一个大括号！！！
在VB.NET下利用Socket实现简单的字符串发送接收程序
kekewf: 学习了，谢谢大佬，有一个问题，我去掉 End Sub,运行正常，可是为啥要加 Sub() 和 End Sub 呢? 一直想不通，能指点一二么?
在VB.NET下利用Socket实现简单的字符串发送接收程序
yangzhimin3109050: 报错
在VB.NET下利用Socket实现简单的字符串发送接收程序
gczxxu: 新线程调用waitdata时。控件应采用这样的写法：ListBox1.BeginInvoke(Sub() ListBox1.Items.Insert(0, Encoding.Unicode.GetString(bytes)) End Sub)不然会出现跨进程不能调用窗体控件的错误
coreseek/sphinx中的匹配模式
GlobalMeanning: 你好，sphinx里面的如何查询含有特殊字符的字串，比如我希望查找匹配 hello! 的所有结果，但是这里hello以！结尾，所以在查找的时候会抛一个异常，因为！在sphinx里面是非的意思，而直接跟在hello后面的！后面没有内容，所以抛了异常，你知道有什么办法匹配 hello! 整个串吗？

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。