Hallo,
Ich habe es nun soweit hinbekommen wie ich es wollte.
Die Plugins haben mir geholfen nach 2 tagen probieren sieht mein Code nun so aus.
Code:
$.sceditor.command.set('insert', {
_dropDown: function (editor, caller, html) {
var content;
/* content = $(
'<div>' +
'<label for="insertype">' + editor._('Einfügen...') + '</label> ' +
'<select id="insertype">' +
'<option value="null" data-desc="no">' + editor._('---------') + '</option>' +
'</select>' +
'</div>' +
'<div id="desc" style="display: none">' +
'<label for="des">' + editor._('Description (optional):') + '</label> ' +
'<input type="text" id="des" />' +
'</div>' +
'<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
);*/
content = $(
'<label for="insertype">Buildcode eingeben</label> ' +
'<input type="text" placeholder="build code hier" id="editor_build" />' +
'<div class="editor_gw1_klassen">Keine Klasse</div>'+
'<div class="editor_gw1_attri">Keine Attribute</div>' +
'<div>'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_1">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_2">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_3">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_4">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_5">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_6">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_7">'+
'<img src="images/gw1_skill/No_Skill.jpg" class="editor_gw1_skill editor_gw1_skill_8">'+
'</div>'+
'</div>'+
'<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
);
$('input').sceditor('instance').bind('keyup', function(e) {
skill_build1 = $( "#editor_build" ).val();
//alert(skill_build1);
changeeditorui(skill_build1);
});
content.find('.button').click(function (e) {
insertype = content.find('#insertype').val();
description = content.find('#des').val();
before = '[build]' + skill_build1;
end = '[/build]';
if (insertype === "null") {
editor.closeDropDown(true);
return;
}
if (description) {
descriptionAttr = '=' + description + '';
before = '[' + insertype + ''+ descriptionAttr +']';
}
if (html) {
before = before + html + end;
end = null;
}
editor.insert(before, end);
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller, 'insertcommand', content);
},
exec: function (caller) {
$.sceditor.command.get('insert')._dropDown(this, caller);
},
txtExec: function (caller) {
$.sceditor.command.get('insert')._dropDown(this, caller);
},
tooltip: 'Einfügen...'
});
er ist natürlich dem plugin noch sehr ähnlich da ich noch am testen bin.
nun habe ich aber ein Problem wo ich nach Stunden googeln und probieren keine Lösung finde.
Nur viele Anlaufstellen die nicht funktionieren.
und zwar möchte ich eine live prevewie im Editor haben d.h das nicht dort steht
[build]yyy[/build]
sondern das wie es nachher aussieht.
also quasi die Wysiwyg Funktion.
ich habe nun im internet gefunden das man es mit
wysiwygEditorInsertHtml
exec:
oder mit
html: 'html tags',
erreichen kann.
kann mir jemand sagen wie ich das einbinden kann.
ich rufe eine javascript Funktion mit dem mycode auf die ich geschrieben habe.
Vielen Dank im voraus.
und einen Schönen sonnigen Sonntag
Matthias