[phpBB2] Editor Button hinzufügen?

URL-Adresse des Forums: http://ny-love-story.forumieren.com/
Rang/Funktion im Forum: Admin
Forenversion: PHPBB2
Browser: Chrome
Persönliches CSS(Ja/Nein): Ja
Templateänderungen(Ja/Nein): Nein

Hey ich weiß nicht ob ich hier in der richtigen Rubrik bin, aber ich hab eine Frage zu dem Editor, den man sowohl beim Antworten als auch bei den Expressantworten sieht. Es geht um die Symbole, die man auch hier oben immer angezeigt bekommt.



Ich wollte fragen ob es möglich ist, einen individuellen Button hinzuzufügen. Dieser soll dann den markierten text in dieser form einbinden.

Code:


<div class=X> Text </div>


Ich habe in unserem Forum eingebaut das man so die Charakterfarben zu ordnen kann in dem man statt dem X den Namen des Charakters schreibt und somit eben das gesprochene markieren kann. Da das immer getippt werden muss wäre es cool wenn man es wie bei der B oder I funktion mit einem Button oben klären könnte.

Wäre das möglich? und wenn ja?
Wie kann ich das hinzufügen?

Liebe Grüße
NewFuture

Hallo NewFuture,

ja, das ist möglich.
Soll dann aber das X eingefügt werden oder direkt der Charaktername?

Heyho

Wenn es n Dropdown Menü geben könnte mit den Namen gerne auch so aber ansonsten eher das X das man dann nur noch ersetzen müsste.

lg

Hallo nochmals,

ein Dropdown-Menu mit dem Namen müsste diese Daten aber irgendwoher haben und leider kann man das mit forumieren nicht serverseitig speichern. Du könntest jeden User jeweils den seinen Code lokal speichern lassen, aber die Frage ist, wo er die Charakternamen eingibt (Profil? Über einen anderen Button im Editor?).

Ich habe dir jetzt mal einen  Pfusch-Code gemacht, der dir den Button ganz links einfügt, wie in dem folgenden Bild:


Am besten kreierst du ein Index-Modul  (Standardaufstellung nutzen auf 'Nein'). Auf diese Weise kannst du auch einstellen, dass Gäste den Button nicht sehen
Da der Code aber ständig checkt, ob der Editor da ist (dieser wird wahrscheinlich dynamisch eingefügt), ist es eventuell ratsam, den Code ohne die script-Tags als Javscript einzufügen und nur bei den Beiträgen anzeigen zu lassen, falls das Forum stockt.

Dort fügst du den folgenden Code ein:

Code:

<script>
  jQuery(document).ready(function addButtons() {  
    let editorToolbar = document.querySelector('.sceditor-toolbar');
    if (editorToolbar) {
      editorToolbar.innerHTML = `
      <div class="sceditor-group">
      <button id="colorButt" class="editorBtn">T</button>
      </div>`
      + editorToolbar.innerHTML;
      jQuery('#colorButt').click(function(e){
        e.preventDefault();
        jQuery('.sceditor-container textarea')[0].value += `<div class=X> Text </div>`;    
      })  
    }
    else {
      setTimeout(addButtons, 100);
    }
  })
</script>

Der Button ist

Code:

<button id="colorButt" class="editorBtn">T</button>

Ich habe es momentan nicht eingestellt, dass der Cursor innerhalb von "Text" geht, falls das okay ist.

Das CSS für den Button ist:

Code:

.editorBtn {
    display: block;
    background-clip: padding-box;
    background-color: #dddddd;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    float: left;
    height: 26px;
    width: 26px;
    padding: 3px 5px;
}

Freundliche Grüsse
Asciugamano

Huhu
Erstmal vielen vielen Dank das du dir die Zeit nimmst mir zu helfen
Zu deiner Frage, ich habe für jeden Charakter eine Class erstellt im Css der so aufgebaut ist:

.alzack
{
 color="#ff7e00";
 display:inline
}

und wenn man es dann nutzt würde es so aussehen:

http://fs5.directupload.net/images/180704/y3cnkoz6.png


okey also ich hab bei den Index-Modulen es so eingefügt:

http://fs5.directupload.net/images/180704/9cpwdplw.png

und habs auch in mein CSS Code eingefügt:

http://fs5.directupload.net/images/180704/nry7zhl5.png

aber an dem Editor hat sich nichts geändert:

http://fs5.directupload.net/images/180704/5d7a32mr.png

oder sollte ich das erste in JavaScript dann einfügen? Oder muss ich index-Module dann aktivieren?
In dem Forum ist es nämlich nicht aktiviert. Hab es aber oben auf die linke Leiste dann gepackt.

http://fs5.directupload.net/images/180704/jqy6trzy.png
http://ny-love-story.forumieren.com/ <- das Forum

LG

Danke für die ganzen Screenshots!
Dadurch habe ich tatsächlich auch den Fehler gleich entdeckt:
Du hast Index-Module anzeigen auf 'Nein' gestellt.
https://abload.de/img/fehlerchenkfsip.png

Haken auf ja stellen, dann auf 'absenden' klicken und es sollte angezeigt werden.

Kleiner Tipp für die Class:
Nutze ein span-Element statt ein div, dann musst du auch display nicht auf inline setzen.
Div ist nämlich ein Block-Element, während sich span als inline Element auch gut zum Stylen von Text (in deinem Fall Farben) eignet

Meine Frage hast du damit aber leider nicht beantwortet, weil ich mir das mit den Klassen im Grunde schon so vorgestellt habe.
Ich wollte von dir wissen, wo der User selber seine Charaktere eintragen würde, also, dass er in einem Auswahlmenu nur die seinen (oder die, die er will) zur Auswahl hat. 44 User wären immerhin schon ein ziemlich grosses Dropdown-Menu :/

Alternativ könnte ich dir das Javascript auch umschreiben, sodass du selber die Account-Namen einträgst und dann für jeden User alle Accounts im Editor (alphabetisch geordnet) im Dropwdown angezeigt werden. Oder ein Eingabefeld mit Autocomplete.

Huhu
Gerne arbeite lieber mit screenshots statt bullshit zu erzählen und mein gegenüber gar nichts mehr rafft xD

okey also habs aktiviert aber jez hab ich im Forum einen Balken an der Seite den ich nicht will.. dadurch verzieht sich mein Forum total..

mit balken: http://fs5.directupload.net/images/180705/tnffqngg.png
ohen balken: http://fs1.directupload.net/images/180705/78zg29e2.png

Also danke für den tipp mit Span aber wenn ich das jetzt ändere müsste ich alle Posts im Forum überarbeiten und von div auf Span wechseln xD -> ist eine Faule person!

Ja stimmt die Liste wäre dann echt viel zu lang x.x Man hat ja bei Forumieren leider keine Möglichkeit die accounts aneinander zubidnen sodass man hin und her schneller switchen könnte außer dem fast login ding da was ich schon im forum drin hab..

-> Alternativ könnte ich dir das Javascript auch umschreiben, sodass du selber die Account-Namen einträgst und dann für jeden User alle Accounts im Editor (alphabetisch geordnet) im Dropwdown angezeigt werden. Oder ein Eingabefeld mit Autocomplete.

Das wäre ne Idee. Damit meinst du doch das man z.B für Alzack nur das A eingibt und er würde alle Charaktere mit A anzeigen und man bräuchte nur noch klicken oder?

LG

Hallo nochmals!

NewFuture schrieb:okey also habs aktiviert aber jez hab ich im Forum einen Balken an der Seite den ich nicht will.. dadurch verzieht sich mein Forum total..

Welchen Balken meinst du genau? Die Pagination ("Seite 2 von 2") ist ja auf beiden Bildern verschoben. Meinst du die letzten Buttons, die auf eine neue Linie gehen?

NewFuture schrieb:
Ja stimmt die Liste wäre dann echt viel zu lang x.x Man hat ja bei Forumieren leider keine Möglichkeit die accounts aneinander zubidnen sodass man hin und her schneller switchen könnte außer dem fast login ding da was ich schon im forum drin hab..

Wie bereits gesagt, kann man mit forumieren nur Accountdaten (in diesem Fall die Accountnamen für die Farben) an einen Browser binden, wenn der User die Browserdaten nicht löscht, denselben PC-Account und dasselbe Gerät verwendet. Ist aber nicht sehr sicher.
Daher wollte ich zuvor von dir wissen, wo die User ihre Accountnamen eintragen würden.

NewFuture schrieb:Das wäre ne Idee. Damit meinst du doch das man z.B für Alzack nur das A eingibt und er würde alle Charaktere mit A anzeigen und man bräuchte nur noch klicken oder?

Genau. Du klickst dann auf einen der vorgeschlagenen Namen und sobald du vom Feld wegklickst, wird der Inhalt im Editor angefügt.

Hier wäre der Code dazu (das andere kannst du wieder entfernen):

Code:

const accounts = [
    'Alzack',
    'Pepe',
    'Aloa',
    'Brigitte'
];

jQuery(document).ready(setupButtons);

function setupButtons() {
    addEditorButtonIfReady();
}

function addEditorButtonIfReady() {
    let editorToolbar = document.querySelector('.sceditor-toolbar');
    if (editorToolbar) {
        const dataList =  `<datalist id="accounts">${createDataListContent(accounts)}</datalist>`;
        const inputString = '<input type="text" onblur="checkAndAdd()" placeholder="Charaktername" list="accounts" id="charList" />';

        editorToolbar.innerHTML = '<div id="farbContainer">' + dataList +
        inputString + '</div>' + editorToolbar.innerHTML;
    }
    else {
        setTimeout(() => addEditorButtonIfReady(accounts), 100);
    }
}

function createDataListContent(array) {
    let optionsString = '';
    for (i = 0; i < array.length; i++) optionsString += `<option value="${array[i]}" />`;
    return optionsString;
}

function checkAndAdd() {
    let input = document.getElementById('charList');
    if (accounts.includes(input.value)) {
        jQuery('.sceditor-container textarea')[0].value += `<div class="${input.value.toLowerCase()}"> Text </div>`;
    }
}


Das gibt dir die folgende Ansicht:
https://abload.de/img/screenshot2018-07-05aplsj9.png

Die ID für den Input-Container ist farbContainer, das Input-Feld selber hat die ID charList.

Mit etwas CSS kannst du das Auswahlfeld zum Beispiel links im Editor anfügen:
https://abload.de/img/screenshot2018-07-05ac6sfk.png

Im Code kannst du jeweils den Inhalt zwischen den eckigen Klammern am Anfang anpassen. Das gibt dir die autocomplete Liste. Wichtig ist, dass du zwischen dem Namen jeweils zwei ' anfügst und sie mit einem Komma abtrennst.

mfG
Asciugamano

Hey

Ich meinte den Balken der dazu führt das der Expressantworten Bereich nur noch so klein wird.. also von der ganzen Seite das .. moment ich markier das auf dem Screen kurz.

http://fs1.directupload.net/images/180706/yh4opafa.png

da der Bereich, der ist normalerweise nicht da im Forum. Nur wenn ich das mit den index-Modulen anmache taucht der auf.

Also die Accountnamen sind dann die Namen der User selbst, ich denke aber so eine Such-Leiste ist da wirklich praktischer dann..

Ich hab den Code eingefügt als index-modul wieder aber irgendwie wird er mir nicht angezeigt :O
Stattdessen bekomm ich oben nen Code angezeigt und das Forum verschiebt sich wieder.. Ich glaub das liegt daran das wenn ich Index-Module aktiviere ich ja ne Balkenzahl von mind 180px eingeben muss und der mir dadurch das Forum nach rechts verschiebt um links diese 180px einzubauen aber nichts anzuzeigen.
Kann ich den Code nicht als Java_Script Datei einfach einbauen?

Hier der Fehler:
http://fs1.directupload.net/images/180706/ji89xj5g.png


Liebe Grüße

Hi,

in der Tat war dieser Code als JavaScript gedacht (daher ohne script Tags aussen rum). Ich hatte das in der ersten Version meiner Antwort (die ich leider verlor) genauer beschrieben, dass sich deine Anzeigeprobleme wahrscheinlich durch das Deaktivieren der Index-Module und Entfernen des CSS beheben.
Vor allem jetzt, wo ich weiss, was du mit Balken meinst, bin ich mir ziemlich sicher, dass es von den Index-Modulen kommt.

mfG
Asciugamano

Heyho,

Sry das die Antwort so spät kommt, ich hatte die Tage viel zu tun x.x
Habe es jetzt als JavaScript Datei eingefügt und es scheint aktiviert zu sein, aber die Box wird nach wie vor nicht angezeigt, muss ich denn noch was machen außer den Code einzufügen? Bin etwas verwirrt jetzt xD

LG

Hallo nochmals,

ich habe mir das jetzt etwas auf deinem Forum angeschaut (um den Editor und Fehler zu sehen), kannst den Account danach also wieder löschen.
Ausserdem: Hast du sie alle in dasselbe Textfeld gesteckt, richtig? Das macht es etwas schwieriger, Sachen anzupassen.

Jedenfalls fehlt ein Komma zwischen Bisca und Chloe, danach sollte es klappen
Immer Kommas dazwischen (ausser beim letzten Namen) und die Namen zwischen zwei ' setzen.

Heyho

Alles gut
Also hab es jetzt überarbeitet und die restlichen Namen eingetragen, was muss ich machen damit es in der nächsten Zeile angezeigt wird und nicht über den Buttons?

Und mir ist aufgefallen das man nicht einen Text markieren und draufklicken kann sondern erst draufklicken und dann text schreiben muss. Kann man es auch irgendwie erweitern das es auch mir markieren funktioniert?

LG

Hallo nochmals,

mein Testaccount (um den Editor zu sehen) wurde leider gerade gelöscht, aber ich werde dir dann das CSS hier schreiben und hoffe, dass es in deinem Forum trotzdem auf Anhieb klappt.

NewFuture schrieb:Und mir ist aufgefallen das man nicht einen Text markieren und draufklicken kann sondern erst draufklicken und dann text schreiben muss. Kann man es auch irgendwie erweitern das es auch mir markieren funktioniert? Very Happy

Sollte schon möglich sein, aber ich bin noch nicht dazu gekommen, mich dahinter zu setzen, weil's dann doch ein wenig länger als die andere Funktionalität (die ich bereits selbst teilweise nutzte) dauert.

Dachte, ich gebe dir erst einmal Bescheid.

So:

Hier wäre das momentane CSS:

Code:

.sceditor-container {
  max-width: 840px;
}

.sceditor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 3px 0px 2px;
}

.sceditor-container textarea {
  width: 100%;
}

.sceditor-group {
  display: flex !important;
  margin: 0 !important;
}

#charList {
  border: none;
    background-color: #dddddd;
    border-bottom: 1px solid #aaa;
    border-radius: 3px;
    color: #535353;
}

Und hier das neue Javascript mit der Markieren-Funktion.

Code:

const accounts = [
    'Alzack',
    'Alisha',
    'Ash',
    'Aviv',
    'Bisca',
    'Chloe',
    'Cynthia',
    'Daehyun',
    'Dahlia',
    'Daisuke',
    'Damian',
    'Diamond',
    'Don',
    'Ilaria',
    'Illea',
    'Jackson',
    'Jessica',
    'Jin',
    'Joshua',
    'Kiara',
    'Kyle',
    'Leela',
    'Lillian',
    'Lucy',
    'Lyon',
    'Magnus',
    'Mark',
    'Maya',
    'Mila',
    'Moori',
    'Nevis',
    'Nick',
    'Noah',
    'Nora',
    'Rogue',
    'Rose',
    'Roy',
    'Sage',
    'Serafina',
    'Sia',
    'Sumi',
    'Win',
    'Zayn'
];

jQuery(document).ready(setupButtons);

function setupButtons() {
    addEditorButtonIfReady();
}

function addEditorButtonIfReady() {
    let editorToolbar = document.querySelector('.sceditor-toolbar');
    if (editorToolbar) {
        const dataList =  `<datalist id="accounts">${createDataListContent(accounts)}</datalist>`;
        const inputString = '<input type="text" onBlur="checkAndAdd()" placeholder="Charaktername" list="accounts" id="charList" />';

        editorToolbar.innerHTML = '<div id="farbContainer">' + dataList +
        inputString + '</div>' + editorToolbar.innerHTML;
    }
    else {
        setTimeout(() => addEditorButtonIfReady(accounts), 100);
    }
}

function createDataListContent(array) {
    let optionsString = '';
    for (i = 0; i < array.length; i++) optionsString += `<option value="${array[i]}" />`;
    return optionsString;
}

function checkAndAdd() {
    let input = document.getElementById('charList');
    if (accounts.includes(input.value)) {
        let post = document.querySelector('.sceditor-container textarea');
        let start = post.selectionStart;
        let end = post.selectionEnd;
        if (post.selectionEnd - post.selectionStart != 0) {
            let postString = post.value;
            post.value = `${postString.substring(0, start)}<div class="${input.value.toLowerCase()}">${postString.substring(start, end)}</div>${postString.substring(end)}`;
        }
        else post.value += `<div class="${input.value.toLowerCase()}"> Text </div>`;
    }
}


Was mir noch aufgefallen ist, dass das JavaScript beim Editor nachdem man auf 'Antworten' geklickt hat, nicht angewendet wird, obwohl das "Themen/Beiträge" Häkchen drin ist. Wenn du das Feature also dort auch willst, müsstest du das JS wohl auf allen Seiten anzeigen lassen.

mfG
Asciugamano

Edit: Ich kann den Beitrag leider nicht löschen, wollte ihn aber nachträglich in den oberen reineditieren. Sorry für den Doppelpost.

Heyho

Oh da hat meine Freundin dich wohl gelöscht weil ich wars nit xD sry..

So hab beides eingefügt und es klappt
Ich danke dir sehr für deine Mühe und auch für die ausführliche Erklärung und deine Zeit die ich dir geraubt hab >.<

Danke danke danke du bist der beste