📄 ftb-freetextbox.js
字号:
/* main FTB object
-------------------------------------- */
function FTB_FreeTextBox(id, enableToolbars, readOnly, buttons, dropdownlists, breakMode, pasteMode, tabMode, startMode, clientSideTextChanged, designModeCss, baseUrl, buttonImageFormat, imageGalleryUrl, imageGalleryPath, receiveFocus, buttonWidth, buttonHeight, popupCss, emoticons) {
this.debug = document.getElementById('debug');
// 1. Setup variables
this.id = id;
this.enableToolbars = enableToolbars;
this.readOnly = readOnly;
this.buttons = buttons;
this.dropdownlists = dropdownlists;
this.breakMode = breakMode;
this.pasteMode = pasteMode;
this.tabMode = tabMode;
this.clientSideTextChanged = clientSideTextChanged; this.designModeCss = designModeCss;
this.popupCss = popupCss;
this.emoticons = emoticons;
this.baseUrl = baseUrl;
this.buttonImageFormat = buttonImageFormat; // currently unused
this.imageGalleryUrl = imageGalleryUrl;
this.imageGalleryPath = imageGalleryPath;
this.hasFocus = false;
this.mode = FTB_MODE_DESIGN;
this.initialized = false;
this.undoArray = new Array();
this.undoArrayMax = 16;
this.undoArrayPos = -1;
var ftb = this;
// 2. Find everything
//* windows
this.htmlEditor = document.getElementById(id);
this.popup = document.getElementById(id + "_Popup");
if (FTB_Browser.isIE) {
this.previewPane = eval(id + "_previewPane");
this.designEditor = eval(id + "_designEditor");
this.designEditor.ftb = this;
this.designEditor.document.ftb = this;
document.getElementById(id + "_designEditor").document.ftb = this;
this.iPopup = eval(id + "_Popup");
} else {
this.previewPane = document.getElementById(id + "_previewPane").contentWindow;
this.iPopup = document.getElementById(id + "_Popup").contentWindow;
this.designEditor = document.getElementById(id + "_designEditor").contentWindow;
this.designEditor.document.ftb = this;
}
//* areas
this.toolbarArea = document.getElementById(this.id + "_toolbarArea");
this.designEditorArea = document.getElementById(this.id + "_designEditorArea");
this.htmlEditorArea = document.getElementById(this.id + "_htmlEditorArea");
this.previewPaneArea = document.getElementById(this.id + "_previewPaneArea");
//* tabs
this.designModeTab = document.getElementById(this.id + "_designModeTab");
if (this.designModeTab) {
this.designModeTab.ftb = this;
this.designModeTab.onclick = function() { this.ftb.GoToDesignMode(); this.ftb.Focus(); this.ftb.UpdateToolbars(); }
}
this.htmlModeTab = document.getElementById(this.id + "_htmlModeTab");
if (this.htmlModeTab) {
this.htmlModeTab.ftb = this;
this.htmlModeTab.onclick = function() { this.ftb.GoToHtmlMode(); this.ftb.Focus(); this.ftb.UpdateToolbars();}
}
this.previewModeTab = document.getElementById(this.id + "_previewModeTab");
if (this.previewModeTab) {
this.previewModeTab.ftb = this;
this.previewModeTab.onclick = function() { this.ftb.GoToPreviewMode();}
}
//* ancestor area
this.ancestorArea = document.getElementById(this.id + "_AncestorArea");
// 3. Tell buttons who owns them
//* setup buttons & dropdowns
if (this.enableToolbars) {
for(var i=0; i<this.buttons.length; i++) {
button = buttons[i];
button.ftb = this;
}
for(var i=0; i<this.dropdownlists.length; i++) {
dropdownlist = dropdownlists[i];
dropdownlist.ftb = this;
}
}
// 4. Setup editor for use
if (!this.readOnly) {
this.designEditor.document.designMode = 'On';
if (FTB_Browser.isGecko) this.designEditor.document.contentEditable = true;
// strangely this must happen here and at no other spot!
if (FTB_Browser.isGecko)
this.designEditor.document.execCommand("useCSS", false, true);
}
this.designEditor.document.open();
this.designEditor.document.write("<html><head>" + ((this.designModeCss != '') ? "<link rel='stylesheet' href='" + this.designModeCss + "' type='text/css' />" : "") + ((this.baseUrl != '') ? "<base href='" + this.baseUrl + "' />" : "") + "</head><body>" + this.htmlEditor.value + "</body></html>");
this.designEditor.document.close();
this.iPopup.document.location.href = "../emoticons.aspx";
if (!this.readOnly) {
if (FTB_Browser.isIE) this.designEditor.document.body.contentEditable = 'True';
// enable this html area
this.htmlEditor.disabled = '';
}
// silly IE can't get the style right until now...
if (FTB_Browser.isIE) {
this.designEditor.document.body.style.border = '0';
//if (designModeCss != '')
// this.designEditor.document.createStyleSheet(designModeCss);
}
// 5. Add events
//* toolbar updates
if (!this.readOnly) {
if (FTB_Browser.isIE) {
FTB_AddEvents(this.designEditor.document,
new Array("keydown","click"),
function(e) { ftb.hasFocus=true; ftb.Event(e); ftb.PopupHide();}
);
FTB_AddEvents(this.designEditor.document.body,
new Array("paste"),
function(e) { return this.document.ftb.CapturePaste(e); }
);
} else {
var evt = function(e) {
this.document.ftb.PopupHide();
this.document.ftb.hasFocus=true;
return this.document.ftb.Event(e);
}
this.designEditor.addEventListener("keydown", evt, true);
this.designEditor.addEventListener("mousedown", evt, true);
this.designEditor.addEventListener("click", evt, true);
// no paste event in Mozilla
}
FTB_AddEvents(this.designEditor,
new Array("blur"),
function(e) { ftb.hasFocus=false; ftb.Event(e); return ftb.StoreHtml(); }
);
}
if (startMode == FTB_MODE_HTML)
this.GoToHtmlMode();
if (this.readOnly)
this.DisableAllToolbarItems();
else
this.UpdateToolbars();
//this.undoArray[0] = this.htmlEditorArea.value;
this.initialized = true;
if (receiveFocus) this.Focus();
}
FTB_FreeTextBox.prototype.PopupHide = function()
{
this.popup.style.zIndex=-1
this.popup.style.visibility = "hidden"
this.iPopup.document.onkeydown=this.iPopup.document.onmouseover=this.iPopup.document.onclick = null;
this.designEditor.focus()
}
FTB_FreeTextBox.prototype.SetEmoticons = function() {
}
FTB_FreeTextBox.prototype.AddStyle = function(css) {
var styleEl=document.createElement('style');
styleEl.type='text/css';
styleEl.appendChild(css);
this.designEditor.document.appendChild(styleEl);
}
FTB_FreeTextBox.prototype.Event = function(ev) {
if (ev != null) {
sel = this.GetSelection();
r = this.CreateRange(sel);
if (FTB_Browser.isIE) {
// break mode code
// check for undo && redo
if (ev.ctrlKey && ev.keyCode == FTB_KEY_Z) {
this.Undo();
this.CancelEvent(ev);
} else if (ev.ctrlKey && ev.keyCode == FTB_KEY_Y) {
this.Redo();
this.CancelEvent(ev);
} else {
if (ev.keyCode == FTB_KEY_ENTER) {
if (this.breakMode == FTB_BREAK_BR || ev.ctrlKey) {
if (sel.type == 'Control') {
return;
}
if ((!this.CheckTag(r.parentElement(),'LI'))&&(!this.CheckTag(r.parentElement(),'H'))) {
r.pasteHTML('<br>');
this.CancelEvent(ev);
r.select();
r.collapse(false);
return false;
}
}
} else if (ev.keyCode == FTB_KEY_TAB) {
if (this.CheckTag(r.parentElement(),'LI')) {
if (ev.shiftKey)
this.ExecuteCommand("outdent");
else
this.ExecuteCommand("indent");
this.CancelEvent(ev);
} else {
switch (this.tabMode) {
default:
case FTB_TAB_NEXTCONTROL:
break;
case FTB_TAB_INSERTSPACES:
this.InsertHtml(" ");
this.CancelEvent(ev);
break;
case FTB_TAB_DISABLED:
this.CancelEvent(ev);
break;
}
}
}
}
} else {
// check for undo && redo
if (ev.ctrlKey && ev.which && ev.which == FTB_KEY_Z) {
this.Undo();
this.CancelEvent(ev);
} else if (ev.ctrlKey && ev.which && ev.which == FTB_KEY_Y) {
this.Redo();
this.CancelEvent(ev);
} else {
// if not undo or redo, then keep going
// check for control+commands (not in Mozilla by default)
if ((ev.ctrlKey && !ev.shiftKey && !ev.altKey)) {
if (ev.which == FTB_KEY_P) {
this.CapturePaste(ev);
this.CancelEvent(ev);
} else if (ev.which == FTB_KEY_B) {
this.ExecuteCommand('bold');
this.CancelEvent(ev);
} else if (ev.which == FTB_KEY_I) {
this.ExecuteCommand('italic');
this.CancelEvent(ev);
} else if (ev.which == FTB_KEY_I) {
this.ExecuteCommand('underline');
this.CancelEvent(ev);
}
} else if (ev.which == FTB_KEY_TAB) {
if (this.CheckTag(r.parentElement(),'LI')) {
// do it's own thing!
} else {
switch (this.tabMode) {
default:
case FTB_TAB_NEXTCONTROL:
// unsupported in Mozilla
break;
case FTB_TAB_INSERTSPACES:
// do it's own thing
break;
case FTB_TAB_DISABLED:
this.CancelEvent(ev);
break;
}
}
}
}
}
}
if (this.mode == FTB_MODE_DESIGN) {
FTB_Timeout.addMethod(this.id+'_UpdateToolbars',this,'UpdateToolbars',200);
}
if (this.clientSideTextChanged)
this.clientSideTextChanged(this);
}
FTB_FreeTextBox.prototype.CancelEvent = function(ev) {
if (FTB_Browser.isIE) {
ev.cancelBubble = true;
ev.returnValue = false;
} else {
ev.preventDefault();
ev.stopPropagation();
}
}
/*
FTB_FreeTextBox.prototype.RecordUndoStep = function() {
while (this.undoArrayPos > this.undoArray.length)
this.undoArray.pop();
this.undoArray.push(this.designEditor.document.body.innerHTML);
if (this.undoArray.length > this.undoArrayMax)
this.undoArray.shift();
else
this.undoArrayPos++;
}
*/
FTB_FreeTextBox.prototype.RecordUndoStep = function() {
++this.undoArrayPos;
if (this.undoArrayPos >= this.undoArrayMax) {
// remove the first element
this.undoArray.shift();
--this.undoArrayPos;
}
// use the fasted method (getInnerHTML);
var take = true;
var html = "";
if (this.designEditor.document.body)
{
html = this.designEditor.document.body.innerHTML;
}
if (this.undoArrayPos > 0)
take = (this.undoArray[this.undoArrayPos - 1] != html);
if (take) {
this.undoArray[this.undoArrayPos] = html;
} else {
this.undoArrayPos--;
}
}
FTB_FreeTextBox.prototype.Undo = function() {
if (this.undoArrayPos > 0) {
var html = this.undoArray[--this.undoArrayPos];
if (html)
this.designEditor.document.body.innerHTML = html;
else
++this.undoArrayPos;
}
}
FTB_FreeTextBox.prototype.CanUndo = function() {
return true;
return (this.undoArrayPos > 0);
}
FTB_FreeTextBox.prototype.Redo = function() {
if (this.undoArrayPos < this.undoArray.length - 1) {
var html = this.undoArray[++this.undoArrayPos];
if (html)
this.designEditor.document.body.innerHTML = html;
else
--this.undoArrayPos;
}
}
FTB_FreeTextBox.prototype.CanRedo = function() {
return true;
return (this.undoArrayPos < this.undoArray.length - 1);
}
FTB_FreeTextBox.prototype.CapturePaste = function(ev) {
return true;
switch (this.pasteMode) {
case FTB_PASTE_DISABLED:
return false;
case FTB_PASTE_TEXT:
var text = window.clipboardData.getData('Text');
text = text.replace(/<[^>]*>/gi,'');
this.InsertHtml(text);
return false;
default:
case FTB_PASTE_DEFAULT:
// do nothing
return true;
}
}
FTB_FreeTextBox.prototype.Debug = function(text) {
if (this.debug)
this.debug.value += text + '\r';
}
FTB_FreeTextBox.prototype.UpdateToolbars = function() {
if (this.hasFocus) {
if (this.mode == FTB_MODE_DESIGN) {
if (this.enableToolbars) {
for (var i=0; i<this.buttons.length; i++) {
button = this.buttons[i];
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -