Tinymce - bootstrap Plugin Installation
Moderator: Tata
Tinymce - bootstrap Plugin Installation
Ich sah auf https://github.com/migliori/tinymce-bootstrap-plugin das Tinymce4-Bootstrap-Plugin.
Wenn ich zu den Skript-Einträgen wie dort vorgeschlagen
<script>
tinymce.init({
selector: "textarea",
plugins: [
"bootstrap"
],
toolbar: "bootstrap"
});
</script>
hinzufüge, ist der größte Teil des Tinymce verschwunden inklusive der Speicherfunktion. Das Plugin funktioniert allerdings....Wer kennt sich hier aus ?
Wenn ich zu den Skript-Einträgen wie dort vorgeschlagen
<script>
tinymce.init({
selector: "textarea",
plugins: [
"bootstrap"
],
toolbar: "bootstrap"
});
</script>
hinzufüge, ist der größte Teil des Tinymce verschwunden inklusive der Speicherfunktion. Das Plugin funktioniert allerdings....Wer kennt sich hier aus ?
Re: Tinymce - bootstrap Plugin Installation
Erstmal: Toll, dass es das Plugin jetzt kostenlos gibt. Gut dass du es gefunden hast.
Es gibt ein paar Probleme.
Du musst in deinem Template ziemlich weit oben das bootstrap.min.css und falls du z.B. die Accordions nutzen willst auch noch bootstrap.min.js (unten) einbinden. Sonst funktioniert es zwar im Editor aber nicht auf der Seite selbst.
Außerdem musst du die glyphicon-, icomoon- und sourcecodepro-Fonts einbinden, damit sie im Frontend verfügbar sind.
Das Bootstrap-Plugin kopierst du in den Ordner:
.. \plugins\tinymce4\tinymce\plugins\
Das sollte klar sein.
Danach solltest du dir eine neue ini-Datei anlegen.
Ich habe mir die init_fontawesome.js unter dem Namen init_fontawesome_bootstrap.js kopiert und folgende Änderungen eingefügt:
Code: Select all
{
selector: "%SELECTOR%",
theme: "modern",
skin: "lightgray",
toolbar_items_size: "small",
menubar:false,
plugins: [
"advlist anchor autolink autosave charmap code colorpicker contextmenu emoticons fullscreen hr",
"image importcss insertdatetime link lists media nonbreaking paste",
"save searchreplace table textcolor visualblocks visualchars wordcount fontawesome noneditable bootstrap"
],
bootstrapConfig: {
'imagesPath': '%CMSIMPLE_ROOT%/userfiles/imgages' // replace with your images folder path
},
external_plugins: {
"fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
},
toolbar1: "save | fullscreen code formatselect fontselect fontsizeselect styleselect",
toolbar2: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify cut copy paste pastetext | bullist numlist outdent indent blockquote",
toolbar3: "undo redo | link unlink anchor image media | hr nonbreaking removeformat visualblocks visualchars | forecolor backcolor | searchreplace | charmap fontawesome",
toolbar4: "emoticons subscript superscript | table insertdatetime help | bootstrap",
image_advtab: true,
image_title: true,
file_browser_callback: "%FILEBROWSER_CALLBACK%",
content_css: "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
importcss_append:true,
style_formats_autohide: true,
importcss_selector_filter: /(?:([a-z0-9\-_]+))(\.[a-z0-9_\-\.]+)$/i,
%LANGUAGE%
element_format: "%ELEMENT_FORMAT%",
block_formats: "%HEADERS%;p=p;div=div;code=code;pre=pre;dt=dt;dd=dd",
"insertdatetime_formats": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],
relative_urls: true,
convert_urls: false,
entity_encoding: "raw",
noneditable_noneditable_class: 'fa',
extended_valid_elements: 'span[*]'
}
Anschließend musst du noch eine/zwei deutsche Sprachdatei(en) für das Plugin erstellen.
Im Ordner: ... \plugins\tinymce4\tinymce\plugins\bootstrap\langs\
Ich habe das alles in meinem Test zum Laufen bekommen. Aber nicht die Sache mit dem Bilderordner.
Eventuell nimmt sich @manu als Tiny-Spezialist der Sache an.
Man sollte allerdings bedenken, dass es sich um Bootstrap 3 handelt - ist schon veraltet.
Re: Tinymce - bootstrap Plugin Installation
Ja danke - es kommen von mir noch in diesem Monat einige Bt3-templates wie in Bootpress.org u.a. Ich arbeite auch an BT4.
Ich habe nur noch Probleme mit dem Aussehen des schmalen Modus, den auch BBfriend nicht richtig lösen konnte. Die Templates haben dann entsprechende bootstrap-min-css-js aktiviert.
Ich habe nur noch Probleme mit dem Aussehen des schmalen Modus, den auch BBfriend nicht richtig lösen konnte. Die Templates haben dann entsprechende bootstrap-min-css-js aktiviert.
Last edited by cmss on Thu Mar 12, 2020 2:11 pm, edited 1 time in total.
Re: Tinymce - bootstrap Plugin Installation
Da bin ich mal gespannt.
Es ist immer wieder das Problem, dass man viele tolle Sachen machen könnte, diese aber im Editor kaum oder gar nicht umsetzbar sind. So auch die Bootstrap-Geschichten. Auch bei meinen Templates stoße ich immer wieder an Grenzen: "Wie mache ich das dem Benutzer klar?" und "Wie mache ich das simple?"
Neben einigen Classic-Template-Vertretern gibt es offensichtlich viele, die moderne Seiten haben wollen, aber "alles mit einem Klick" einstellbar. - Eine Zwickmühle. Das läuft dann der CMSimple-Philosophie - nämlich "simple" - zuwider.
Re: Tinymce - bootstrap Plugin Installation
Ich habe inzwischen eine voll lauffähige Smartmenus bootstrap3-Version mit 9 Ebenen.
Momentan arbeite ich nur noch an den <span class="caret"></span> , das nicht automatisch hochkommen will , d.h. ich habe ... noch ... keine Pfeile. Auf https://codepen.io/costh/pen/YXYPGx geht es.
$('a.has-submenu span.caret').text(); oder $('a').find(".has-submenu").html( $('a').text() + '<span class="caret">i</span>' ); Ich brauche das caret auch für die Dropdowns mit +- im 300er-Modus.
d.h ..>Dropdown <span class="caret"></span></a>.
Ein css :after geht - aber wie, ist aber auch keine volle Lösung. Daher sind Lösungsvorschläge willkommen.
Ansonsten sind alle Farben von Bootpress.org einfach austauschbar durch Tausch der bootstrap.min.css
Statt bootstrap_menu.php benutze ich ein wenig jquery, das man auf php umschreiben könnte, wenn man will.
Ich lege morgen Nachmittag mal eine Alpha auf https://github.com/g7sim/Bootstrap3-XH -
P.S. Beta 1 geht jetzt
Die Endversion hat dann eine Suchfunktion, einen Seitenbalken oder einen header oder beides etc. Es gibt auch ein schönes grid.js für Bootstrap 3, mit dem man Seiten in unregelmässige Raster aufteilen kann ohne einen Seitenbalken benmutzen zu müssen,
(Bootstrap4 ist nur noch Formsache fürs Wochenende : geht doch : https://github.com/g7sim/Bootstrap4-XH.)
Momentan arbeite ich nur noch an den <span class="caret"></span> , das nicht automatisch hochkommen will , d.h. ich habe ... noch ... keine Pfeile. Auf https://codepen.io/costh/pen/YXYPGx geht es.
$('a.has-submenu span.caret').text(); oder $('a').find(".has-submenu").html( $('a').text() + '<span class="caret">i</span>' ); Ich brauche das caret auch für die Dropdowns mit +- im 300er-Modus.
d.h ..>Dropdown <span class="caret"></span></a>.
Ein css :after geht - aber wie, ist aber auch keine volle Lösung. Daher sind Lösungsvorschläge willkommen.
Ansonsten sind alle Farben von Bootpress.org einfach austauschbar durch Tausch der bootstrap.min.css
Statt bootstrap_menu.php benutze ich ein wenig jquery, das man auf php umschreiben könnte, wenn man will.
Ich lege morgen Nachmittag mal eine Alpha auf https://github.com/g7sim/Bootstrap3-XH -
P.S. Beta 1 geht jetzt
Die Endversion hat dann eine Suchfunktion, einen Seitenbalken oder einen header oder beides etc. Es gibt auch ein schönes grid.js für Bootstrap 3, mit dem man Seiten in unregelmässige Raster aufteilen kann ohne einen Seitenbalken benmutzen zu müssen,
(Bootstrap4 ist nur noch Formsache fürs Wochenende : geht doch : https://github.com/g7sim/Bootstrap4-XH.)
Last edited by cmss on Tue Mar 17, 2020 9:42 pm, edited 7 times in total.
Re: Tinymce - bootstrap Plugin Installation
ist ja alles soweit richtig so. Natürlich muss die Site auch mit Bootstrap entwickelt sein - also die stylesheets und js files eingebunden sein, sonst macht es ja keinen Sinn. Der wirkliche Bringer wären die Grid Templates, die nicht nur eingebunden, sondern auch editiert werden können. Ich schau mir das mal an, es wird aber sicher erst im Laufe der nächsten Woche sein.
Gruss manu
Re: Tinymce - bootstrap Plugin Installation
Das beste wäre natürlich ein Plugin wie das FA-Plugin.
Es gibt neben dem https://github.com/migliori/tinymce-bootstrap-plugin auch
und ein tinymce https://github.com/jeffhehe/tiny-bs-grid Grid-Plugin
sowie separate bootstrap-grid.css'se
Bootsptrap 3 : https://github.com/StefanoVollono/bootstrap-3-grid
Bootstrtap 4 : https://github.com/m-spyratos/bootstrap-4-grid und https://github.com/dmhendricks/bootstrap-grid-css)
und für ckeditor https://github.com/kaido24/btgrid btgrid (3)
und https://github.com/AzrielOmega/cmsgrid ckeditor grid - editor (läuft auch mit bt4)
(Daneben gibt es auf Github auch grid.js'se für unsymmetische Layouts.)
Es gibt neben dem https://github.com/migliori/tinymce-bootstrap-plugin auch
und ein tinymce https://github.com/jeffhehe/tiny-bs-grid Grid-Plugin
sowie separate bootstrap-grid.css'se
Bootsptrap 3 : https://github.com/StefanoVollono/bootstrap-3-grid
Bootstrtap 4 : https://github.com/m-spyratos/bootstrap-4-grid und https://github.com/dmhendricks/bootstrap-grid-css)
und für ckeditor https://github.com/kaido24/btgrid btgrid (3)
und https://github.com/AzrielOmega/cmsgrid ckeditor grid - editor (läuft auch mit bt4)
(Daneben gibt es auf Github auch grid.js'se für unsymmetische Layouts.)
Re: Tinymce - bootstrap Plugin Installation
I am far from code and use acme tinymcee4 editor with bootstrap support. Esy install, as most CMSimple XH stuff. I did not manage with tinymcee5
May be some masters could.
http://test.sima.spb.ru/soft/tm4acme.zip
May be some masters could.
http://test.sima.spb.ru/soft/tm4acme.zip
Aleksei
Re: Tinymce - bootstrap Plugin Installation
The clean - version of cmsimple (github.com/g7sim) has https://github.com/jeffhehe/tiny-bs-grid (bt3-grid and bt4-grid) and https://github.com/migliori/tinymce-bootstrap-plugin (bt3) under configuration : flexible integrated.
(At github is https://github.com/manu37/tinymce5 )
A bt4-plugin for tinymce5 is at https://codecanyon.net/item/tinymce-boo ... n/10086522 for 39 Euro.
(At github is https://github.com/manu37/tinymce5 )
A bt4-plugin for tinymce5 is at https://codecanyon.net/item/tinymce-boo ... n/10086522 for 39 Euro.