[melancholia]

Ich habe sechs eigene MyCodes erstellt und eingebaut - soweit, so gut. Sie werden im Editor angezeigt und umgewandelt.

Das Problem ist, dass sie, wenn ich auf Vorschau klicke, danach im Textfeld verschwunden sind.

So sehen meine Erweiterungen im codebuttons-Template aus:

PHP-Code:

<style type="text/css"> .sceditor-button-img_l div  { background: url(/jscripts/sceditor/editor_themes/img_l.png); } .sceditor-button-img_r div  { background: url(/jscripts/sceditor/editor_themes/img_r.png); } .sceditor-button-block div  { background: url(/jscripts/sceditor/editor_themes/block.png); }  .sceditor-button-small-caps div  { background: url(/jscripts/sceditor/editor_themes/small-caps.png); } .sceditor-button-upper div  { background: url(/jscripts/sceditor/editor_themes/upper.png); }   .sceditor-button-lower div  { background: url(/jscripts/sceditor/editor_themes/lower.png); } </style>

PHP-Code:

/*-----IMG-L-----*/ $.sceditor.command.set('img_l', { exec: function() { this.wysiwygEditorInsertHtml('<img src="', '" style="float: left; margin: 10px 15px 0 0;" alt="" />'); }, txtExec: ['[img_l]', '[/img_l]'], tooltip: "Den Text rechts um ein Bild herum fließen lassen" }); $.sceditor.plugins.bbcode.bbcode.set('img_l', { tags: { 'span': { 'class': ['img_l'] } }, format: '[img_l]{0}[/img_l]', html: '<img src="{0}" style="float: left; margin: 10px 15px 0px 0px;" alt="" />' }); /*-----IMG-R-----*/  $.sceditor.command.set('img_r', { exec: function() { this.wysiwygEditorInsertHtml('<img src="', '" style="float: right; margin: 10px 0 0 15px;" alt="" />'); }, txtExec: ['[img_r]', '[/img_r]'], tooltip: "Den Text links um ein Bild herum fließen lassen" }); $.sceditor.plugins.bbcode.bbcode.set('img_r', { tags: { 'span': { 'class': ['img_r'] } }, format: '[img_r]{0}[/img_r]', html: '<img src="{0}" style="float: right; margin: 10px 0 0 15px;" alt="" />' });   /*-----BLOCK-----*/  $.sceditor.command.set('block', { exec: function() { this.wysiwygEditorInsertHtml('<block>', '</block>'); }, txtExec: ['[block]', '[/block]'], tooltip: "Blockquote" }); $.sceditor.plugins.bbcode.bbcode.set('block', { tags: { 'span': { 'class': ['block'] } }, format: '[block]{0}[/block]', html: '<block>{0}</block>' });   /*-----SMALL-CAPS-----*/  $.sceditor.command.set('small-caps', { exec: function() { this.wysiwygEditorInsertHtml('<font style="font-variant:small-caps;">', '</font>'); }, txtExec: ['[small-caps]', '[/small-caps]'], tooltip: "Text in Kapitälchen" }); $.sceditor.plugins.bbcode.bbcode.set('small-caps', { tags: { 'span': { 'class': ['small-caps'] } }, format: '[small-caps]{0}[/small-caps]',  html: '<font style="font-variant:small-caps;">{0}</font>' });   /*-----UPPER-----*/  $.sceditor.command.set('upper', { exec: function() { this.wysiwygEditorInsertHtml('<font style="text-transform:uppercase;">', '</font>'); }, txtExec: ['[upper]', '[/upper]'], tooltip: "Text in Großbuchstaben" }); $.sceditor.plugins.bbcode.bbcode.set('upper', { tags: { 'span': { 'class': ['upper'] } }, format: '[upper]{0}[/upper]',  html: '<font style="text-transform:uppercase;">{0}</font>' });   /*-----LOWER-----*/  $.sceditor.command.set('lower', { exec: function() { this.wysiwygEditorInsertHtml('<font style="text-transform:lowercase;">', '</font>'); }, txtExec: ['[lower]', '[/lower]'], tooltip: "Text in Kleinbuchstaben" }); $.sceditor.plugins.bbcode.bbcode.set('lower', { tags: { 'span': { 'class': ['lower'] } }, format: '[upper]{0}[/upper]',  html: '<font style="text-transform:uppercase;">{0}</font>' });

Sind da irgendwo Fehler?

[StefanT]

Das liegt daran, dass bei tags ein span-Element mit der class lower angegeben ist (<span class="lower">), der HTML-Code allerdings völlig anders lautet. Damit klappt die Zuordnung nicht.

[melancholia]

Wie kann ich das denn anpassen, dass ich meine MyCodes einsetzen kann? 

[StefanT]

Vermutlich so:

Code:

tags: { 'font': { 'style': 'text-transform:lowercase;' } }

Siehe auch: http://www.sceditor.com/documentation/cu...odes/#tags

[melancholia]

Also mit den Text-Codes bin ich nun zurecht gekommen.
Mit den Bildern allerdings habe ich Schwierigkeiten und auch über Google wurde ich nicht schlau 

Mit [img_l]Bild-URL[/img_l] möchte ich erreichen, dass der Text anschliessend rechts um das Bild herum fliesst.

Mein Versuch sieht momentan so aus:

PHP-Code:

/*----- IMG_L ----*/   $.sceditor.command.set('img_l', { exec: function() { this.wysiwygEditorInsertHtml('<img class="img_l" src="','">'); }, txtExec: ['[img_l]', '[/img_l]'], tooltip: "Den Text rechts um ein Bild herum fließen lassen" }); $.sceditor.plugins.bbcode.bbcode.set('img_l', { tags: { 'img': { 'class': ['img_l'] } }, format: '[img_l]{0}[/img_l]', html: '<img class="img_l" src="{0}">' }); /*-------------------------*/

Benutze ich den Button im Editor, erscheint nach dem Klick auf die Vorschau folgendes im Editor:

PHP-Code:

[img_l][img]Bild-URL[/img][/img_l]

[StefanT]

Vermutlich kommt das da zu einem Konflikt mit dem gewöhnlichen IMG-MyCode. Ob man das lösen kann, weiß ich leider nicht. Kannst du vielleicht um das Bild ein <span> oder ähnliches einfügen um das gewünschte zu erreichen?