MyBB.de Forum
Mycode in editor wie img funktion - Druckversion

+- 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: Mycode in editor wie img funktion (/thread-32121.html)

Mycode in editor wie img funktion - MatthiasK - 26.05.2015

Hallo ihr lieben,

Ich bin eben auf einen sehr interessanten Beitrag Gestolpert vom Stefan über das Lightboxing System.

so nun gesagt getan das ganze system mal eingefügt (etwas anders)

so nun habe ich das ganze im Editor getestet functioniert alles super.

Nun bin ich aber auf ein nettes guide hier auf der seite gestolpert mit dem man Mycode in den Editor einfügen kann.

so das einfügen geht leider nicht so wie ich will mein code sieht so aus

Code:
$.sceditor.command.set('popup', {

exec: function() {
this.wysiwygEditorInsertHtml('<span class="mycode">', '</span>');
},
txtExec: ['[popup]', '[/popup]'],
tooltip: "Imag popup"
});

$.sceditor.plugins.bbcode.bbcode.set('popup', {
tags: {
'span': {
'class': ['example-image-link']
}
},
format: '[popup]{0}[/popup]',
html: '<a class="example-image-link" data-lightbox="example-1" href="{0}"><img class="example-image" alt="image-1" src="{0}"></a>'
});

nun ist mir eingefallen das es total schwachsinnig ist wen ich das so einbaue.

Kann man den mycode so einfügen wie wen ich ein image einfüge also mit dem Fenster wo ich den Link angebe und die breite etc ?

wäre über denk anstöse echt erfreut.

ich hoffe ihr versteht was ich meine.

Mit freundlichen Grüßen:

Matze

RE: Mycode in editor wie img funktion - MatthiasK - 28.06.2015

Hallo,

Ich habe noch mal zeit gefunden um mich damit zu beschäftigen.

Ich habe um das Fenster wie beim img einfügen zu haben in der Datei
jscripts/bbcodes_sceditor.js

Diesen Code eingefügt.
Code:
if(partialmode) {
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('popup');
$.sceditor.command
.set('popup', {
exec:  function (caller) {
var editor  = this,
content = $(this._('<form><div><label for="link">{0}</label> <input type="text" id="image" value="http://" /></div>' +
'<div><label for="width">{1}</label> <input type="text" id="width" size="2" /></div>' +
'<div><label for="height">{2}</label> <input type="text" id="height" size="2" /></div></form>',
this._("URL:"),
this._("Width (optional):"),
this._("Height (optional):")
))
.submit(function () {return false;});

content.append($(this._('<div><input type="button" class="button" value="Insert" /></div>',
this._("Insert")
)).click(function (e) {
var $form = $(this).parent('form'),
val = $form.find('#image').val(),
width = $form.find('#width').val(),
height = $form.find('#height').val(),
attrs = '';

if(width && height) {
attrs = '=' + width + 'x' + height;
}

if(val && val !== 'http://') {
editor.wysiwygEditorInsertHtml('[popup' + attrs + ']' + val + '[/popup]');
}

editor.closeDropDown(true);
e.preventDefault();
}));

editor.createDropDown(caller, 'insertimage', content);
}
})
.set('quote', {
exec: function() {
this.insert('[quote]', '[/quote]');
}
});
}

Ich weis das man warscheinlich noch mehr bearbeiten muss.
Nun wollte ich aber erstmal den button einfügen um testen zu können wie es funktioniert.

so dazu bin ich in das Template "codebuttons" gegangen

und habe dort die Zeile :
Code:
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />
<style type="text/css">
.sceditor-button-popup div  {
background: url(images/old_pm.png);
}
</style>
Hinzugefügt (img ist nur zum testen)

anschliesend habe ich bei Toolbars nach images mit einem "," popup eingefügt weil ich es oben in der bbcode.js so geschrieben hatte.

zeile sieht so aus
Code:
toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,popup,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",

Allerdings bekomme ich keinen button angezeigt was muss ich noch tun der button ist im ordner "images/old_pm.png"

Würde mich über hilfe freunen ich werde natürlich noch weiterversuchen.

oder gibt es irgendwo eine Datei die ich noch bearbeiten muss.
da ja im editor die zeile so lautet
Code:
<a class="sceditor-button sceditor-button-image" unselectable="on" data-sceditor-command="image" title="Bild einfügen">

edit:
zusätslich habe ich in der datei: \jscripts\sceditor\jquery.sceditor.bbcode.min.js

noch das hier eingefügt
Code:
popup: {exec: function (a) {//popup
                       var b = this, c = d("popup", {url: b._("URL:"), width: b._("Width (optional):"), height: b._("Height (optional):"), insert: b._("Insert")}, !0);
                       c.find(".button").click(function (a) {
                           var d = c.find("#popup").val(), e = c.find("#width").val(), f = c.find("#height").val(), g = "";
                           e && (g += ' width="' + e + '"'), f && (g += ' height="' + f + '"'), d && b.wysiwygEditorInsertHtml("<img" + g + ' src="' + d + '" />'), b.closeDropDown(!0), a.preventDefault()
                       }), b.createDropDown(a, "insertpopup", c)
                   }, tooltip: "Insert an popup"}

nun erscheint der button aber das form wird immer noch nicht geladen.

RE: Mycode in editor wie img funktion - StefanT - 29.06.2015

Ich kann deinen Code leider so nicht nachvollziehen. Weder ist erkennbar, welchen Code du wo eingefügt hast noch wo die Klammer endee. Und die minifizierte Version ist sowieso kaum lesbar. Auffällig ist allerdings, dass dein Code im Bereich für den partialmode steht, der standardmäßig nicht aktiviert ist. bbcode.set ist gar nicht für deinen MyCode gesetzt.

In unserem Doku-Artikel gehen wir anders vor und bearbeiten keine MyBB-Dateien: https://www.mybb.de/doku/haeufig-gestellte-fragen/wie-kann-ich-einen-eigenen-mycode-erstellen/#mybb18

RE: Mycode in editor wie img funktion - MatthiasK - 29.06.2015

Hallo Stefan,

Okay ja ich habe das einfügen von dem img in den Editor Nun hinbekommen es funktioniert auch so weit.
Die Funktion das mein mycode eingefügt wird, nur in dem normalen editor wo man die img als vorschaue angezeigt bekommt passiert nichts wen ich die Funktion nutze.
Die Funktion funktioniert nur Wen ich im quelltext modus bin.

Ich habe mir die Dokumentation damals schon angeschaut nur will ich ja das ich das gleiche menu bekomme bei button klicken wie beim Image einfügen.
also das fenster.
   


ich denke das es da durchaus auch eine leichtere methode gibt wie ich es anstelle aber so wiet kenne ich mich dann doch nicht mit javascript und jquery aus (finde keine guten anleitungen)

zumal ja dieser code hier für das aufrufen des dropdowns wohl zuständig ist so weit ich das richtig sehe
das habe ich einfach unter der Image funktion einfahc so eingefügt.

wen ihr mir erklärt wie ich euch nahe bringen kann wie ich mich da rein gepfuscht habe dann wäre ich euch sehr dankbar ich bastel da jetzt seit 2 tagen dran rum und komme bei dem problem nicht weiter.

also wen es eine möglichkeit gibt wie ich das nur über das template machen kann und das gleiche ziel erreiche fände ich das super cool

Code:
if(partialmode) {
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('popup');
$.sceditor.command
.set('popup', {
exec:  function (caller) {
var editor  = this,
content = $(this._('<form><div><label for="link">{0}</label> <input type="text" id="image" value="http://" /></div>' +
'<div><label for="width">{1}</label> <input type="text" id="width" size="2" /></div>' +
'<div><label for="height">{2}</label> <input type="text" id="height" size="2" /></div></form>',
this._("URL:"),
this._("Width (optional):"),
this._("Height (optional):")
))
.submit(function () {return false;});

content.append($(this._('<div><input type="button" class="button" value="Insert" /></div>',
this._("Insert")
)).click(function (e) {
var $form = $(this).parent('form'),
val = $form.find('#image').val(),
width = $form.find('#width').val(),
height = $form.find('#height').val(),
attrs = '';

if(width && height) {
attrs = '=' + width + 'x' + height;
}

if(val && val !== 'http://') {
editor.wysiwygEditorInsertHtml('[popup' + attrs + ']' + val + '[/popup]');
}

editor.closeDropDown(true);
e.preventDefault();
}));

editor.createDropDown(caller, 'insertimage', content);
}
})
.set('quote', {
exec: function() {
this.insert('[quote]', '[/quote]');
}
});
}


RE: Mycode in editor wie img funktion - MrBrechreiz - 02.07.2015

Wenn Du mal das schreiben würdest, welcher Code geanu da erscheinen soll und nicht nur nach der Funktion fragst, kann man dir besser helfen. Und bitte in Zukunft deine Dateien als Anhang posten und nicht mit diesem .............

Im Grunde ist es recht einfach diese IMG Aufklappfunktion verwenden zu können, nur muss diese aber auch einen Sinn ergeben.

RE: Mycode in editor wie img funktion - StefanT - 02.07.2015

Ich habe den völlig verstümmelten Beitrag gelöscht. Schaut sich keiner in der Vorschau an, wie das später aussieht?

Davon abgesehen sind Änderungen an den Dateien jscripts/sceditor/jquery.sceditor.xhtml.min.js und jscripts/sceditor/jquery.sceditor.min.js weder sinnvoll noch nötig.

RE: Mycode in editor wie img funktion - MatthiasK - 02.07.2015

Okay ich habe mal die datein in den anhang gepackt.

werde aber mal versuchen das ganze nur über das template zu lösen ich habe zwar noch keine ahnung wie das gehen soll.

die funktion soll quasi das gleiche machen wie die imag funktion nur soll sie das lightbox addon mit nutzen.
das ich wie folgt eingebunden habe
https://www.mybb.de/forum/thread-20757.html

und ich will die vorschau größe ändern deswegen benötige ich das img fenster.

mit freundlichen Grüßen: matthias