[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?