因工作需要，需使用 javascript 来操作 HTML 在线编辑器，在网上搜了许多，都是与服务器端相结合的，通过表单提交的方式来处理的。没办法，只好在此基础上对其进行更新！ 
参考的myeditor控件不知是哪位高人写的 。在此表示感谢 ！ 首先，定义一全局变量，用于向 HtmlEditor 传递值：

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

原先控件的editfunc.js中的代码注掉了很多，删除掉了作为get方式传递的TextArea对象。

editfunc.js 中设置初值的方法，作了改变：

function fSetHtmlContent()
 ... {
varovalue=window.parent.EDITOR_DEFAULT_VALUE;
varhtml=ovalue;
if(html)
...{
varheader="<head><link rel="stylesheet" type="text/css" href="editorArea.css" /></head><body MONOSPACE>";
varf=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))
...{
varHTMLEDITOR=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)
...{
varhtml=window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0];
        html.innerHTML=HtmlEditor_Default_Value;
    }}

获得HtmlEditor的值的代码：

// 获得HtmlEditor的带格式文本 framename:HtmlEditor的iframe名称 function getEditorHTML(framename)
 ... {
varhtml=window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML;
if( (html.toLowerCase()=="<p>&nbsp;</p>")||(html.toLowerCase()=="<p></p>") )
...{
        html="";
    }returnhtml;
}

js源代码如下:

var EDITOR_DEFAULT_VALUE = "" ; // 全局变量,用于向Editor控件传递值 function init()
 ... {
varobj=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))
...{
varHTMLEDITOR=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()
 ... {
varobj=document.getElementById("taContent");
returnobj.value;
}
// 获得HtmlEditor的带格式文本 framename:HtmlEditor的iframe名称 function getEditorHTML(framename)
 ... {
varhtml=window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML;
if( (html.toLowerCase()=="<p>&nbsp;</p>")||(html.toLowerCase()=="<p></p>") )
...{
        html="";
    }returnhtml;
}
// 设置HtmlEditor的文本 framename:HtmlEditor的iframe名称 html_text:带格式的文本 function setEditorText(framename,html_text)
 ... {    
    HtmlEditor_Default_Value=html_text;
    
if(window.frames[framename].frames["HtmlEditor"]!=null)
...{
varhtml=window.frames[framename].frames["HtmlEditor"].document.getElementsByTagName("BODY")[0];
        html.innerHTML=HtmlEditor_Default_Value;
    }}

源代码: 点此进入下载页面
博客园下载地址: http://www.cnblogs.com/Files/redleaf1995/editor.rar

纯javascript的HTML在线编辑器相关推荐

  1. javascript实现HTML在线编辑器

    javascript实现HTML在线编辑器   以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法. document.execCommand(com ...

  2. 用Javascript 编写 HTML在线编辑器

    在线编辑器主要有3大类:1.直接用textarea 标签 优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得 缺点:不直观,功能非常少 2.用 DIV或者TABLE的CONTENTEDITAB ...

  3. Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具，算不算？！

    关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  4. tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存

    以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...

  5. JavaScript Code在线编辑器--JSEditor

    这是使用HTML编写的一个具有行号指示在线编辑器,具备类似VS.NET IDE的在编辑状态中的对象查询功能,同时具备一定的JavaScript调试功能. 下载地址:http://game.edu3w. ...

  6. 纯JavaScript二维码在线生成网页源码

    介绍: 纯JavaScript实现二维码生成的网页源码,各位技术爱好者可以拿去研究, 支持设置二维码的各项具体内容,适合专业人士使用. 网盘下载地址: https://zijiewangpan.com ...

  7. 所见即所得的php编辑,常用所见即所得HTML在线编辑器汇总（15个）

    基于Web的HTML编辑器,可视化编辑器,或者是富文本编辑器,是让用户在浏览器中输入富文本的一个Web组件.大多数时候 ,这些HTML编 辑器都 使用于CMS管理系统 中,让管理理或作者可以在后台轻松 ...

  8. html5在线编辑器 h,前端最好用的HTML在线编辑器是哪一款

    <前端最好用的HTML在线编辑器是哪一款>要点: 本文介绍了前端最好用的HTML在线编辑器是哪一款,希望对您有用.如果有疑问,可以联系我们. 开发网站,一定会碰到HTML在线编辑器,我们详 ...

  9. html作品使用说明,HTML 在线编辑器使用说明

    JSBIN 是一款HTML在线编辑器,以帮助那些要学前端或者正在学习前端的同学. 以下我们来看下这款工作的使用说明: 快速上手使用 打开页面后看到如下画面,网址列就是http://jsbin.com/ ...

最新文章

  1. Oracle ASM 详解 收藏
  2. 以下linux进程内存空间中按低地址,Linux 内核开发 - 进程空间
  3. 搭建PHP本地服务器(XAMPP)
  4. php 中间代码,PHP内核中用户函数、内部函数和中间代码的转换
  5. 需要写的一些pycoe
  6. Blackfin DSP学习心得与参考资料
  7. 位数（digits）的处理
  8. 高斯消元解线性方程组（浮点高斯消元模板）
  9. 从0开始写一个基于Flutter的开源中国客户端（7）——App网络请求和数据存储
  10. C语言教材市场的分析
  11. python怎么进阶_你真的会自学么？大佬整理的python进阶路径（长更）
  12. js中reduce()方法使用
  13. html5制作电子日历,基于HTML5的日历制作软件
  14. html5 sketchpad,Sketchpad：基于html5在线图像绘画板
  15. 如何检查java代码有误_Java代码查错题
  16. 如何修改图片的dpi？图片的dpi怎么调？
  17. du和df文件大小不一致问题排查
  18. vue2 与 vue3 生命周期对比
  19. NXP JN5169使用定时器进行PWM输出和定时功能
  20. 更改文件类型方法（文本文档改为lic文件）

热门文章

  1. QT下载速度慢的解决方法
  2. Python DistributedDataParallel（DDP）训练模型
  3. shell脚本：sh、bash、dash的关系
  4. 【问题解决】电脑能用QQ但是打不开网页
  5. 制造业MES生产管理系统程序代码 MES源码
  6. python百度地图标注,Python+百度地图实现地址多点标注--用上BMap了
  7. MySQL中的max_connections和max_user_connections 及 MySQL服务器最大连接数的合理设置
  8. OpenStack云平台搭建(3) | 部署Glance
  9. linux查看usb设备文件,Linux下查看USB设备信息
  10. 5-2 图书价格汇总