Tinymce - bootstrap Plugin Installation

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Post Reply
cmss
Posts: 208
Joined: Mon Jan 02, 2017 6:15 pm

Tinymce - bootstrap Plugin Installation

Post by cmss » Thu Mar 12, 2020 9:06 am

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 ?

frase
Posts: 3595
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Tinymce - bootstrap Plugin Installation

Post by frase » Thu Mar 12, 2020 10:30 am

cmss wrote:
Thu Mar 12, 2020 9:06 am
... ist der größte Teil des Tinymce verschwunden inklusive der Speicherfunktion. Das Plugin funktioniert allerdings....Wer kennt sich hier aus ?
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[*]'
}
Diese Datei musst du in der Tiny-Konfiguration aktivieren.
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.

cmss
Posts: 208
Joined: Mon Jan 02, 2017 6:15 pm

Re: Tinymce - bootstrap Plugin Installation

Post by cmss » Thu Mar 12, 2020 11:52 am

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.
Last edited by cmss on Thu Mar 12, 2020 2:11 pm, edited 1 time in total.

frase
Posts: 3595
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Tinymce - bootstrap Plugin Installation

Post by frase » Thu Mar 12, 2020 1:30 pm

cmss wrote:
Thu Mar 12, 2020 11:52 am
... es kommen von mir noch in diesem Monat einige Bt3-templates wie in Bootpress.org u.a. Ich arbeite auch an BT4. ...
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.

cmss
Posts: 208
Joined: Mon Jan 02, 2017 6:15 pm

Re: Tinymce - bootstrap Plugin Installation

Post by cmss » Thu Mar 12, 2020 1:50 pm

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.)
Last edited by cmss on Tue Mar 17, 2020 9:42 pm, edited 7 times in total.

manu
Posts: 920
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: Tinymce - bootstrap Plugin Installation

Post by manu » Thu Mar 12, 2020 3:33 pm

frase wrote:
Thu Mar 12, 2020 10:30 am
...

Eventuell nimmt sich @manu als Tiny-Spezialist der Sache an.
Man sollte allerdings bedenken, dass es sich um Bootstrap 3 handelt - ist schon veraltet.
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

cmss
Posts: 208
Joined: Mon Jan 02, 2017 6:15 pm

Re: Tinymce - bootstrap Plugin Installation

Post by cmss » Thu Mar 12, 2020 3:43 pm

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.)

ustalo
Posts: 105
Joined: Mon Aug 16, 2010 7:42 am
Location: Russia
Contact:

Re: Tinymce - bootstrap Plugin Installation

Post by ustalo » Wed May 13, 2020 5:56 am

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
Aleksei

cmss
Posts: 208
Joined: Mon Jan 02, 2017 6:15 pm

Re: Tinymce - bootstrap Plugin Installation

Post by cmss » Sat May 16, 2020 6:24 pm

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.

Post Reply