Am avut ieri nevoie de adăugarea unui buton în editor, un buton ce urma să fie responsabil cu inserarea unui mark-up simplu, ce ar permite acest layout în fronted:
Treaba asta are nevoie de mai mulți pași:
// încărcăm editor-style.css din root-ul temei, astfel încât tinymce să afișeze și stilurile noastre
add_action('admin_init', function () {
add_editor_style();
});
// Cum tinymce este un editor scris în JS, avem nevoie de JS pentru a îl extinde:
add_filter('mce_external_plugins', function ($plugins) {
$plugins['pulled_quote'] = get_template_directory_uri() . "/pulled-quote.js";
return $plugins;
});
// adăugăm un buton în editor:
add_filter('mce_buttons', function ($buttons) {
array_push($buttons, 'pulled_quote');
return $buttons;
});
În pulled-quote.js avem așa:
( function() {
tinymce.PluginManager.add('pulled_quote', function(editor, url) {
editor.addButton('pulled_quote', { text: 'Pulled Quote', cmd: 'pulled_quote', icon: false });
editor.addCommand('pulled_quote', function() {
var text = editor.selection.getContent({
'format': 'html'
});
placeholder = text || 'Text';
var content = '<div class="pulledQuote"><div class="pulledQuote__content">' + placeholder + '</div><div class="pulledQuote__quote"><blockquote>quote</blockquote></div></div>';
if (text.length === 0) {
editor.insertContent(content);
} else {
editor.execCommand('mceReplaceContent', false, content);
}
});
});
} )();
Toată povestea asta adaugă un buton în toolbar-ul tinymce:
La click se întâmplă unul din următoarele două lucruri:
- Dacă este un text selectat, îl „împachetează” în markup-ul nostru;
- dacă nu e nici un text selectat, introduce markup-ul cu un text dummy.
Tot markup-ul este rezonabil de simplu și nu îl folosim în nici un alt loc, deci putem să-l ținem fără probleme doar în JS, dar dacă ar fi fost ceva mai complex de atât, cu siguranță aș fi folosit un tempalte extern.
Acum să-l facem să arate și bine:
.pulledQuote {
display: flex;
justify-content: space-between;
}
.pulledQuote__content {
width: 65%;
}
.pulledQuote__content,
.pulledQuote__quote {
outline: 2px dashed #ddd;
margin: -5px;
padding: 5px;
}
Și cam atât. Frontend-ul arată ca mai sus, editorul arată așa: