Project

General

Profile

Actions

Feature #12632

open

TinyMCE: Prepare CSS classes for images

Added by Philipp Gröbelbauer almost 3 years ago. Updated almost 3 years ago.

Status:
New
Priority:
Normal
Assignee:
Carsten Rose
Target version:
Start date:
04.06.2021
Due date:
% Done:

100%

Estimated time:
Discuss:
Prio Planung:
Vote:

Description

Ziel: es soll einfach sein (Mausklick) Images mit einer CSS Klasse spezielle Eigenschaften zuzuweisen. Z.B. einen Rahmen, damit sich das Bild vom Hintergrund abhebt oder mit einer Transparenz, um deutlich zu machen das bei einem Screenshot die Buttons keine aktiven Elemente sind sondern nur zur illustration dienen.

Scheinbar hat TinyMCE schon etwas vorbereitet:


Files

ort.png View ort.png 186 KB Carsten Rose, 04.06.2021 08:26

Related issues

Blocked by QFQ - Feature #12186: TinyMCE Config für ObjekteNewJan Haller20.03.2021

Actions
Actions #1

Updated by Carsten Rose almost 3 years ago

  • TinyMCE / QFQ
    editor-branding=false
    editor-plugins=code link lists searchreplace table textcolor textpattern visualchars image
    editor-toolbar=code searchreplace undo redo | styleselect link table | fontselect fontsizeselect | bullist numlist outdent indent | forecolor backcolor bold italic | image | upload
    
    editor-menubar=false
    editor-statusbar=false
    editor-image_class_list =[ {'title': 'None', 'value': ''} , {'title': 'Border', 'value':'tiny-border'} , {'title': 'Semi-Transparent', 'menu': [{'title': '25% transparent', 'value': '25% transparent'},{'title': '50% transparent', 'value': '50% transparent'},{'title': '75% transparent', 'value': '75% transparent'}] } ]
    
    editor-formats=[{'semitransparent': {'inline ':'span', 'classes' : 'tiny-semi-transparent'}, 'groebigruen': { 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', 'classes': 'groebigruen' } }]
    
    editor-style_formats=[{ 'title': 'Semi-Transparent', 'classes': 'tiny-semi-transparent' }, { 'title': 'Gröbelbauer-Grün', 'classes': 'groebigruen' }]
    
  • CSS
    
    /* Tinymce Classes to add to images*/
    .tiny-border{
        border: 1px solid #BBB;
    }
    
    .tiny-semi-transparent{
        opacity: 0.5;
    }
    
    .tiny-img-dark {
    filter: brightness(50%);
    }
    
Actions #2

Updated by Carsten Rose almost 3 years ago

Actions

Also available in: Atom PDF