Image Classes for TinyMCE 4

Oft gestellte Fragen
admin
Administrator
Posts: 11
Joined: Sun 18. Nov 2012, 13:37

Image Classes for TinyMCE 4

Postby admin » Sun 15. Nov 2015, 11:48

Image Im TinyMCE 4 kann man Klassen für Bilder bereitstellen, die dann im Bilddialog als Selectbox zur Auswahl stehen und dem Bild zugeordnet werden können. Diese Klassen können auch gruppiert werden. Die Klassen müssen in der stylesheet.css des Templates definiert werden.

Image In TinyMCE 4 you can provide CSS classes for images, then the image dialog provides a select box to choose from, and the CSS classes can be assigned to the image. These CSS classes can be grouped. The CSS classes must be defined in the stylesheet.css of the template.

Image Klassen für die stylesheet.css des Templates:
Image classes for stylesheet.css of the template:

Code: Select all

/* 
##############################
  E D I T O R  C L A S S E S 
##############################
*/
.tmce_left {max-width: 45%; float: left; margin: 0 16px 20px 0;}
.
tmce_right {max-width: 45%; float: right; margin: 0 0 20px 16px;}
.
tmce_centered {max-width: 96%; display: block; margin: 0 auto 20px auto;}
.
tmce_border {border: 5px solid #998;}
.tmce_noborder {border: 0;} 


Image Hier eine init_customized.js, die Ihr im Verzeichnis ./plugins/tinymce/inits/ ablegen und in der CMS Konfiguration aktivieren könnt:
Image This init_customized.js you can upload to the folder ./plugins/tinymce/inits/ and activate in the CMS Configuration:

Code: Select all

var tinyConfig = {
    selector: "cmsimple-editor",
    skin: "cmsimple",
    block_formats: "h1 page=h1;h2 page=h2;h3 page=h3;Div=div;Paragraph=p;Header 4=h4;Header 5=h5;Header 6=h6;code=code;pre=pre",
    toolbar_items_size: "small",
    fontsize_formats: "8px 10px 12px 14px 15px 16px 18px 20px 24px 26px 30px 36px",
    entity_encoding : "named",
    entities : "160,nbsp",
    element_format : "html",
    image_title: true,
    autosave_ask_before_unload: true,
    plugins: [
        "autosave advlist autolink lists link image media charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen nonbreaking",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern importcss"
    ],
    image_dimensions: false,
    image_advtab: true,
    importcss_append: true,
    importcss_groups: [
        {title: "Table styles", filter: /^(td|tr|table)\./},
        {title: "Block styles", filter: /^(div|p|ul|ol|h1|h2|h3|h4|h5|h6)\./},
        {title: "Image styles", filter: /^(img)\./},
        {title: "Other styles"}
    ],
    style_formats: [
        {title: "New Page", items: [
            {title: "h1 page", format: "h1"},
            {title: "h2 page", format: "h2"},
            {title: "h3 page", format: "h3"}
        ]},
        {title: "Headers", items: [
            {title: "Header 4", format: "h4"},
            {title: "Header 5", format: "h5"},
            {title: "Header 6", format: "h6"}
        ]},
        {title: "Inline", items: [
            {title: "Bold", icon: "bold", format: "bold"},
            {title: "Italic", icon: "italic", format: "italic"},
            {title: "Underline", icon: "underline", format: "underline"},
            {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
            {title: "Superscript", icon: "superscript", format: "superscript"},
            {title: "Subscript", icon: "subscript", format: "subscript"},
            {title: "Code", icon: "code", format: "code"}
        ]},
        {title: "Blocks", items: [
            {title: "Paragraph", format: "p"},
            {title: "Div", format: "div"},
            {title: "Blockquote", format: "blockquote"},
            {title: "Pre", format: "pre"}
        ]},
        {title: "Alignment", items: [
            {title: "Left", icon: "alignleft", format: "alignleft"},
            {title: "Center", icon: "aligncenter", format: "aligncenter"},
            {title: "Right", icon: "alignright", format: "alignright"},
            {title: "Justify", icon: "alignjustify", format: "alignjustify"}
        ]}
    ],
    image_class_list: [
        {title: 'left border', value: 'tmce_left tmce_border'},
        {title: 'Keine Klasse', value: ''},
        {title: 'left no border', value: 'tmce_left tmce_noborder'},
        {title: 'right border', value: 'tmce_right tmce_border'},
        {title: 'right no border', value: 'tmce_right tmce_noborder'},
        {title: 'centered border', value: 'tmce_centered tmce_border'},
        {title: 'centered no border', value: 'tmce_centered tmce_noborder'},
    ],
    menu: {
        edit: {title: "Edit", items: "cut copy paste pastetext searchreplace | undo redo | selectall"},
        insert: {title: "Insert", items: "image link charmap hr nonbreaking"},
        view: {title: "View", items: "visualaid visualblocks visualchars | fullscreen code"},
        format: {title: "Format", items: "formats | bold italic underline strikethrough superscript subscript | removeformat"},
        table: {title: "Table", items: "inserttable tableprops deletetable | cell row column"},
        tools: {title: "Tools", items: "spellchecker code"}
    },
    menubar: "edit format insert view table",
    toolbar: "save code fullscreen | formatselect fontselect fontsizeselect | searchreplace cut copy paste pastetext | alignleft aligncenter alignright alignjustify | bullist numlist | blockquote | outdent indent |  bold italic | underline strikethrough | superscript subscript | forecolor backcolor | removeformat | link unlink | image charmap hr nonbreaking | table | visualblocks emoticons | undo redo"
};

Image Den Codeblock image_class_list könnt Ihr auch in andere init-Dateien einfügen, die könnten aber bei einem Update überschrieben werden. Deshalb ist es bei individuellen Änderungen immer besser, eine der vorhandenen init-Dateien zu kopieren, umzubenennen und dann zu bearbeiten und zu aktivieren.

Image The code block image_class_list you also can add to other ini-files. But these files could be overwritten during an update. Therefore it is always the better way for individual changes, to copy an existing init file, rename it (maybe init_customized.js), and then edit and activate the customized init-file.
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Return to “FAQ - Frequently asked Questions”

Who is online

Users browsing this forum: No registered users and 1 guest