Support » Plugins » Span Tag via visuellem Editor im Hintergrund erstellen

  • Gelöst radarin

    (@radarin)


    Guten Morgen

    Bevor Gutenberg kam, gab es für den TinyMCE die Erweiterung ‚TinyMCE Custom Styles‘. Damit konnte man Text markieren und mittels Kontexmenu im Quellcode einen SPAN-Style drum rum packen.

    Beispiel:
    Bildschirmfoto-2021-10-26-um-13-39-52

    Gibt es dafür mittlerweile auch eine Lösung für den Blockeditor? Oder muss ich das weiterhin umständlich von Hand in den Quellcode einbinden?

    • Dieses Thema wurde geändert vor 1 Monat, 1 Woche von radarin.
    • Dieses Thema wurde geändert vor 1 Monat, 1 Woche von radarin.
    • Dieses Thema wurde geändert vor 1 Monat, 1 Woche von radarin.
    • Dieses Thema wurde geändert vor 1 Monat, 1 Woche von radarin.
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 22)
  • Du kannst

    • den HTML-Block verwenden,
    • den Absatz-Block per Code-Editor bearbeiten,
    • per Rechtsklick > Kebab-Menü „als HTML bearbeiten“ wählen oder
    • Text z.B. als fett formatieren und dem gesamten Absatz eine eigene CSS-Klasse zuweisen, dann diese Klasse als Selektor für eine eigene CSS-Regel im Customizer nutzen:
      .meine-formatierung strong { font-weight: normal; color: red; background: yellow; }

    Ich nehme an, dass es dafür auch ein Plugin gibt, hab dann aber nicht weiter gesucht.

    Thread-Ersteller radarin

    (@radarin)

    @pixolin, danke Dir für Deine Antwort, aber genau so will ich es NICHT machen. Ausserdem will ich nicht den ganzen Absatz, sondern nur so wie oben gezeigt die 2 Wörter markieren.

    Im Idealfall im Editor die beiden Worte markieren und mit Rechtsklick oder einem Button die SPAN Klasse zuordnen. Im Idealfall aus einer Liste auswählen. Ein Textfeld für eine manuelle Eingabe wäre auch ok. Im HTML rumfummeln ist unübersichtlich und dauert unnötig länger.

    Deshalb die Frage, ob jemandem sowas bekannt ist.

    Ausserdem will ich nicht den ganzen Absatz, sondern nur so wie oben gezeigt die 2 Wörter markieren.

    Alle genannten Möglichkeiten zielen darauf ab, innerhalb eines Absatzes eine beliebige Zeichenkette anders zu formatieren.

    Wenn du TinyMCE-Advanced installierst (heißt jetzt Advanced Editor Tools), kannst du das sowohl im Classic Block wie auch in normalen Textblöcken verwenden. Damit kannst du ebenfalls beliebige Zeichenketten farblich hervorheben:

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Problem gelöst? Dann ändere doch bitte noch den Status des Threads.

    Thread-Ersteller radarin

    (@radarin)

    Danke @pixolin für Deine Vorschläge. Im Sinne der Frage, resp. Aufgabenstellung (Text markieren und eine span-klasse zuordnen, ohne unnötigen Schnickschnack) ist das Problem nicht gelöst.

    Die Farbeinstellungen im Block so wie oben im Screenshot dargestellt, wirken sich bei mir immer auf den kompletten Block aus, auch wenn nur 1 Wort markiert wurde. Oben direkt im Block habe ich die Möglichkeit die Textfarbe für die Auswahl auszuwählen. Hier wäre nun ein zusätzlicher Eintrag toll, der wenn auch nur in einem Eingabefeld eine Klasse erfassen würde. Das direkt in den Blockeditor rein zu schreiben, wäre wahrscheinlich keine grosse Sache, mir fehlen jedoch die Kenntnisse dafür, so spekuliere ich weiterhin darauf, dass es vielleicht irgendwann noch kommt. In wei weit sich das mit einem Plugin umsetzen liesse, vermag ich auch nicht zu beurteilen.

    Ich meine aber es auch schon gesehen zu haben, auch einzelnen Wörtern eine Hintergrundfarbe zuweisen zu können. Das schaut aber so hingeklatscht aus. Deshalb das SpanTag und die Klasse. Ich will Hintergrund, Rahmen, Radius gezielt definieren. Auch will ich wenn ich einen Pfad darstelle ein entsprechendes Awesome-Font voranstellen.

    Was der Vorschlag mit dem Tiny-Plugin angeht, würde wahrscheinlich so funktionieren, müllt mir aber die Blockdarstellung so dermassen zu, da stellt es mir alle Nackenhaare zu Berge, jetzt wo ich mich mit dem Blockeditor angefreundet habe (und sehr zufrieden damit bin).

    Notgedrungen behelfe ich mir nun mit Shortcodes. Das schaut im Backend natürlich nicht besonders übersichtlich aus, führt aber vorerst zum gewünschten Ergebnis. Somit kann ich, wenn ich ganz grosszügig bin, das Problem als halbwegs gelöst feststellen.

    Und falls sich jemand für Details interessiert, so schaut die Funktion aus:

    // Ausgabe Textmarker formatieren
    // Erklärung
    // ------------------------------
    // Der hervorzuhebende Text wird im Editor in einen Shortcode verpackt:
    // [textmarker farbe='yellow' text='hervorzuhebender Text']
    // Bleibt der Parameter FARBE leer oder man lässt ihn 
    // ganz weg, wird der Text in der vordefinierten Farbe markiert.
    
    add_shortcode('textmarker', 'view_rad_textmarker');
    
    function view_rad_textmarker($atts) {
       $atts = shortcode_atts( array(
          'text' => '',
          'farbe' => '',
       ), $atts, 'textmaker' );
      
       $farbe = $atts['farbe'] ;
      
       if ($farbe == ""){
          $class = "highlight-yellow" ;
       }else{
          $class = "highlight-".$farbe ;
       }
       
       $textmaker = "<span class='".$class."'>" . $atts['text'] . "</span>";
     
       return $textmaker;  
    }
    
    // Beispiel für eine CSS-Klasse:
    //
    // Der Hintergrund um den Text ist so definiert, dass die Ecken unterschiedliche
    // Radien aufweisen und der rechte Rahmen vom Ansetzen des Textmarkers etwas
    // dunkler ist, um einen möglichst realistischen Effekt zu erzielen.
    //
    // .highlight-yellow{
    //    background-color: #FEF04F;
    //    padding: 0px 2px;
    //    -webkit-border-top-left-radius: 15px;
    //    -webkit-border-bottom-right-radius: 5px;
    //    -moz-border-radius-topleft: 15px;
    //    -moz-border-radius-bottomright: 5px;
    //    border-top-left-radius: 15px;
    //    border-bottom-right-radius: 5px;
    //    opacity: 0.8;
    //    border-right-style: solid;
    //    border-right-width: 3px;
    //    border-right-color: #f8e400;}
    //
    // .highlight-blue{
    //    background-color: #CEE7FE;
    //    padding: 0px 2px;
    //    -webkit-border-top-left-radius: 15px;
    //    -webkit-border-bottom-right-radius: 5px;
    //    -moz-border-radius-topleft: 15px;
    //    -moz-border-radius-bottomright: 5px;
    //    border-top-left-radius: 15px;
    //    border-bottom-right-radius: 5px;
    //    opacity: 0.8;
    //    border-right-style: solid;
    //    border-right-width: 3px;
    //    border-right-color: #a7d3fb;}

    Das CSS für die Pfaddarstellung mit Awesomefont:

    .pfad { 
        color: #7A7A7A;
        font-style: italic;
        /*border-color: #7A7A7A;
        border-width: 1px;
        border-style: dashed;*/
        padding: 0em 0.3em 0em 0.3em;
        white-space: nowrap;
    }
    .pfad:before {
        display: inline-block;
        font-family: FontAwesome;
        content: '\f114';
        padding-right: 0.5rem;
    }
    .pfad:after {
        display: inline-block;
        font-family: FontAwesome;
        content: '\f100';
        padding-left: 0.5rem;
    }

    Euch einen schönen Abend und viel Spass beim ausprobieren.

    Moderator Bego Mario Garde

    (@pixolin)

    Somit kann ich, wenn ich ganz grosszügig bin, das Problem als halbwegs gelöst feststellen.

    Da muss ich doch ein wenig schmunzeln: Du bist „ganz großzügig“, weil du dich nach drei Wochen zurückmeldest und einen Thread als „gelöst“ markierst, weil du einen Formatierungswunsch nun (mit fehlerhaftem Code) anders umsetzt?

    Wir bitten darum, Threads als „gelöst“ zu markieren, weil wir unsere ohnehin knappe Zeit für die Beantwortung von Fragen einsetzen möchten, die noch nicht so weitgehend und über ein normales Maß hinaus beantwortet wurden. Wir bekommen für gelöste Threads keine Prämien, Präsente oder Dankschreiben, sondern können bestenfalls das Thema gedanklich abhaken.

    Aber vielen Dank für die „großzügige“ Geste.

    Thread-Ersteller radarin

    (@radarin)

    Tut mir leid, dass ich erst nach drei Wochen dazu gekommen bin, das Ganze nochmals zu testen und eine Lösung zu erarbeiten. Freut mich aber, Dir ein Lächeln ins Gesicht gezaubert zu haben.

    Fehlerhaft? Den Code hab ich so aus meinem WP raus kopiert. Sollte eigentlich aktuell sein.

    Moderator Bego Mario Garde

    (@pixolin)

    Ja, da sind einige Punkt von Codeformatierung bis hin zur abweichenden Bezeichnung des Shortcode textmarker in der Funktion. Aber egal – du hast für dich einen Weg gefunden, deinen Formatierungswunsch umzusetzen und das ist doch die Hauptsache. Nur das mit dem Ausprobieren lassen wir lieber. 😉

    Thread-Ersteller radarin

    (@radarin)

    Du meinst Textmarker und Textmaker? Das Eine der Funktionsname, das Andere eine Variable. Die unterschiedliche Schreibweise ist aber tatsächlich nicht absichtlich. Zugegeben, der ‚gleiche‘ Name für Funktion und Variable ist nicht von Vorteil. Hab das bei mir geändert. Auch der letzte Parameter ‚textmaker‘ in der Funktion ist überflüssig.

    Moderator Bego Mario Garde

    (@pixolin)

    Du verwendest einen Shortcode textmarker, der über eine Funktion view_rad_textmarker() definiert wird – soweit OK. Wenn du in der Funktion allerdings shortcode_atts() verwendest, sollte der letzte Parameter der Shortcode sein:

    shortcode_atts( array $pairs, array $atts, string $shortcode = “ )

    Dass es zusätzlich verwirrend ist, mit einer Variablen textmaker zu arbeiten, hast du bereits selber geschrieben. Mehrzeilige Kommentare im C++Stil (mit vorangestellten Schrägstrichen // sehen zumindest komisch aus, aber dein Code entspricht auch sonst nicht den WordPress Coding Standards. Für deine Website kannst du das handhaben, wie du magst; für ein Code-Beispiel „zum Ausprobieren“ ist das nicht ideal.

    Das if-Statement finde ich unnötig kompliziert. Ich hätte das eher so gelöst:

    function view_rad_textmarker( $atts ) {
    	$atts = shortcode_atts(
    		array(
    			'text'  => '',
    			'farbe' => 'yellow',
    		),
    		$atts,
    		'textmarker'
    	);
    
    	$out = '<span class="highlight-' . esc_attr( $atts['farbe'] ) . '">' . esc_attr( $atts['text'] ) . '</span>';
    
    	return $out;
    }

    Beim Stylesheet sind die auskommentierten CSS-Regel überflüssig und wenn du FontAwesome nutzen möchtest, muss das auch irgendwie eingebunden werden.

    Aber nochmal … wichtig ist doch, dass du für dich (natürlich nur ganz großzügig interpretiert) eine Lösung gefunden hast. 🙂

    Thread-Ersteller radarin

    (@radarin)

    Den CSS Code als Kommentar hab ich in die Funktion geschrieben, um Diese so komplett in meiner Vorlagendatenbank abzulegen. Selbstverständlich kann man die Kommentare, wenn alles läuft auch aus der Funktion entfernen.

    Irgendwo hatte ich mal das Problem mit /**/, dass es aus mir unbekannten Gründen einfach nicht funktioniert hat. Sieht natürlich besser aus.

    Ich hab Deinen Vorschlag ausprobiert, wenn ich das so verwende [textmarker farbe='' text='hervorzuhebender Text'], ist $atts['farbe'] natürlich auch leer, und es funktioniert mit der Klasse .highlight-yellow natürlich nicht. Lasse ich ‚farbe‘ ganz weg, funktioniert es. Wenn ich zusätzlich die Klasse .highlight- definiere, funktioniert es auch. Ohne IF.

    Wenn Du meinst, der Code den ich publiziert habe, sollte nicht so verwendet werden, steht es Dir als Moderator frei ihn zu entfernen. Das stört mich keineswegs, war gut gemeint.

    Gute Nacht.

    Moderator Bego Mario Garde

    (@pixolin)

    Ich hab Deinen Vorschlag ausprobiert, wenn ich das so verwende [textmarker farbe=“ text=’hervorzuhebender Text‘], ist $atts[‚farbe‘] natürlich auch leer, und es funktioniert mit der Klasse .highlight-yellow natürlich nicht.

    Wieso solltest du in einem Shortcode einen Parameter mit einem leeren Attribut übergeben? Das ist genauso sinnfrei, wie wenn du als Attribut „elefant“ übergibst und dich dann beschwerst, dass wahrscheinlich keine CSS-Klasse highlight-elefant definiert wurde.

    Lasse ich farbe ganz weg, funktioniert es.

    Eben.

    Wenn Du meinst, der Code den ich publiziert habe, sollte nicht so verwendet werden, steht es Dir als Moderator frei ihn zu entfernen.

    Da hast du etwas falsch verstanden. 🙂

    Die GPL räumt dir das Recht ein, WordPress nach deinen Wünschen zu nutzen und zu ändern und wenn du diesen Code schick findest, kannst du ihn gerne verwenden. Wir bemühen uns aber hier im Support-Forum, „best practice“ zu vermitteln und (nur) deshalb weise ich darauf hin, dass dein „großzügig“ als Lösung präsentierter Code nicht ganz optimal war. Wieso dir die Lösung mit dem Plugin Advanced Editor Tools nicht zusagt und „die Blockdarstellung so dermassen zumüllt“, kann ich nicht nachvollziehen. Vielleicht schaust du dir das bei Gelegenheit nochmal an.

    Thread-Ersteller radarin

    (@radarin)

    Na toll, ausgiebig geantwortet, aber wegen abgelaufener Session den Text vernichtet. Jetzt hab ich vergessen was ich geschrieben habe. Das Plugin funktioniert ganz einfach nicht.

    Reicht denn nicht die folgende simple Lösung?
    Im Absatzblock auf den Pfeil nach unten klicken, dann auf „A“ (Highlight) klicken:
    Screenshot Einstellungen
    Danach kannst du dann die Farben einstellen:
    Screenshot Einstellungen

    Thread-Ersteller radarin

    (@radarin)

    Nein, mir reicht sie nicht. Es soll so aussehen wie es eben ausschaut, wenn man mit einem Textmaker was markiert. So wie auf dem Screenshot zu Beginn dieses Thread soll es aussehen. Ausserdem hab ich noch weitere Darstellungen für Menueintröge, Pfadangaben, die will ich z.B. mit einem Awesome Font kennzeichnen will. Deshalb die Spanklasse im Quellcode.

    Das funktioniert mit meiner Shortcodelösung einwandfrei. Und ist zuverlässiger als ein überladenes Plugin, das zu konfigurieren ich anscheinend nicht in der Lage bin.

    So wie oben dargestellt funktioniert das bei mir nicht. Textfarbe, ja, Worthintergrund, nein. Immer nur der ganze Block.

    Aber Danke für die Mühe.

    • Diese Antwort wurde geändert vor 1 Woche, 3 Tage von radarin.
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 22)