Login

Julian · 02.12.2008, 22:27

Hey LEute,
ich habe eben 2 MyCodes eingebaut:
Ein Spoilercode
ein Headercode

jetzt besteht mein Problem darin das aber nur ein MyCode angezeigt wird, Die Bilder der buttons hab ich schon festegelegt, bei der Datei editor.js habb ich folgendes eingefügt:

Code:
	this.createToolbar('BBCodes', {
			container: 'bottom',
			alignment: 'right',
			items: [
			    {type: 'button', name: 'mycode', sprite: 'header', insert: 'header', title: this.options.lang.title_header},
				{type: 'button', name: 'mycode', sprite: 'spoiler', insert: 'spoiler', title: this.options.lang.title_spoiler}
			]
		});

die ganze datei lautet so:

Code:
var messageEditor = Class.create();

messageEditor.prototype = {
	openTags: new Array(),
	toolbarHeight: 0,
	currentTheme: '',
	themePath: '',
	openDropDownMenu: null,

	setTheme: function(theme)
	{
		if(this.currentTheme != '' || $('editorTheme')) {
			$('editorTheme').remove();
		}

		var stylesheet = document.createElement('link');
		stylesheet.setAttribute('rel', 'stylesheet');
		stylesheet.setAttribute('type', 'text/css');
		stylesheet.setAttribute('href', this.baseURL + 'editor_themes/'+theme+'/stylesheet.css');
		document.getElementsByTagName('head')[0].appendChild(stylesheet);
		this.currentTheme = theme;
		this.themePath = this.baseURL + 'editor_themes/'+theme;
	},

	initialize: function(textarea, options)
	{
		// Sorry Konqueror, but due to a browser bug out of control with textarea values
		// you do not get to use the fancy editor.

		if(MyBB.browser == "konqueror" || (typeof(mybb_editor_disabled) != "undefined" && mybb_editor_disabled == true))
		{
			return false;
		}

		// Establish the base path to this javascript file
		$$('script').each(function(script) {
			if(script.src && script.src.indexOf('editor.js') != -1) {
				this.baseURL = script.src.replace(/editor\.js(.*?)$/, '');
			}
		}, this);

		this.options = options;

		if(this.options)
		{
			if(!this.options.lang)
			{
				return false;
			}

			if(!this.options.rtl)
			{
				this.options.rtl = 0;
			}
		}

		if(this.options && this.options.theme)
		{
			this.setTheme(this.options.theme);
		}
		else
		{
			this.setTheme('default');
		}

		// Defines an array of fonts to be shown in the font drop down.
		this.fonts = new Object();
		this.fonts["Arial"] = "Arial";
		this.fonts["Courier"] = "Courier";
		this.fonts["Impact"] = "Impact";
		this.fonts["Tahoma"] = "Tahoma";
		this.fonts["Times New Roman"] = "Times New Roman";
		this.fonts["Trebuchet MS"] = "Trebuchet MS";
		this.fonts["Verdana"] = "Verdana";

		// An array of font sizes to be shown.
		this.sizes = new Object();
		this.sizes["xx-small"] = this.options.lang.size_xx_small;
		this.sizes["x-small"] = this.options.lang.size_x_small;
		this.sizes["small"] = this.options.lang.size_small;
		this.sizes["medium"] = this.options.lang.size_medium;
		this.sizes["large"] = this.options.lang.size_large;
		this.sizes["x-large"] = this.options.lang.size_x_large;
		this.sizes["xx-large"] = this.options.lang.size_xx_large;

		// An array of colours to be shown.
		this.colors = new Object();
		this.colors[1] = "#800000";
		this.colors[2] = "#8B4513";
		this.colors[3] = "#006400";
		this.colors[4] = "#2F4F4F";
		this.colors[5] = "#000080";
		this.colors[6] = "#4B0082";
		this.colors[7] = "#800080";
		this.colors[8] = "#000000";
		this.colors[9] = "#FF0000";
		this.colors[10] = "#DAA520";
		this.colors[11] = "#6B8E23";
		this.colors[12] = "#708090";
		this.colors[13] = "#0000CD";
		this.colors[14] = "#483D8B";
		this.colors[15] = "#C71585";
		this.colors[16] = "#696969";
		this.colors[17] = "#FF4500";
		this.colors[18] = "#FFA500";
		this.colors[19] = "#808000";
		this.colors[20] = "#4682B4";
		this.colors[21] = "#1E90FF";
		this.colors[22] = "#9400D3";
		this.colors[23] = "#FF1493";
		this.colors[24] = "#A9A9A9";
		this.colors[25] = "#FF6347";
		this.colors[26] = "#FFD700";
		this.colors[27] = "#32CD32";
		this.colors[28] = "#87CEEB";
		this.colors[29] = "#00BFFF";
		this.colors[30] = "#9370DB";
		this.colors[31] = "#FF69B4";
		this.colors[32] = "#DCDCDC";
		this.colors[33] = "#FFDAB9";
		this.colors[34] = "#FFFFE0";
		this.colors[35] = "#98FB98";
		this.colors[36] = "#E0FFFF";
		this.colors[37] = "#87CEFA";
		this.colors[38] = "#E6E6FA";
		this.colors[39] = "#DDA0DD";
		this.colors[40] = "#FFFFFF";


		// Here we get the ID of the textarea we're replacing and store it.
		this.textarea = textarea;

		// Only swap it over once the page has loaded (add event)
		if(MyBB.page_loaded == 1)
		{
			this.showEditor();
		}
		else
		{
			Event.observe(document, "dom:loaded", this.showEditor.bindAsEventListener(this));
		}
	},

	showEditor: function()
	{
		// Assign the old textarea to a variable for later use.
		oldTextarea = $(this.textarea);

		// Now this.textarea becomes the new textarea ID
		this.textarea += "_new";

		// Begin the creation of our new editor.

		this.editor = document.createElement("div");
		this.editor.style.position = "relative";
		this.editor.style.display = "none";
		this.editor.className = "messageEditor";

		// Append the new editor
		oldTextarea.parentNode.insertBefore(this.editor, oldTextarea);

		// Determine the overall height and width - messy, but works
		w = oldTextarea.getDimensions().width+"px";
		if(!w || parseInt(w) < 400)
		{
			w = "400px";
		}
		if(this.options && this.options.height)
		{
			h = this.options.height;
		}
		else if(oldTextarea.offsetHeight)
		{
			h = oldTextarea.offsetHeight+"px";
		}
		else if(oldTextarea.clientHeight)
		{
			h = oldTextarea.clientHeight+"px";
		}
		else if(oldTextarea.style.height)
		{
			h = oldTextarea.style.height;
		}
		else
		{
			h = "400px";
		}
		this.editor.style.width = w;
		this.editor.style.height = h;

		this.createToolbarContainer('top');

		this.createToolbar('closetags', {
			container: 'top',
			alignment: 'right',
			items: [
				{type: 'button', name: 'close_tags', insert: 'zzzz', sprite: 'close_tags', width: 80, style: {visibility: 'hidden'}}
			]
		});
		this.createToolbar('topformatting', {
			container: 'top',
			items: [
				{type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},
				{type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},
				{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}			]
		});

		this.createToolbarContainer('bottom');

		this.createToolbar('insertables', {
			container: 'bottom',
			alignment: 'right',
			items: [
				{type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},
				{type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},
				{type: 'separator'},
				{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
				{type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},
				{type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},
				{type: 'separator'},
				{type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},
				{type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},
				{type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},
			]
		});

		this.createToolbar('formatting', {
			container: 'bottom',
			items: [
				{type: 'button', name: 'b', sprite: 'bold', insert: 'b', title: this.options.lang.title_bold},
				{type: 'button', name: 'i', sprite: 'italic', insert: 'i', title: this.options.lang.title_italic},
				{type: 'button', name: 'u', sprite: 'underline', insert: 'u', title: this.options.lang.title_underline},
				{type: 'separator'},
				{type: 'button', name: 'align_left', sprite: 'align_left', insert: 'align', extra: 'left', title: this.options.lang.title_left},
				{type: 'button', name: 'align_center', sprite: 'align_center', insert: 'align', extra: 'center', title: this.options.lang.title_center},
				{type: 'button', name: 'align_right', sprite: 'align_right', insert: 'align', extra: 'right', title: this.options.lang.title_right},
				{type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify}
			]
		});

					
	    this.createToolbar('BBCodes', {
			container: 'bottom',
			alignment: 'right',
			items: [
			    {type: 'button', name: 'mycode', sprite: 'header', insert: 'header', title: this.options.lang.title_header},
				{type: 'button', name: 'mycode', sprite: 'spoiler', insert: 'spoiler', title: this.options.lang.title_spoiler}
			]
		});		
		// Create our new text area
		areaContainer = document.createElement("div");
		areaContainer.style.clear = "both";
		
		// Set the width/height of the area
		subtract = 16;
		if(MyBB.browser == 'ie') subtract += 5;
		subtract2 = 7;
		if(MyBB.browser == 'ie') subtract2 += 6;
		areaContainer.style.height = parseInt(Element.getDimensions(this.editor).height - 30)-this.toolbarHeight-subtract+"px";
		areaContainer.style.width = parseInt(Element.getDimensions(this.editor).width - 5)-subtract2+"px";

		// Create text area
		textInput = document.createElement("textarea");
		textInput.id = this.textarea;
		textInput.name = oldTextarea.name+"_new";
		textInput.style.height = parseInt(areaContainer.style.height)+"px";
		textInput.style.width = parseInt(areaContainer.style.width)+"px";

		if(oldTextarea.value != '')
		{
			textInput.value = oldTextarea.value;
		}

		if(oldTextarea.tabIndex)
		{
			textInput.tabIndex = oldTextarea.tabIndex;
		}

		areaContainer.appendChild(textInput);
		this.editor.appendChild(areaContainer);

		if(oldTextarea.form)
		{
			Event.observe(oldTextarea.form, "submit", this.closeTags.bindAsEventListener(this));
			Event.observe(oldTextarea.form, "submit", this.updateOldArea.bindAsEventListener(this));
		}

		// Hide the old editor
		oldTextarea.style.visibility = "hidden";
		oldTextarea.style.position = "absolute";
		oldTextarea.style.top = "-1000px";
		oldTextarea.id += "_old";
		this.oldTextarea = oldTextarea;

		this.editor.style.display = "";
		Event.observe(textInput, "keyup", this.updateOldArea.bindAsEventListener(this));

		if(MyBB.browser == 'ie') {
			Event.observe($(this.textarea), 'focus', function() {
				this.trackingCaret = true;
			}.bindAsEventListener(this));
			Event.observe($(this.textarea), 'blur', function() {
				this.trackingCaret = false;
			}.bindAsEventListener(this));
			Event.observe($(this.textarea), 'mousedown', function() {
				this.trackingCaret = true;
				this.storeCaret();
			}.bindAsEventListener(this));
		}

		Event.observe(textInput, "blur", this.updateOldArea.bindAsEventListener(this));
	},

	drawColorOption: function(option)
	{
		var item = document.createElement('li');
		item.extra = option.value;
		item.className = 'editor_dropdown_color_item';
		item.innerHTML = '<a style="background-color: '+option.value+'"></a>';
		return item;
	},

	createToolbarContainer: function(name)
	{
		if($('editor_toolbar_container_'+name)) return;

		var container = document.createElement("div");
		container.id = 'editor_toolbar_container_'+name;
		container.className = 'toolbar_container';

		this.editor.appendChild(container);

		this.toolbarHeight += 28;

		return container;
	},

	createToolbar: function(name, options)
	{
		if(typeof(options.container) == 'undefined')
		{
			options.container = this.createToolbarContainer('auto_'+name);
		}
		else {
			options.container = $('editor_toolbar_container_'+options.container);
			if(!options.container) return;
		}

		if($('editor_toolbar_'+name)) return;

		var toolbar = document.createElement('div');
		toolbar.id = 'editor_toolbar_'+name;
		toolbar.className = 'toolbar';

		var clear = document.createElement('br');
		clear.style.clear = 'both';
		toolbar.appendChild(clear);

		if(options.alignment && options.alignment == 'right') {
			toolbar.className += ' float_right';
		}
		options.container.appendChild(toolbar);
		if(typeof(options.items) == 'object') {
			for(var i = 0; i < options.items.length; ++i) {
				this.addToolbarItem(toolbar, options.items[i]);
			}
		}
		// add closing item
		if(toolbar.lastChild.previousSibling)
			toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';
	},
	
	setElementState: function(element, state) {
		element.addClassName('toolbar_'+state);
		
		if(element.hasClassName('toolbar_button_group_first')) {
			if(state == 'clicked') {
				append = 'toolbar_clicked';
			}
			else if(state == 'hover') {
				append = 'toolbar_hover';
			}
			append += '_button_group_first';
			element.addClassName(append);
		}
		
		if(element.hasClassName('toolbar_button_group_last')) {
			if(state == 'clicked') {
				append = 'toolbar_clicked';
			}
			else if(state == 'hover') {
				append = 'toolbar_hover';
			}
			append += '_button_group_last';
			element.addClassName(append);
		}
	},
	
	removeElementState: function(element, state)
	{
		element.removeClassName('toolbar_'+state);
		
		if(element.hasClassName('toolbar_button_group_first')) {
			if(state == 'clicked') {
				append = 'toolbar_clicked';
			}
			else if(state == 'hover') {
				append = 'toolbar_hover';
			}
			append += '_button_group_first';
			element.removeClassName(append);
		}
		
		if(element.hasClassName('toolbar_button_group_last')) {
			if(state == 'clicked') {
				append = 'toolbar_clicked';
			}
			else if(state == 'hover') {
				append = 'toolbar_hover';
			}
			append += '_button_group_last';
			element.removeClassName(append);
		}	
	},

	dropDownMenuItemClick: function(e)
	{
		this.restartEditorSelection();
		element = Event.element(e);

		if(!element)
			return;

		if(!element.extra)
			element = element.up('li');

		var mnu = element.up('ul');
		var dropdown = this.getElementToolbarItem(mnu);
		var label = dropdown.down('.editor_dropdown_label');

		if(!dropdown.insertText || (mnu.activeItem && mnu.activeItem == element))
			return;

		this.insertMyCode(dropdown.insertText, element.extra);
		mnu.lastItemValue = element.extra;

		if(this.getSelectedText($(this.textarea)))
		{
			this.setDropDownMenuActiveItem(dropdown, 0);
		}
		else
		{
			if(label)
			{
				label.innerHTML = element.innerHTML;
				label.style.overflow = 'hidden';
			}
			var sel_color = dropdown.down('.editor_button_color_selected')
			if(sel_color)
			{
				sel_color.style.backgroundColor = element.extra;
				var use_default = dropdown.down('.editor_dropdown_color_item_default');
				if(use_default) use_default.style.display = '';
			}
			mnu.activeItem = element;
			element.addClassName('editor_dropdown_menu_item_active');
		}
		this.hideOpenDropDownMenu();
		Event.stop(e);
	},

	setDropDownMenuActiveItem: function(element, index)
	{
		if(element == null)
		{
			return;
		}
		var mnu = element.down('ul');
		var label = element.down('.editor_dropdown_label');

		if(mnu.activeItem)
		{
			mnu.activeItem.removeClassName('editor_dropdown_menu_item_active');
			mnu.activeItem = null;
		}

		if(index > 0)
		{
			var item = mnu.childNodes[index];
			if(!item) return;
			mnu.activeItem = item;
			if(label)
			{
				label.innerHTML = item.innerHTML;
			}

			var sel_color = element.down('.editor_dropdown_color_selected')
			if(sel_color)
			{
				sel_color.style.backgroundColor = item.style.backgroundColor;
				mnu.lastItemValue = item.insertExtra;
				var use_default = element.down('.editor_dropdown_color_item_default');
				if(use_default) use_default.style.display = '';
			}
			item.addClassName('editor_dropdown_menu_item_active');
		}
		else
		{
			if(label)
			{
				label.innerHTML = mnu.childNodes[0].innerHTML;
			}

			var sel_color = element.down('.editor_button_color_selected')
			if(sel_color)
			{
				//sel_color.style.backgroundColor = '';
				var use_default = element.down('.editor_dropdown_color_item_default');
				if(use_default) use_default.style.display = 'none';
			}
			this.removeElementState(element, 'clicked');
		}
	},

	createDropDownMenu: function(options)
	{
		var dropdown = document.createElement('div');
		dropdown.itemType = options.type;
		if(options.image || options.sprite)
			dropdown.className = 'toolbar_dropdown_image';
		else
			dropdown.className = 'toolbar_dropdown';

		dropdown.className += ' editor_dropdown toolbar_dropdown_'+options.name;
		dropdown.id = 'editor_item_'+options.name;

		Event.observe(dropdown, 'mouseover', function()
		{
			this.storeCaret();
			dropdown.addClassName('toolbar_dropdown_over');
		}.bindAsEventListener(this));
		Event.observe(dropdown, 'mouseout', function()
		{
			this.storeCaret();
			dropdown.removeClassName('toolbar_dropdown_over');
		}.bindAsEventListener(this));
		dropdown.insertText = options.insert;

		// create the dropdown label container
		var label = document.createElement('div');
		label.className = 'editor_dropdown_label';
		if(options.title)
		{
			label.innerHTML = options.title;
		}
		else
		{
			label.innerHTML = '&nbsp;';
		}
		dropdown.appendChild(label)

		// create the arrow
		var arrow = document.createElement('div');
		arrow.className = 'editor_dropdown_arrow';
		dropdown.appendChild(arrow);

		// create the menu item container
		var mnu = this.buildDropDownMenu(options);

		Event.observe(dropdown, 'click', this.toggleDropDownMenu.bindAsEventListener(this));
		dropdown.appendChild(mnu);
		return dropdown;
	},

	buildDropDownMenu: function(options)
	{
		var mnu = document.createElement('ul');
		mnu.className = 'editor_dropdown_menu';
		mnu.style.display = 'none';

		// create the first item
		if(options.title)
		{
			var item = document.createElement('li');
			item.className = 'editor_dropdown_menu_title';
			item.innerHTML = options.title;
			mnu.appendChild(item);
			Event.observe(item, 'click', function()
			{
				if(mnu.activeItem)
				{
					this.restartEditorSelection();
					this.insertMyCode(dropdown.insertText, '-');
				}
				this.setDropDownMenuActiveItem(dropdown, 0);
			}.bindAsEventListener(this));
		}

		$H(options.options).each(function(option)
		{
			if(options.draw_option)
			{
				item = options.draw_option(option)
			}
			else
			{
				var item = document.createElement('li');
				item.innerHTML = option.value;

				var content = document.createElement('span');
				item.appendChild(content);
				item.extra = option.key;
			}
			Event.observe(item, 'click', this.dropDownMenuItemClick.bindAsEventListener(this));
			Event.observe(item, 'mouseover', function()
			{
				item.addClassName('editor_dropdown_menu_item_over');
			});
			Event.observe(item, 'mouseout', function()
			{
				item.removeClassName('editor_dropdown_menu_item_over');
			});
			mnu.appendChild(item);
		}, this);
		return mnu;
	},

	toggleDropDownMenu: function(e)
	{
		element = Event.element(e);
		if(!element)
			return;
		if(!element.itemType)
			element = this.getElementToolbarItem(element);
		
		var mnu = $(element).down('ul');
		
		// This menu is already open, close it
		if(mnu.style.display != 'none')
		{
			mnu.style.display = 'none';
			element.removeClassName('editor_dropdown_menu_open');
			this.removeElementState(element, 'clicked');
			this.openDropDownMenu = null;
			Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
		}
		// Opening this menu
		else
		{
			// If a menu is already open, close it first
			this.showDropDownMenu(mnu);
		}
		this.removeElementState(element, 'clicked');
		Event.stop(e);
	},

	showDropDownMenu: function(mnu)
	{
		this.hideOpenDropDownMenu();
		mnu.style.display = '';
		element = this.getElementToolbarItem(mnu);
		element.addClassName('editor_dropdown_menu_open');
		this.setElementState(element, 'clicked');
		this.openDropDownMenu = mnu;
		Event.observe(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
	},

	hideOpenDropDownMenu: function()
	{
		if(!this.openDropDownMenu) return;
		this.openDropDownMenu.style.display = 'none';
		this.getElementToolbarItem(this.openDropDownMenu).removeClassName('editor_dropdown_menu_open');
		var dropDown = this.getElementToolbarItem(this.openDropDownMenu);
		this.removeElementState(element, 'clicked');
		this.openDropDownMenu = null;
		Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
	},

	getElementToolbarItem: function(elem)
	{
		var parent = elem;
		do {
			if(parent.insertText) return parent;
			parent = parent.parentNode;
		} while($(parent));

		return false;
	},

	storeCaret: function()
	{
		if(MyBB.browser != 'ie' || !this.trackingCaret)
		{
			return;
		}
		
		var range = document.selection.createRange();
		var range_all = document.body.createTextRange();
		range_all.moveToElementText($(this.textarea));
		for(var sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++)
			range_all.moveStart('character', 1);

		var range_all = document.body.createTextRange();
		range_all.moveToElementText($(this.textarea));
		for(var sel_end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; sel_end++)
			range_all.moveStart('character', 1);

		this.lastCaretS = sel_start;
		this.lastCaretE = sel_end;
	},

	restartEditorSelection: function()
	{
		if(MyBB.browser != 'ie')
		{
			return;
		}

		var range = $(this.textarea).createTextRange();
		range.collapse(true);
		range.moveStart('character', this.lastCaretS);
		range.moveEnd('character', this.lastCaretE - this.lastCaretS);
		range.select();
	},

	addToolbarItem: function(toolbar, options)
	{
		if(typeof(toolbar) == 'string')
		{
			toolbar = $('editor_toolbar_'+toolbar);
		}

		if(!$(toolbar)) return;

		// Does this item already exist?
		if($('editor_item_'+options.name)) return;

		insert_first_class = false;

		// Is this the first item? childnodes = 1 (closing br) or lastchild.previousSibling = sep
		if(toolbar.childNodes.length == 1 || (toolbar.lastChild.previousSibling && toolbar.lastChild.previousSibling.className.indexOf('toolbar_sep') > -1 || (toolbar.lastChild.previousSibling.className.indexOf('editor_dropdown') > -1 && options.type != 'dropdown')))
		{
			insert_first_class = true;
		}

		if(options.type == "dropdown")
		{
			var dropdown = this.createDropDownMenu(options);
			if(dropdown)
				toolbar.insertBefore(dropdown, toolbar.lastChild);

			if(insert_first_class == true)
				dropdown.className += ' toolbar_dropdown_group_first';
		}
		else if(options.type == 'button')
		{
			var button = this.createToolbarButton(options)
			toolbar.insertBefore(button, toolbar.lastChild);

			if(insert_first_class == true)
				button.className += ' toolbar_button_group_first';
		}
		else if(options.type == 'separator')
		{
			if(toolbar.lastChild.previousSibling && !$(toolbar.lastChild.previousSibling).hasClassName('toolbar_dropdown'))
			{
				toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';
			}
			var separator = document.createElement("span");
			separator.itemType = options.type;
			separator.className = "toolbar_sep";
			toolbar.insertBefore(separator, toolbar.lastChild);
		}
	},

	createToolbarButton: function(options)
	{
		var button = document.createElement('span');
		button.itemType = options.type;
		button.id = 'editor_item_'+options.name;
		if(typeof(options.title) != 'undefined')
		{
			button.title = options.title;
		}
		button.className = 'toolbar_button toolbar_normal toolbar_button_'+options.name;

		if(typeof(options.style) == 'object')
		{
			$H(options.style).each(function(item) {
				eval('button.style.'+item.key+' = "'+item.value+'";');
			});
		}
		button.insertText = options.insert;
		button.insertExtra = '';
		if(typeof(options.extra) != 'undefined')
			button.insertExtra = options.extra;

		if(typeof(options.sprite) != 'undefined')
		{
			var img = document.createElement('span');
			img.className = 'toolbar_sprite toolbar_sprite_'+options.sprite;
		}
		else
		{
			var img = document.createElement('img');
			img.src = this.themePath + "/images/" + options.image;
		}
		button.appendChild(img);

		if(options.dropdown)
		{
			if(options.color_select == true)
			{
				var sel = document.createElement('em');
				sel.className = 'editor_button_color_selected';
				button.appendChild(sel);
			}
			// create the arrow
			var arrow = document.createElement('u');
			arrow.className = 'toolbar_button_arrow';
			button.appendChild(arrow);
			button.className += ' toolbar_button_with_arrow';
		}

		var end = document.createElement('strong');
		button.appendChild(end);

		// Create the actual drop down menu
		if(options.dropdown)
		{
			// create the menu item container
			var mnu = this.buildDropDownMenu(options);

			Event.observe(arrow, 'click', this.toggleDropDownMenu.bindAsEventListener(this));
			Event.observe(arrow, 'mouseover', function(e)
			{
				elem = Event.element(e);
				if(!elem) return;
				elem.parentNode.addClassName('toolbar_button_over_arrow');
			});
			Event.observe(arrow, 'mouseout', function(e)
			{
				elem = Event.element(e);
				if(!elem) return;
				elem.parentNode.removeClassName('toolbar_button_over_arrow');
			});
			button.appendChild(mnu);
			button.dropdown = true;
			button.menu = mnu;
		}

		// Does this button have enabled/disabled states?
		if(options.disabled_img || options.disabled_sprite)
		{
			button.disable = function()
			{
				if(button.disabled == true) return;

				if(options.disabled_sprite)
				{
					img.removeClassName('toolbar_sprite_'+options.sprite);
					img.addClassName('toolbar_sprite_disabled_'+options.disabled_sprite);
				}
				else
					img.src = this.themePath + '/images/' + options.disabled_img;

				button.disabled = true;
			};

			button.enable = function()
			{
				if(!button.disabled) return;

				if(options.disabled_sprite)
				{
					img.removeClassName('toolbar_sprite_disabled_'+options.disabled_sprite);
					img.addClassName('toolbar_sprite_'+options.sprite);
				}
				else
					img.src = this.themePath + '/images/' + options.image;

				button.enabled = true;
			};

			if(options.disabled && options.disabled == true)
			{
				button.disable();
				button.disabled = true;
			}
			else
				button.disabled = false;
		}

		Event.observe(button, "mouseover", this.toolbarItemHover.bindAsEventListener(this));
		Event.observe(button, "mouseout", this.toolbarItemOut.bindAsEventListener(this));
		Event.observe(button, "click", this.toolbarItemClick.bindAsEventListener(this));
		return button;
	},

	updateOldArea: function(e)
	{
		this.oldTextarea.value = $(this.textarea).value;
	},

	toolbarItemOut: function(e)
	{
		this.storeCaret();
		element = Event.element(e);

		if(!element)
			return false;

		if(!element.itemType)
			element = 	this.getElementToolbarItem(element);

		if(element.disabled)
			return;

		if(typeof(element.insertText) != 'undefined')
		{
			if(element.insertExtra)
			{
				insertCode = element.insertText+"_"+element.insertExtra;
			}
			else
			{
				insertCode = element.insertText;
			}

			if(this.openTags.indexOf(insertCode) != -1 || element.className.indexOf('editor_dropdown_menu_open') > -1)
			{
				this.setElementState(element, 'clicked');
			}
		}
		this.removeElementState(element, 'hover');
	},

	toolbarItemHover: function(e)
	{
		this.storeCaret();
		element = Event.element(e);
		if(!element)
			return false;

		if(!element.itemType)
			element = this.getElementToolbarItem(element);

		if(element.disabled)
			return;

		if(!element.className || element.className.indexOf('toolbar_clicked') == -1)
			this.setElementState(element, 'hover');
	},

	toolbarItemClick: function(e)
	{
		element = Event.element(e);

		if(!element)
			return false;

		if(!element.itemType)
			element = this.getElementToolbarItem(element);

		if(element.disabled)
			return;

		if(element.dropdown && element.menu)
		{
			if(!element.menu.activeItem)
			{
				Event.stop(e);
				if(!element.menu.lastItemValue)
				{
					this.showDropDownMenu(element.menu);
				}
				else
				{
					this.insertMyCode(element.insertText, element.menu.lastItemValue);
				}

				return;
			}
		}

		if(element.id == "editor_item_close_tags")
		{
			this.closeTags();
		}
		else
		{
			if(typeof(element.insertExtra) != 'undefined')
				this.insertMyCode(element.insertText, element.insertExtra);
			else
				this.insertMyCode(element.insertText);
		}
	},

	insertList: function(type)
	{
		list = "";

		do
		{
			listItem = prompt(this.options.lang.enter_list_item, "");

			if(listItem != "" && listItem != null)
			{
				list = list+"[*]"+listItem+"\n";
			}
		}
		while(listItem != "" && listItem != null);

		if(list == "")
		{
			return false;
		}

		if(type)
		{
			list = "[list="+type+"]\n"+list;
		}
		else
		{
			list = "[list]\n"+list;
		}

		list = list+"[/list]\n";
		this.performInsert(list, "", true, false);
	},

	insertURL: function()
	{
		selectedText = this.getSelectedText($(this.textarea));
		url = prompt(this.options.lang.enter_url, "http://");

		if(url)
		{
			if(!selectedText)
			{
				title = prompt(this.options.lang.enter_url_title, "");
			}
			else
			{
				title = selectedText;
			}

			if(title)
			{
				this.performInsert("[url="+url+"]"+title+"[/url]", "", true, false);
			}
			else
			{
				this.performInsert("[url]"+url+"[/url]", "", true, false);
			}
		}
	},

	insertEmail: function()
	{
		selectedText = this.getSelectedText($(this.textarea));
		email = prompt(this.options.lang.enter_email, "");

		if(email)
		{
			if(!selectedText)
			{
				title = prompt(this.options.lang.enter_email_title, "");
			}
			else
			{
				title = selectedText;
			}

			if(title)
			{
				this.performInsert("[email="+email+"]"+title+"[/email]", "", true, false);
			}
			else
			{
				this.performInsert("[email]"+email+"[/email]", "", true, false);
			}
		}
	},

	insertIMG: function()
	{
		image = prompt(this.options.lang.enter_image, "http://");

		if(image)
		{
			this.performInsert("[img]"+image+"[/img]", "", true);
		}
	},

	insertMyCode: function(code, extra)
	{
		this.restartEditorSelection();

		switch(code)
		{
			case "list":
				this.insertList(extra);
				break;
			case "url":
				this.insertURL();
				break;
			case "image":
				this.insertIMG();
				break;
			case "email":
				this.insertEmail();
				break;
			default:
				var already_open = false;
				var no_insert = false;
				if(extra)
				{
					var full_tag = code+"_"+extra;
				}
				else
				{
					var full_tag = code;
				}

				var newTags = new Array();
				this.openTags.each(function(tag)
				{
					exploded_tag = tag.split("_");
					if(exploded_tag[0] == code)
					{
						already_open = true;
						this.performInsert("[/"+exploded_tag[0]+"]", "", false);
						var elem = $('editor_item_'+exploded_tag[0]);

						if(elem)
						{
							this.removeElementState(elem, 'clicked');
						}

						if(elem && (elem.itemType == "dropdown" || elem.dropdown || elem.menu))
						{
							this.setDropDownMenuActiveItem(elem, 0);
						}

						if(tag == full_tag)
						{
							no_insert = true;
						}
					}
					else
					{
						newTags[newTags.length] = tag;
					}
				}.bind(this));

				this.openTags = newTags;
				var do_insert = false;

				if(extra != "" && extra != "-" && no_insert == false)
				{
					start_tag = "["+code+"="+extra+"]";
					end_tag = "[/"+code+"]";
					do_insert = true;
				}
				else if(!extra && already_open == false)
				{
					start_tag = "["+code+"]";
					end_tag = "[/"+code+"]";
					do_insert = true;
				}

				if(do_insert == true)
				{
					if(!this.performInsert(start_tag, end_tag, true))
					{
						this.openTags.push(full_tag);
						$('editor_item_close_tags').style.visibility = '';
					}
					else if($('editor_item_'+full_tag))
					{
						this.removeElementState($('editor_item_'+full_tag), 'clicked');
					}
					else if($('editor_item_'+code))
					{
						elem = $('editor_item_'+code);
						if(elem.type == "dropdown" || elem.dropdown || elem.menu)
							this.setDropDownMenuActiveItem($('editor_item_'+start_tag), 0);
					}
				}
		}

		if(this.openTags.length == 0)
		{
			$('editor_item_close_tags').style.visibility = 'hidden';
		}
	},

	getSelectedText: function(element)
	{
		element.focus();
		if(document.selection)
		{
			var selection = document.selection;
			var range = selection.createRange();

			if((selection.type == "Text" || selection.type == "None") && range != null)
			{
				return range.text;
			}
		}
		else if(element.selectionEnd)
		{
			var select_start = element.selectionStart;
			var select_end = element.selectionEnd;
			if(select_end <= 0)
			{
				select_end = element.textLength;
			}
			var start = element.value.substring(0, select_start);
			var middle = element.value.substring(select_start, select_end);
			return middle;
		}
	},

	performInsert: function(open_tag, close_tag, is_single, ignore_selection)
	{
		var is_closed = true;

		if(!ignore_selection)
		{
			var ignore_selection = false;
		}

		if(!close_tag)
		{
			var close_tag = "";
		}
		var textarea = $(this.textarea);
		textarea.focus();

		if(document.selection)
		{
			var selection = document.selection;
			var range = selection.createRange();

			if(ignore_selection != false)
			{
				selection.collapse;
			}

			if((selection.type == "Text" || selection.type == "None") && range != null && ignore_selection != true)
			{
				if(close_tag != "" && range.text.length > 0)
				{
					var keep_selected = true;
					range.text = open_tag+range.text+close_tag;
				}
				else
				{
					var keep_selected = false;

					if(is_single)
					{
						is_closed = false;
					}
					range.text = open_tag;
				}
				range.select();
			}
			else
			{
				textarea.value += open_tag;
			}
		}
		else if(typeof(textarea.selectionEnd) != 'undefined')
		{
			var select_start = textarea.selectionStart;
			var select_end = textarea.selectionEnd;
			var scroll_top = textarea.scrollTop;

			var start = textarea.value.substring(0, select_start);
			var middle = textarea.value.substring(select_start, select_end);
			var end = textarea.value.substring(select_end, textarea.textLength);

			if(select_end - select_start > 0 && ignore_selection != true && close_tag != "")
			{
				var keep_selected = true;
				middle = open_tag+middle+close_tag;
			}
			else
			{
				var keep_selected = false;
				if(is_single)
				{
					is_closed = false;
				}
				middle = open_tag;
			}

			textarea.value = start+middle+end;

			if(keep_selected == true && ignore_selection != true)
			{
				textarea.selectionStart = select_start;
				textarea.selectionEnd = select_start + middle.length;
			}
			else if(ignore_selection != true)
			{
				textarea.selectionStart = select_start + middle.length;
				textarea.selectionEnd = textarea.selectionStart;
			}
			textarea.scrollTop = scroll_top;
		}
		else
		{
			textarea.value += open_tag;

			if(is_single)
			{
				is_closed = false;
			}
		}
		this.updateOldArea();
		textarea.focus();
		this.trackingCaret = true;
		this.storeCaret();
		this.trackingCaret = false;		
		return is_closed;
	},

	closeTags: function()
	{
		if(this.openTags[0])
		{
			while(this.openTags[0])
			{
				tag = this.openTags.pop();
				exploded_tag = tag.split("_");
				this.performInsert("[/"+exploded_tag[0]+"]", "", false);

				if($('editor_item_'+exploded_tag[0]))
				{
					tag = $('editor_item_'+exploded_tag[0]);
				}
				else
				{
					tag = $('editor_item_'+tag);
				}
				if(tag)
				{
					if(tag.itemType == "dropdown" || tag.dropdown || tag.menu)
					{
						this.setDropDownMenuActiveItem(tag, 0);
					}
					else
					{
						this.removeElementState(tag, 'clicked');
					}
				}
			}
		}
		$(this.textarea).focus();
		$('editor_item_close_tags').style.visibility = 'hidden';
		this.openTags = new Array();
	},

	bindSmilieInserter: function(id)
	{
		if(!$(id))
		{
			return false;
		}

		var smilies = $(id).select('.smilie');

		if(smilies.length > 0)
		{
			smilies.each(function(smilie)
			{
				smilie.onclick = this.insertSmilie.bindAsEventListener(this);
				smilie.style.cursor = "pointer";
			}.bind(this));
		}
	},

	openGetMoreSmilies: function(editor)
	{
		MyBB.popupWindow('misc.php?action=smilies&popup=true&editor='+editor, 'sminsert', 240, 280);
	},

	insertSmilie: function(e)
	{
		element = Event.element(e);

		if(!element || !element.alt)
		{
			return false;
		}
		this.performInsert(element.alt, "", true, false);
	},

	insertAttachment: function(aid)
	{
		this.performInsert("[attachment="+aid+"]", "", true, false);
	}
};

kann mir da jemand weiterhelfen? ich benutzte version 1.4.3

lg.

Michael · 02.12.2008, 22:55

Du verwendest bei beiden den Namen "mycode". Bitte wähle einen anderen Namen für den zweiten Button.

Julian · 02.12.2008, 23:03

cool, danke es funzt ohne Probleme Wink

lg.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken