TinyMCE 4 - html5-Formate

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

TinyMCE 4 - html5-Formate

Post by frase » Tue Sep 05, 2017 11:57 am

Wäre es nicht sinnvoll, die html5-Formate als Standard einzufügen?

https://www.tinymce.com/docs/demo/format-html5/

Hab es gerade (schmerzlich) vermisst.
Die Evolution ist rasant. Das wird wohl in Zukunft immer nötiger werden.

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

Re: TinyMCE 4 - html5-Formate

Post by manu » Tue Sep 05, 2017 2:43 pm

Das ist sicher sinnvoll. Die style formats kannst Du ja 1-2 aus dem Beispiel abzweigen in deine init datei einfügen und gut ist. Erfolgsmeldungen sind immer willkommen! Willkommen wäre auch eine Taskforce, die sich einigt über die Entrümpelung der toolbar und deren Layout auf variable breiten.

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

Re: TinyMCE 4 - html5-Formate

Post by frase » Tue Sep 05, 2017 3:09 pm

Hier mal eine "fontawesome-extended", wie ich sie gerne verwende.
Gestrichen sind:
Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe
Hinzugefügt sind (einige) html5-Elemente.
Es gibt nur eine Toolbar. Alle Elemente hintereinander, fließend.
Schriftgröße der Buttons "etwas" größer - irgendwo war was auf 12px eingestellt, das war mir zu klein.
In diesem Beispiel ist sind noch die Plugins "syntaxhl" und "quotes" (german quotes) drin - das ist wohl für die Allgemeinheit nicht interessant.
Am Ende sind die html5-Elemente drin, die dann unter "Formate" zum Aufklappen erscheinen.
Die vorletzte Zeile habe ich auf "false" gesetzt, weil man die Blöcke nicht unbedingt immer sehen muss.
Die beiden ausgeblendeten Zeilen nehme ich auch gerne, würde ich aber nicht als Standard machen ;-)

Code: Select all

{
  selector: "%SELECTOR%",
  theme: "modern",
  skin: "lightgray",
  toolbar_items_size: "14px",
  menubar: false,
  plugins: [
    "advlist anchor autolink autosave charmap code colorpicker contextmenu emoticons fullscreen hr",
    "image importcss insertdatetime link lists media nonbreaking paste syntaxhl quotes",
    "save searchreplace table textcolor visualblocks visualchars wordcount fontawesome noneditable"
  ],
  external_plugins: {
    "fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
  },
  toolbar1: "save | fullscreen | code | undo redo | formatselect | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | cut copy paste pastetext | bullist numlist outdent indent blockquote | link unlink anchor | image media | hr | nonbreaking | removeformat | visualblocks visualchars | searchreplace | charmap | fontawesome | emoticons | subscript superscript | table | inserttime | syntaxhl | germanquotes",
  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[*],i[*]'
//  valid_elements : '*[*]',
//  extended_valid_elements : '*[*]',
  style_formats_merge: true,
  style_formats: [{
    title: 'html5', items: [
        { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
        { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
        { title: 'hgroup', block: 'hgroup', wrapper: true },
        { title: 'aside', block: 'aside', wrapper: true },
        { title: 'figure', block: 'figure', wrapper: true }
    ]
}],
  visualblocks_default_state: false,
  end_container_on_empty_block: true,
} 
Ach - da mich auch noch etwas anderes gestört hat, habe ich im CSS in meinem Seiten-Template auch noch stehen:

Code: Select all

body.mce-content-body {
    width: 98%;
    padding: 1%;
}
.mce-branding-powered-by {
    display: none;
} 
Nachtrag:
Ich verwende prinzipiell die "locale" Version.
Andersherum musste ich manchmal 10-15 sec warten, bis der Tiny erschien.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: TinyMCE 4 - html5-Formate

Post by cmb » Sun Sep 17, 2017 10:56 am

manu wrote:Willkommen wäre auch eine Taskforce, die sich einigt über die Entrümpelung der toolbar und deren Layout auf variable breiten.
Man könnte sicher darüber nachdenken, aber letztlich gibt es gewiss viele individuelle Wünsche, und alles können wir ja gar nicht vorgeben. Es gibt jetzt schon 8 inits. Sehr gelungen finde ich die Lösung im CKEditor 2.2.1. Dort können die 4 Standard inits in der Pluginkonfiguration geändert werden, und es gibt gleich einen "Configurator" mit dem die Konfiguration zum Kinderspiel wird, und der dann das entsprechende JavaScript liefert, was einfach per Copy&Paste in die Pluginkonfiguration eingetragen werden kann. Gibt es einen entsprechenden "Configurator" nicht auch für den TinyMCE?
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply