自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

2024-12-10 10:07:11

怎么说呢，刚包完夜吧，应该很累了，但现在仍有力气敲打着这些字符，看来我还没有到此为止啊。
废话少说，最近写了个在线的编辑器，类似ewebeditor那样的，当然没有人家那么强大，但是基本功能都有，而且还是兼容ie和ff的，为此我也花了不少功夫，还是赶紧把代码祭出来吧
demo.html：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script src="core.js"></script>
<script src="advance.js"></script>
<table border="0" width="800" height="500" bgcolor="gray">
<tr height="50"><td>
字体：<select onchange="FontName(this.options[this.selectedIndex].value)">
<option value="宋体">宋体
<option value="黑体">黑体
<option value="楷体_GB2312">楷体
<option value="仿宋_GB2312">仿宋
<option value="隶书">隶书
<option value="幼圆">幼圆
<option value="新宋体">新宋体
<option value="细明体">细明体
<option value="Arial">Arial
<option value="Arial Black">Arial Black
<option value="Arial Narrow">Arial Narrow
<option value="Bradley Hand ITC">Bradley Hand ITC
<option value="Brush Script MT">Brush Script MT
<option value="Century Gothic">Century Gothic
<option value="Comic Sans MS">Comic Sans MS
<option value="Courier">Courier
<option value="Courier New">Courier New
<option value="MS Sans Serif">MS Sans Serif
<option value="Script">Script
<option value="System">System
<option value="Times New Roman">Times New Roman
<option value="Viner Hand ITC">Viner Hand ITC
<option value="Verdana">Verdana
<option value="Wide Latin">Wide Latin
<option value="Wingdings">Wingdings</option>
</select>
字号：<select onchange="FontSize(this.options[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button onclick="color()">颜色</button>
<button onclick="bold()">加粗</button>
<button onclick="italic()">倾斜</button>
<button onclick="left()">居左</button>
<button onclick="center()">居中</button>
<button onclick="right()">居右</button>
</td></tr>
<tr height="50"><td>
<button>插入影视和图片</button>
<button>上传文件</button>
<button onclick="inserttable()">插入表格</button>
<button onclick="inserthr()">插入水平线</button>
<button onclick="insertlink()">插入超链接</button>
</td></tr>
<tr height="400">
<td height="400">
<iframe id="content" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
<script src="edit.js"></script>
</body>
</html>

core.js：

代码如下:

sx={};
sx.comm={};
sx.comm.string=function(){
if(!String.prototype.left){
String.prototype.left=function(l){
return this.substr(0,l);
}
}
if(!String.prototype.right){
String.prototype.right=function(l){
return this.substr(this.length-l,l);
}
}
if(!String.prototype.trim){
String.prototype.trim=function(){
return this.replace(/^/s+|/s+$/g,"");
}
}
}();
sx.comm.array=function(){
if(!Array.prototype.indexOf){
Array.prototype.indexOf=function(data){
for(var i=0;i<this.length;i++){
if(this[i]==data){
break;
}
}
return i==this.length?-1:i;
}
}
if(!Array.prototype.lastIndexOf){
Array.prototype.lastIndexOf=function(data){
for(var i=this.length-1;i>=0;i--){
if(this[i]==data){
break;
}
}
return i;
}
}
if(!Array.prototype.clone){
Array.prototype.clone=function(){
var temp=[];
for(var i=0;i<this.length;i++){
if(this[i] instanceof Array){
temp[i]=this[i].clone();
}else{
temp[i]=this[i];
}
}
return temp;
}
}
if(!Array.prototype.every){
Array.prototype.every=function(o,f){
for (var i = 0; i < this.length; i++) {
if (this[i] instanceof Array) {
this[i].every(o,f);
}
else {
f.call(o, this[i]);
}
}
}
}
}();
sx.comm.ver=function(){
try{
HTMLElement;
return "ff";
}catch(e){
return "ie";
}
}();
sx.comm.ext=function(){
if(sx.comm.ver=="ff"){
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (){
//alert(arguments[0]);
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate(arguments[0].toLowerCase(), this, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++)
{
aResult[i] = aItems.snapshotItem(i);
}
//alert(aItems.snapshotLength);
return aResult;
}
}
}();
sx.event={};
sx.event.target=function(){
if(window.event){
return window.event.srcElement;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
return f.arguments[0].target;
}
f=f.caller;
}
}
}
sx.event.event=function(){
if (window.event) {
return window.event;
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0];
}
f = f.caller;
}
}
}
sx.event.relatedtarget=function(){
if(window.event){
if(window.event.type=="mouseover"){
return window.event.fromElement;
}else if(window.event.type=="mouseout"){
return window.event.toElement;
}
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0].relatedTarget;
}
f = f.caller;
}
}
}
sx.event.stopevent=function(){
if (window.event) {
window.event.returnValue=false;
window.event.cancelBubble=true;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
break;
}
f=f.caller;
}
f.arguments[0].preventDefault();
f.arguments[0].stopPropagation();
}
}
sx.event.addevent=function(e,t,f){
if(!arguments.callee.event){
arguments.callee.event=[];
}
if(e.attachEvent){
e.attachEvent("on"+t,f);
}else{
e.addEventListener(t,f,false);
}
arguments.callee.event.push(f);
return arguments.callee.event.length-1;
}
sx.event.removeevent=function(e,t,i){
if(e.detachEvent){
e.detachEvent("on"+t,sx.event.addevent.event[i]);
}else{
e.removeEventListener(t,sx.event.addevent.event[i],false);
}
sx.event.addevent.event[i]=null;
}
sx.event.parseevent=function(e,t){
if (sx.comm.ver=="ie"){
e.fireEvent("on"+t);
}else{
var evt = document.createEvent("Events");
evt.initEvent(t, true, true);
e.dispatchEvent(evt);
}
}
sx.dom={};
sx.dom.text=function(e){
return this.e.innerText?this.e.innerText:this.e.innerHTML.replace(//<.*?/>/igm,"");
}
sx.dom.elementnodes=function(e,flag){
var temp=[];
var a=e.childNodes;
for(var i=0;i<a.length;i++){
if(a[i].nodeType==flag){
temp.push(a[i]);
}
}
return temp;
}
sx.dom.elementallnodes=function(e,flag){
var temp=[];
var a=e.getElementsByTagName("*");
for(var i=0;i<a.length;i++){
if(a[i].nodeType==flag){
temp.push(a[i]);
}
}
return temp;
}
sx.dom.xpath=function(e,mode){
p=e.cloneNode(true);
var s=p.getElementsByTagName("script");
for(var i=0;i<s.length;i++)
p.replaceChild(s[i].cloneNode(false),s[i]);
var html=p.outerHTML.replace(//=(?!"|')(.*?)(?=/s|>)/ig,"=/"$1/"");
if(window.ActiveXObject){
var x=new ActiveXObject("Msxml2.DOMDocument");
x.async=false;
x.loadXML("<?xml version=/"1.0/" encoding=/"gb2312/" ?>"+html);
}else{
var oParser = new DOMParser();
//alert(html);
var x = oParser.parseFromString(html,"text/xml");
//alert(x.documentElement.tagName);
}
var div=x.selectNodes(mode);
//alert(div.length);
var temp=[];
var a1=x.selectNodes(e.tagName.toUpperCase()+"//*");
//alert(a1.length);
var all=e.getElementsByTagName("*");
//alert(all.length);
var i1=0;
for(i=0;i<a1.length;i++){
//alert(i);
if(a1[i]==div[i1]){
temp.push(all[i]);
i1++;
}
}
x=null;
return temp;
}
sx.dom.left=function(e){
if(document.getBoundingClientRect){
return e.getBoundingClientRect().left;
}else{
var a=e;
var left=0;
while(a){
left+=a.offsetLeft;
a=a.offsetParent;
}
return left;
}
}
sx.dom.top = function(e){
if(document.getBoundingClientRect){
return e.getBoundingClientRect().top;
}else{
var a=e;
var top=0;
while(a){
top+=a.offsetTop;
a=a.offsetParent;
}
return top;
}
}
sx.dom.getstyle=function(e,prop){
if(e.currentStyle){
return e.currentStyle[prop];
}else{
return document.defaultView.getComputedStyle(e,null).getPropertyValue(prop);
}
}
sx.dom.setstyle=function(e,data){
for(var i in data){
e.style[i]=data[i];
}
}
advance.js：
var $=function(id){
return document.getElementById(id);
}

edit.js：

代码如下:

关键是demo.html和edit.js里的代码，core.js和advance.js里的代码是我为兼容浏览器写的，本想把它扩展成一个完善的框架的，因为时间有限，就没写下去了。

本编辑器还没有实现图片和文件的上传，因为需要服务器技术，所以我就没写了，可以交给读者慢慢研究。
我打算先将web放放了，开始专心于vc++的探究上，尽量能写出一个像样的程序出来，以后如果有时间我也会继续完善这个编辑器以及javascript兼容的框架。
恩，好好加油吧。

ajax php实现给fckeditor文本编辑器增加图片删除功能

工作需要需要fck编辑器的服务器浏览加个图片删除的功能,我们利用ajax php实现的有需要的朋友可以参考下. 在fckeditoreditorfilemanagerbrowserdefault文件夹中找到frmresourceslist.html文件,修改代码如下 oListManager.GetFileRowHtml找到这里,下面代码替换原来的代码复制代码代码如下: oListManager.GetFileRowHtml = function(fileName, fileUrl, fil
ASP.NET网站使用Kindeditor富文本编辑器配置步骤

1. 下载编辑器下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下 3.在网页中加入(ValidateRequest="false") 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" Validat
ThinkPHP中使用Ueditor富文本编辑器

具体插件下载: http://ueditor.baidu.com/website/download.html#ueditor UEditor官方文档: http://ueditor.baidu.com/website/document.html 之前于 "ThinkPHP-代码" 案例中发布版本: http://www.thinkphp.cn/code/175.html UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等) 例:在
xheditor所见即所得文本编辑器(代码高亮显示修改)

所见即所得的文本编辑器目前在网上流传的已经有很多了,并且都比较优秀,就我个人而言,用过的有以下几个: · 第一个接触的是ewebeditor,用在我的毕业设计里面,那时候是顺便选的,对这类东西也没什么了解,现在这个编辑器已经相当猛了: · 后来工作中用了FCKEdier,原因很简单,这个文本编辑器已经有相应的asp.net服务器端控件,封装得很棒,不过毕竟是封装好了的控件,存在着一定的局限,而且目前这个文本编辑器已经全面改版,并且现在的名字叫CKEdier,现在所在公司的项目也是
Django集成百度富文本编辑器uEditor攻略

首先从 ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自
jQuery 移动端artEditor富文本编辑器

由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少.artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能. 插件地址:https://github.com/baixuexiyang/artEditor 欢迎star或fork. demo 引用: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script
.NET下为百度文本编辑器UEditor增加图片删除功能示例

百度的这个编辑器,的确挺好,但也有些,让人不如意的,如每次更新,本来有功能给搞没了,旧版本的代码又不能直接拿过来组合用,对用户来很是不爽.今天下载了目前最新版1.2.5为版本看更新记录,主要是对表格做个修改,我下载用上,我靠,上传图片的删除功能给取消了.把旧版本的删除代码拿过来,不好使,还得我慢慢研究,闹心啊,闹心,折磨我半天. 1.首先修改服务器端ueditor\net下的文件imageManager.ashx,增加图片删除的处理.如下代码的Add部分所示: 复制代码代码如下: <%@ We
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

怎么说呢,刚包完夜吧,应该很累了,但现在仍有力气敲打着这些字符,看来我还没有到此为止啊. 废话少说,最近写了个在线的编辑器,类似ewebeditor那样的,当然没有人家那么强大,但是基本功能都有,而且还是兼容ie和ff的,为此我也花了不少功夫,还是赶紧把代码祭出来吧 demo.html: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width:
firefox 和 ie 事件处理的细节,研究,再研究书写同时兼容ie和ff的事件处理代码

在ie中,事件对象是作为一个全局变量来保存和维护的. 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象. 所以在代码中,只要轻松调用 window.event 就可以轻松获取事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理在ff中, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,ff把事件对象自动传递给对应的事件处理函数. 在代码中,函数的第一个参数就是ff下的事件对象了. 以上是我个人对两个浏览器下
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu
python写的一个文本编辑器

复制代码代码如下: #!/usr/bin/env python#-*- coding: utf-8 -*-#=============================================================================# FileName:# Desc:# Author: ToughGuy# Version: 0.0.1# LastChange: 2013-02-20 14:52:11# H
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con
教你用JAVA写文本编辑器(四)

其实写到这里,我已经差不多断气了... 常规套路,这里是前三篇的传送门,需要的同学可以看一下:JAVA写文本编辑器(三) JAVA写文本编辑器(二)JAVA写文本编辑器(一) 现在我们只差最后一部分了,断气前一定要把它搞完! 再来分析一下,最后一个Menu,里面有几个按钮,不知道大家发现没有,有两个还是特别简单,一个是新建,一个是退出.新建我们再实例化一下父窗口就可以了,但是这里有bug,关闭任一子窗口父窗口都会跟着关掉.另一个是退出,直接dispose()就好了.在监听器里处理一下: 这里就不
教你用JAVA写文本编辑器(三)

大家好,接下来的部分可能有点乱,但是并不复杂,我希望我能尽量给大家捋清楚思路. 老套路,这是我的前两篇系列,需要的同学了解一下: JAVA写文本编辑器(二) JAVA写文本编辑器(一) 下面我们要实现的是一个点击选择文本格式的窗口,这里同样是要画一个窗口,跟(二)差不多.要实现的功能呢,主要是有几个ComboBox弹出list出来,选中的属性改变下面的文本.最下面两个按钮,确定则主窗口文本改变,取消则不改变. 在这里我建议大家可以先重新开一个工程,然后一步一步的测试完成后,将代码拷回来,把mai
教你用JAVA写文本编辑器(二)

目录这是编辑器第一章 JAVA写文本编辑器(一) ,需要的同学了解一下. 这一章我们来处理一下JMenuBar里的item的事件响应,首先从最简单的item关于开始. 为什么说这个简单,因为它需要完成的功能很少,只是出来一个对话框或者窗口,然后显示一个文字. 首先,我们按照执行软件的顺序来写代码,我们点击menu,会弹出里面的子项item.然后当我们点击item的时候,会弹出新的窗口.注意:弹出item是menu自己做好的,但是当我们点击item是没有响应的,因为这里需要我们给他设置监听器来执
教你用JAVA写文本编辑器(一)

目录前言思路分析: 具体实现总结前言这里用swing ,awt写的. 我们大概要做成一个电脑的记事本那样的一个编辑器.可以调整字体,字号,颜色.能够打开.保存文件,新建窗口,点击退出,还有一个关于介绍的窗口.整体看起来功能不是很多,只要一部分一部分的去完成就很好办了. 思路分析: 一.首先我们的目标模型就是电脑的记事本,打开编辑器可以看到结构: 1.标题显示在窗口的title. 2.下面一行是一个工具栏,里面有文件.编辑.格式.查看.帮助.这里我们就选文件.格式.帮助来做,大致的情况都

自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

相关推荐

随机推荐