182 lines
9.3 KiB
JavaScript
182 lines
9.3 KiB
JavaScript
|
Control.TextArea.BBCode = Class.create();
|
||
|
|
Object.extend(Control.TextArea.BBCode.prototype,{
|
||
|
|
textarea: false,
|
||
|
|
tooltip: false,
|
||
|
|
toolbar: false,
|
||
|
|
emotions: false,
|
||
|
|
wrapper: false,
|
||
|
|
controllers: false,
|
||
|
|
initialize: function(textarea){
|
||
|
|
this.textarea = new Control.TextArea(textarea);
|
||
|
|
this._initLayout();
|
||
|
|
this._initEmotions();
|
||
|
|
this._initToolbar();
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function() {
|
||
|
|
this.wrapper.parentNode.appendChild(this.textarea.element.remove());
|
||
|
|
this.wrapper.hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function() {
|
||
|
|
this.controllers.appendChild(this.textarea.element.remove());
|
||
|
|
this.wrapper.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
_initLayout: function() {
|
||
|
|
this.wrapper = $(document.createElement('div'));
|
||
|
|
this.wrapper.id = "editor_wrapper";
|
||
|
|
this.wrapper.className = "clearfix";
|
||
|
|
this.textarea.element.parentNode.insertBefore(this.wrapper, this.textarea.element);
|
||
|
|
|
||
|
|
this.emotions = $(document.createElement('div'));
|
||
|
|
this.emotions.id = "bbcode_emotions";
|
||
|
|
this.emotions.innerHTML = "<h5>表情图标</h5>";
|
||
|
|
this.wrapper.appendChild(this.emotions);
|
||
|
|
|
||
|
|
this.controllers = $(document.createElement('div'));
|
||
|
|
this.controllers.id = "bbcode_controllers";
|
||
|
|
this.wrapper.appendChild(this.controllers);
|
||
|
|
|
||
|
|
this.toolbar = $(document.createElement('div'));
|
||
|
|
this.toolbar.id = "bbcode_toolbar";
|
||
|
|
this.controllers.appendChild(this.toolbar);
|
||
|
|
|
||
|
|
this.tooltip = $(document.createElement('div'));
|
||
|
|
this.tooltip.id = "bbcode_tooltip";
|
||
|
|
this.tooltip.innerHTML = "提示：选择您需要装饰的文字, 按上列按钮即可添加上相应的标签";
|
||
|
|
this.controllers.appendChild(this.tooltip);
|
||
|
|
|
||
|
|
this.controllers.appendChild(this.textarea.element.remove());
|
||
|
|
},
|
||
|
|
|
||
|
|
_initEmotions: function() {
|
||
|
|
this._addEmotion("biggrin", function() {this.insertAfterSelection(" :D ");});
|
||
|
|
this._addEmotion("smile", function() {this.insertAfterSelection(" :) ");});
|
||
|
|
this._addEmotion("sad", function() {this.insertAfterSelection(" :( ");});
|
||
|
|
this._addEmotion("surprised", function() {this.insertAfterSelection(" :o ");});
|
||
|
|
|
||
|
|
this._addEmotion("eek", function() {this.insertAfterSelection(" :shock: ");});
|
||
|
|
this._addEmotion("confused", function() {this.insertAfterSelection(" :? ");});
|
||
|
|
this._addEmotion("cool", function() {this.insertAfterSelection(" 8) ");});
|
||
|
|
this._addEmotion("lol", function() {this.insertAfterSelection(" :lol: ");});
|
||
|
|
|
||
|
|
this._addEmotion("mad", function() {this.insertAfterSelection(" :x ");});
|
||
|
|
this._addEmotion("razz", function() {this.insertAfterSelection(" :P ");});
|
||
|
|
this._addEmotion("redface", function() {this.insertAfterSelection(" :oops: ");});
|
||
|
|
this._addEmotion("cry", function() {this.insertAfterSelection(" :cry: ");});
|
||
|
|
|
||
|
|
this._addEmotion("evil", function() {this.insertAfterSelection(" :evil: ");});
|
||
|
|
this._addEmotion("twisted", function() {this.insertAfterSelection(" :twisted: ");});
|
||
|
|
this._addEmotion("rolleyes", function() {this.insertAfterSelection(" :roll: ");});
|
||
|
|
this._addEmotion("wink", function() {this.insertAfterSelection(" :wink: ");});
|
||
|
|
|
||
|
|
this._addEmotion("exclaim", function() {this.insertAfterSelection(" :!: ");});
|
||
|
|
this._addEmotion("question", function() {this.insertAfterSelection(" :?: ");});
|
||
|
|
this._addEmotion("idea", function() {this.insertAfterSelection(" :idea: ");});
|
||
|
|
this._addEmotion("arrow", function() {this.insertAfterSelection(" :arrow: ");});
|
||
|
|
},
|
||
|
|
|
||
|
|
_addEmotion: function(icon, callback) {
|
||
|
|
var img = $(document.createElement('img'));
|
||
|
|
img.src = "http://www.iteye.com/images/smiles/icon_" + icon + ".gif";
|
||
|
|
img.observe('click',callback.bindAsEventListener(this.textarea));
|
||
|
|
this.emotions.appendChild(img);
|
||
|
|
},
|
||
|
|
|
||
|
|
_initToolbar: function() {
|
||
|
|
this._addButton("B", function(){this.wrapSelection('[b]','[/b]');}, function(){this.innerHTML='粗体: [b]文字[/b] (alt+b)';}, {id: 'button_bold'});
|
||
|
|
this._addButton("I", function(){this.wrapSelection('[i]','[/i]');}, function(){this.innerHTML='斜体: [i]文字[/i] (alt+i)';}, {id: 'button_italic'});
|
||
|
|
this._addButton("U", function(){this.wrapSelection('[u]','[/u]');}, function(){this.innerHTML='下划线: [u]文字[/u] (alt+u)';}, {id: 'button_underline'});
|
||
|
|
this._addButton("Quote", function(){this.wrapSelection('[quote]','[/quote]');}, function(){this.innerHTML='引用文字: [quote]文字[/quote] 或者 [quote="iteye"]文字[/quote] (alt+q)';});
|
||
|
|
this._addButton("Code", function(){this.wrapSelection('[code="java"]','[/code]');}, function(){this.innerHTML='代码: [code="ruby"]...[/code] (支持java, ruby, js, xml, html, php, python, c, c++, c#, sql)';});
|
||
|
|
this._addButton("List", function(){this.insertBeforeEachSelectedLine('[*]','[list]\n','\n[/list]')}, function(){this.innerHTML='列表: [list] [*]文字 [*]文字 [/list] 或者 顺序列表: [list=1] [*]文字 [*]文字 [/list]';});
|
||
|
|
this._addButton("Img", function(){this.wrapSelection('[img]','[/img]');}, function(){this.innerHTML='插入图像: [img]http://image_url[/img] (alt+p)';});
|
||
|
|
this._addButton("URL", function(){this.wrapSelection('[url]','[/url]');}, function(){this.innerHTML='插入URL: [url]http://url[/url] 或 [url=http://url]URL文字[/url] (alt+w)';});
|
||
|
|
this._addButton("Flash", function(){this.wrapSelection('[flash=200,200]','[/flash]');}, function(){this.innerHTML='插入Flash: [flash=宽,高]http://your_flash.swf[/flash]';});
|
||
|
|
this._addButton("Table", function(){this.injectEachSelectedLine(function(lines,line){lines.push("|" + line + "|");return lines;}, '[table]\n','\n[/table]');}, function(){this.innerHTML='插入表格: [table]用换行和|来编辑格子[/table]';});
|
||
|
|
|
||
|
|
//selects
|
||
|
|
var color_select = [
|
||
|
|
"<br />字体颜色: ",
|
||
|
|
"<select id='select_color'>",
|
||
|
|
"<option value='black' style='color: black;'>标准</option>",
|
||
|
|
"<option value='darkred' style='color: darkred;'>深红</option>",
|
||
|
|
"<option value='red' style='color: red;'>红色</option>",
|
||
|
|
"<option value='orange' style='color: orange;'>橙色</option>",
|
||
|
|
"<option value='brown' style='color: brown;'>棕色</option>",
|
||
|
|
"<option value='yellow' style='color: yellow;'>黄色</option>",
|
||
|
|
"<option value='green' style='color: green;'>绿色</option>",
|
||
|
|
"<option value='olive' style='color: olive;'>橄榄</option>",
|
||
|
|
"<option value='cyan' style='color: cyan;'>青色</option>",
|
||
|
|
"<option value='blue' style='color: blue;'>蓝色</option>",
|
||
|
|
"<option value='darkblue' style='color: darkblue;'>深蓝</option>",
|
||
|
|
"<option value='indigo' style='color: indigo;'>靛蓝</option>",
|
||
|
|
"<option value='violet' style='color: violet;'>紫色</option>",
|
||
|
|
"<option value='gray' style='color: gray;'>灰色</option>",
|
||
|
|
"<option value='white' style='color: white;'>白色</option>",
|
||
|
|
"<option value='black' style='color: black;'>黑色</option>",
|
||
|
|
"</select>"
|
||
|
|
];
|
||
|
|
this.toolbar.insert(color_select.join(""));
|
||
|
|
$('select_color').observe('change',this._change_color.bindAsEventListener(this.textarea));
|
||
|
|
$('select_color').observe('mouseover', function() {$("bbcode_tooltip").innerHTML = "字体颜色: [color=red]文字[/color] 提示：您可以使用 color=#FF0000";});
|
||
|
|
|
||
|
|
var font_select = [
|
||
|
|
" 字体大小: ",
|
||
|
|
"<select id='select_font'>",
|
||
|
|
"<option value='0'>标准</option>",
|
||
|
|
"<option value='xx-small'>1 (xx-small)</option>",
|
||
|
|
"<option value='x-small'>2 (x-small)</option>",
|
||
|
|
"<option value='small'>3 (small)</option>",
|
||
|
|
"<option value='medium'>4 (medium)</option>",
|
||
|
|
"<option value='large'>5 (large)</option>",
|
||
|
|
"<option value='x-large'>6 (x-large)</option>",
|
||
|
|
"<option value='xx-large'>7 (xx-large)</option>",
|
||
|
|
"</select>"
|
||
|
|
];
|
||
|
|
this.toolbar.insert(font_select.join(""));
|
||
|
|
$('select_font').observe('change',this._change_font.bindAsEventListener(this.textarea));
|
||
|
|
$('select_font').observe('mouseover', function() {$("bbcode_tooltip").innerHTML = "字体大小: [size=x-small]小字体文字[/size]";});
|
||
|
|
|
||
|
|
var align_select = [
|
||
|
|
" 对齐: ",
|
||
|
|
"<select id='select_align'>",
|
||
|
|
"<option value='0'>标准</option>",
|
||
|
|
"<option value='left'>居左</option>",
|
||
|
|
"<option value='center'>居中</option>",
|
||
|
|
"<option value='right'>居右</option>",
|
||
|
|
"</select>"
|
||
|
|
]
|
||
|
|
|
||
|
|
this.toolbar.insert(align_select.join(""));
|
||
|
|
$('select_align').observe('change',this._change_align.bindAsEventListener(this.textarea));
|
||
|
|
$('select_align').observe('mouseover', function() {$("bbcode_tooltip").innerHTML = "对齐: [align=center]文字[/align]";});
|
||
|
|
},
|
||
|
|
|
||
|
|
_addButton: function(value, callback, tooltip, attrs){
|
||
|
|
var input = $(document.createElement('input'));
|
||
|
|
input.type = "button";
|
||
|
|
input.value = value;
|
||
|
|
input.observe('click',callback.bindAsEventListener(this.textarea));
|
||
|
|
input.observe('mouseover', tooltip.bindAsEventListener(this.tooltip));
|
||
|
|
Object.extend(input,attrs || {});
|
||
|
|
this.toolbar.appendChild(input);
|
||
|
|
},
|
||
|
|
|
||
|
|
_change_color: function(){
|
||
|
|
this.wrapSelection('[color=' + $F('select_color') + ']','[/color]');
|
||
|
|
$('select_color').selectedIndex = 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
_change_font: function(){
|
||
|
|
this.wrapSelection('[size=' + $F('select_font') + ']','[/size]');
|
||
|
|
$('select_font').selectedIndex = 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
_change_align: function() {
|
||
|
|
this.wrapSelection('[align=' + $F('select_align') + ']', '[/align]');
|
||
|
|
$('select_align').selectedIndex = 0;
|
||
|
|
}
|
||
|
|
});
|