Project

General

Profile

Feature #12632

TinyMCE: Prepare CSS classes for images

Added by Philipp Gröbelbauer 5 months ago. Updated 5 months ago.

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

100%

Estimated time:
Discuss:

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 (186 KB) ort.png Carsten Rose, 04.06.2021 08:26

Related issues

Blocked by QFQ - Bug #12186: TinyMCE Config für ObjekteNewCarsten Rose20.03.2021

Actions
#1

Updated by Carsten Rose 5 months 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%);
    }
    
#2

Updated by Carsten Rose 5 months ago

  • Blocked by Bug #12186: TinyMCE Config für Objekte added

Also available in: Atom PDF