+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: MyBB 1.8.x (https://www.mybb.de/forum/forum-87.html)
+--- Forum: Allgemeiner Support (https://www.mybb.de/forum/forum-88.html)
+--- Thema: Eigener MyCode verschwindet nach Klick auf Vorschau (/thread-31355.html)
Eigener MyCode verschwindet nach Klick auf Vorschau - melancholia - 09.02.2015
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?
RE: Eigener MyCode verschwindet nach Klick auf Vorschau - StefanT - 09.02.2015
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.
RE: Eigener MyCode verschwindet nach Klick auf Vorschau - melancholia - 12.02.2015
Wie kann ich das denn anpassen, dass ich meine MyCodes einsetzen kann?
RE: Eigener MyCode verschwindet nach Klick auf Vorschau - StefanT - 12.02.2015
Vermutlich so:
Code:
tags: {
'font': {
'style': 'text-transform:lowercase;'
}
}RE: Eigener MyCode verschwindet nach Klick auf Vorschau - melancholia - 17.02.2015
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]
RE: Eigener MyCode verschwindet nach Klick auf Vorschau - StefanT - 17.02.2015
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?