Faloude Faloude - 3 months ago 11
PHP Question

SilverStripe wysiwyg style constraints

Is there any way to prevent certain custom wysiwyg styles to be applied to certain HTML elements?

Suppose I have two styles called "red" and "framed". One colours text red and the latter puts a frame around photos.

Can I control which styles are available when highlighting text or an image? For example, I want the style "framed" not to be available when highlighting text and the style "red" not showing in the styles dropdown menu when highlighting an image.

wmk wmk
Answer

Tinymce configuration is kinda tricky in silverstripe, though it looks easy once you got it running.

Jonom wrote down some configs and put it on Github, called tinytidy module, there you might find a possile solution. So best is to try out this module as it adds some custom css to the editor.

Copied from there, put in your /mysite/_config.php:

$formats = array(

    // Define the styles that will be available in TinyMCE's dropdown style menu
    // * Use 'selector' to specify which elements a style can be applied to
    // * See Headings example below for explanation of different settings
    // * Using 'classes' allows a class to be combined with others while 'attributes'=>'style' removes other classes before applying
    // Text styles

    array(
        'title' => 'Selected text'
    ),
    array(
        'title' => 'highlight red',
        'classes' => 'red',
        'inline' => 'span',
        'selector' => 'i,em,b,strong,a'
    ),

    array(
        'title' => 'Images',
    ),
    array(
        'title' => 'Put a frame around a photo',
        'attributes' => array('class'=>'framed'),
        'selector' => 'img'
    )
);
//Set the dropdown menu options
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);

hope that helps, wmk

Comments