|
var edseed = 0;
var EditorId = 0;
var enableas = 0;
function RichEditor()
{
//////////////////////////////// 配置区域 ///////////////////////////////
this.ifirameWidth = 300; // 视图模式宽
this.iframeHeight = 300; // 视图模式高
this.sourceCols = 30; //源码模式列宽
this.sourceRows = 20; //源码模式列高
this.maxHis = 5; //最大历史记录
this.backgroundColor = '#cccccc'; //视图模式背景色
this.infoElements = new Object(); //全局简介拥有元素
this.infoElements.source = ['source:源码','name:姓名','address:地址','happy:开心','playboy:兔子']; //第一项简介标签列表
this.infoElements.source.lab = '文档说明'; //第一项简介标签提示
this.infoElements.doc = ['testitem','testitem2','kill','help']; //第二项简介标签列表
this.infoElements.doc.lab = "文档属性"; //第二项简介标签提示
this.itemElements = ['author','addtime','itemitem','childitem'];//子Item拥有元素
this.itemTypeElements = ['author:作者','source:来源','addtime'];//Item所属类型
///////////////////////////// 配置区域结束 ////////////////////////////
this.iframeDoc = "";
this.iframeWin = "";
this.model = 'w';//default=m; [w = wysiwyg;s = source]
this.infoId = 'item_ps';//简介层
this.histories = [];
//初始化.建立iframe,设置全局变量跟该iframe关联
this.init = function(docId,text)
{
var id = this.add(docId,text);
this.setActive(id);
//追加显示 info
this.showInfo();
}
//设置全局变量跟指定iframe关联
this.setActive = function(id)
{
EditorOnFocus(id);
this.iframeDoc = document.getElementById('editor_' + id).contentWindow.document;
this.iframeWin = document.getElementById('editor_' + id).contentWindow;
}
//建立新的iframe 并维护全局标识种子
this.add = function(appendTo,text)
{
var seed = this.getSeed();
var editorId = 'editor_' + seed;
var outer = Util.aE('div','outer_' + seed,appendTo);
this.setC(outer,'outer clearfix');
var itemType = Util.aE('div','item_type_' + seed,outer);
this.setC(itemType,'itemType');
for(var i=0;i<this.itemTypeElements.length;i++)
{
var el = this.itemTypeElements[i];
var lab = el.split(':');
var _item = Util.aE('input:radio:type_' + seed,'type_' + lab[0] + '_' + seed,itemType,lab[1] || lab[0]);
_item.setAttribute('value',lab[0]);
_item.onfocus = function()
{
setEditorActive(seed);
}
_item.onclick = function()
{
var el = this;
Util.gE('item_type_dp_' + EditorId).innerHTML = el.value;
}
Util.aE('br',null,itemType);
}
var itemTypeDp = Util.aE('span','item_type_dp_' + seed,outer);
var iframe = Util.aE('iframe',editorId,outer);
this.setC(iframe,'textbox');
var sourceId = 'source_' + seed;
var source = Util.aE('textarea',sourceId,outer);
source.style.display = 'none';
source.setAttribute('rows',this.sourceRows);
source.setAttribute('cols',this.sourceCols);
if(Util.isIE()){
source.onfocus = function() {setEditorActive(seed);}
}else{//fix firefox
//nothing todo
}
var item = Util.aE('div','item_outer_' + seed,outer);
this.setC(item,'item');
for(var i=0;i<this.itemElements.length;i++)
{
var el = this.itemElements[i];
var lab = el.split(':');
var _item = Util.aE('input','item_' + lab[0] + '_' + seed,item,lab[1] || lab[0]);
_item.onfocus = function()
{
setEditorActive(seed);
}
Util.aE('br',null,item);
}
iframe.contentWindow.document.designMode="On";
iframe.contentWindow.document.contentEditable = true;
iframe.contentWindow.document.designMode = "On";
iframe.contentWindow.document.open();
iframe.setAttribute('width',this.iframeWidth);
iframe.setAttribute('height',this.iframeHeight);
iframe.contentWindow.document.writeln('+ this.backgroundColor + '">' + (text || '') + '
');
iframe.contentWindow.document.close();
iframe.onfocus = function()
{
setEditorActive(seed);
}
this.setSeed(seed);
return seed;
}
this.getAllContent = function()
{
var content = "";
var fs = document.getElementByTagName('div');
}
this.debug = function(val)
{
for(var p in val)
alert(p + '-->' + val[p]);
}
//此方法不维护全局标识符.
this.showInfo = function()
{
if(!Util.gE('infouter_' + this.getEditorId())){
for(var p in this.infoElements)
{
var infoout = Util.aE('div','info_uter_' + this.getEditorId(),this.infoId);
this.setC(infoout,'info');
var info = Util.aE('div','infouter_' + p + '_' + this.getEditorId(),infoout,this.infoElements[p].lab);
info.setAttribute('type',p);
for(var j=0;j<this.infoElements[p].length;j++)
{
var el = this.infoElements[p][j];
var lab = el.split(':');
Util.aE('input','info_' + lab[0] + '_' + this.getEditorId(),info,lab[1] || lab[0]);
Util.aE('br','',info);
}
}
}else{
Util.gE('infouter_' + this.getEditorId()).style.display = '';
}
}
this.remove = function(id)
{
var el = Util.gE('outer_' + this.getEditorId());
return el.parentNode.removeChild(el);
}
//设置编辑框内容
this.setContent = function(text,filter)
{
if(filter) text = this.filterHTML(text);
if(this.model == 'w')
{
this.iframeDoc.body.innerHTML = text;
}else{
Util.gE('source_' + this.getEditorId()).value = text;
}
}
this.showS = function()
{
if(this.model == 's') return;
var content = this.iframeDoc.body.innerHTML;
Util.gE('source_' + this.getEditorId()).value = content;
Util.gE('source_' + this.getEditorId()).style.display = '';
Util.gE('editor_' + this.getEditorId()).style.display = 'none';
this.model = 's';
this.histories = 0;
}
this.showW = function()
{
if(this.model == 'w') return;
var content = Util.gE('source_' + this.getEditorId()).value;
this.iframeDoc.body.innerHTML = content;
Util.gE('source_' + this.getEditorId()).style.display = 'none';
Util.gE('editor_' + this.getEditorId()).style.display = '';
this.model = 'w';
}
/////////////////////////////////////////////// 功能按钮定义区 ///////////////////////////////
this.blob = function()
{
if(this.model=='w')
{
var s = Util.gFR('editor_' + this.getEditorId());
s = '' + s + '';
Util.sFR('editor_' + this.getEditorId(),s);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'','');
}
}
this.link = function()
{
var url = prompt('请输入URL地址,以HTTP://开头','http://');
if(url !=null){
if(this.model=='w')
{
this.iframeDoc.execCommand('CreateLink',false,url);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'+ url + '">','');
}
}
}
this.unlink = function()
{
if(this.model=='w')
{
this.iframeDoc.execCommand('Unlink',false,null);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
s = s.replace(/<a.*?>(.*?)<\/a>/ig,'$$1');
Util.sR('source_' + this.getEditorId(),s);
}
}
this.img = function()
{
var url = prompt('请输入图片地址','http://');
if(url !=null){
if(this.model=='w')
{
this.iframeDoc.execCommand("InsertImage", false, url);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),' + url + '"/>','');
}
}
}
this.heading = function(size)
{
if(this.model=='w')
{
var s = Util.gFR('editor_' + this.getEditorId());
s = ' + size + '>' + s + ' + size + '>';
Util.sFR('editor_' + this.getEditorId(),s);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),' + size + '>',' + size + '>');
}
}
this.ol = function()
{
if(this.model =='w')
{
this.iframeDoc.execCommand("InsertOrderedList", false, null);;
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'- '
,'');
}
}
this.ul = function()
{
if(this.model == 'w')
{
this.iframeDoc.execCommand("InsertUnorderedList", false, null);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'- '
,'');
}
}
this.notice = function()
{
if(this.model=='w')
{
var s = Util.gFR('editor_' + this.getEditorId());
s = '' + s + '';
Util.sFR('editor_' + this.getEditorId(),s);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'','');
}
}
this.warn = function()
{
if(this.model=='w')
{
var s = Util.gFR('editor_' + this.getEditorId());
s = '' + s + '';
Util.sFR('editor_' + this.getEditorId(),s);
}else{
var s = Util.gR('source_' + this.getEditorId());
this.saveH(s);
Util.aT('source_' + this.getEditorId(),'','');
}
}
this.undo = function()
{
if(this.model=='w')
{
this.iframeDoc.execCommand("Undo", false, null);
}else{
Util.gE('source_' + this.getEditorId()).value = this.getH();
}
}
//多媒体信息会造成浏览预读.所以会出现假死状态
this.flash = function()
{
var url = prompt('请输入FLASH地址','http://');
if(url !=null){
var s = ' url + '"/>';
if(this.model=='w')
{
Util.sFR('editor_' + this.getEditorId(),s);
}else{
Util.sR('source_' + this.getEditorId(),s);
}
}
}
this.clear = function()
{
if(this.model == 'w')
{
var s = Util.gFC('editor_' + this.getEditorId());
s = this.filterHTML(s);
this.iframeDoc.body.innerHTML = s;
}else{
var s = Util.gE('source_' + this.getEditorId()).value;
s = this.filterHTML(s);
Util.gE('source_' + this.getEditorId()).value = s;
}
}
this.save = function()
{
if(this.verifyData())
{
var s = this.getContent();
alert(s);
}
}
this.autoSave = function(time)
{
var editor = this;
enableas = Math.abs(enableas-1);
setInterval(function(){
if(enableas){
var s = editor.getContent();
alert(s);
}
},(time || 10)*1000);
}
////////////////////////////////////////////// 功能定义结束 //////////////////////////////////
this.verifyData = function()
{
var success = true;
var iframe = document.getElementsByTagName('iframe');
for(var i=0;i<iframe.length;i++)
{
//TODO
}
return success;
}
this.getContent = function()
{
var content = '';
var item = '';
var info = '';
var iframe = document.getElementsByTagName('iframe');
if(Util.gE(this.infoId).innerHTML !=null){
for(var p in this.infoElements)
{
info += '+ p + '">';//no type
for(var i=0;i<this.infoElements[p].length;i++)
{
var el = this.infoElements[p][i];
var lab = el.split(':');
var id = 'info_' + lab[0] + '_0';
info += '+ lab[0] + '"> + (Util.gE(id).value || '') + ']]>
';
}
info += '';
}
}
for(var i=0;i<iframe.length;i++)
{
item += '- '
;
item += '+ Util.gE('item_type_dp_' + i).innerHTML + '">';
for(var j=0;j<this.itemElements.length;j++)
{
var el = this.itemElements[j];
var lab = el.split(':');
var id = 'item_' + lab[0] + '_' + i;
item += '+ lab[0] + '"> + (Util.gE(id).value || '') + ']]>';
}
item += '';
if(Util.gE('editor_' + i).style.display != 'none')
{
item += ' + Util.gFC('editor_' + i) + ']]>';
}else{
item += ' + (Util.gE('source_' + i).value || '') + ']]>';
}
item += '';
}
content += info + item + '';
return content;
}
this.filterHTML = function(str)
{
str = str.replace(/<\/tr>/ig,'
');
str = str.replace(/<\/h\d>/ig,'
');
str = str.replace(/(<br\/>){2,}[\s]*/ig,'
');
str = str.replace(/<\/?(style|javascript)+>/gi, '');
str = str.replace(/<img([^>]*src[^>]*)\/?>/ig, '[img$1]');
str = str.replace(/<object(.*?)>([\s\S]*?)<\/object>/ig,'[object$1]$2[/object]');
str = str.replace(/<embed([^>]*)\/?>/ig, '[embed$1]');
str = str.replace(/<br.*?\/?>/ig, '[br/]');
str = str.replace(/<param([^>]*)\/?>/ig, '[param$1]');
str = str.replace(/<p.*?(\/)?>/ig, '[p$1]');
str = str.replace(/<\/p>/ig, '[/p]');
str = str.replace(/<\/?[^>]+>/gi, '');
str = str.replace(/\[img([^>]*?)\]/ig,'');
str = str.replace(/\[object(.*?)]([\s\S]*?)\[\/object\]/ig,'$2');
str = str.replace(/\[embed([^>]*?)\]/ig,'');
str = str.replace(/\[br\/]/ig,'
');
str = str.replace(/\[p(.*?)\]/ig,'');
str = str.replace(/\[\/p(.*?)\]/ig,'');
return str;
}
this.setC = function(el,name)
{
el.className = name;
}
this.saveH= function (code)
{
if(this.histories.length > this.maxHis)
{
this.histories.shift();
}
this.histories.push(code);
}
this.getH = function ()
{
return this.histories.pop() || '';
}
//设置指定iframe为激活状态
this.setFocus = function ()
{
this.iframeWin.focus();
}
this.getSeed = function()
{
return edseed;
}
this.setSeed = function(id)
{
edseed = ++id;
}
this.getEditorId = function()
{
return EditorId;
}
}
function EditorOnFocus(id)
{
EditorId = id;
}
function setEditorActive(id)
{
Editor.setActive(id);
} |
