Forums

Removing HTML, Insert Image option from Redactor Plugins - Rich Text Editor

Permalink
Hi All,

I am new to the concrete5 world and have been trying to get my head around something which I have promised someone to provide.

I was wondering if anyone can help me with removing the HTML and Insert Image option from the Editor plugins.
I tried exploring the code and found the only supported ones to deselet are the ones registered in the plugin manager (http://documentation.concrete5.org/api/source-class-Concrete.Core.Editor.RedactorEditor.html#117-120): 
$this->pluginManager->register('undoredo', t('Undo/Redo'));
        $this->pluginManager->register('underline', t('Underline'));
        $this->pluginManager->register('concrete5lightbox', t('Lightbox'));
        $this->pluginManager->register('specialcharacters', t('Special Characters Palette'));
        $this->pluginManager->register('table', t('Table'));
        $this->pluginManager->register('fontfamily', t('Font Family'));
        $this->pluginManager->register('fontsize', t('Font Size'));
        $this->pluginManager->register('fontcolor', t('Font Color'));


I am only able to edit the ones above, but I can see the other ones in the redactor javascript but there's no option to disable the html or image from the editor. 
buttons: ['html', 'formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist',
              'outdent', 'indent', 'image', /* concrete5 'file', */ 'link', 'alignment', 'horizontalrule'], // + 'underline'


So why do I need this?
- You dont want the Content Authors to play around with HTML
- If you give option to insert image in the RTE, it might break the overall responsive look and feel.

Any help or direction will really help me finish my project and meet the deadlines. :)

Cheers,
Sharad
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi sharadkap,

I don't believe the HTML view and Insert Image are plugins. To remove them you will likely need to override redactor.js to modify it or use CSS to hide the buttons.

Example: CSS
- this could be added to the theme CSS
#ccm-inline-toolbar-container .fa.fa-code.re-icon.re-html {
    display: none;
}
#ccm-inline-toolbar-container .fa.fa-image.re-icon.re-image {
    display: none;
}

I would reconsider removing the HTML view though. There are situations where modifying HTML may be necessary. Educating the end users on appropriate use might be a better solution.

Images can be added to content using the Content block while preserving the responsiveness and page feel. This can be done using CSS, and like the HTML view, educating users.
sharadkap replied on at Permalink Reply
Thanks for your direction on this. I appreciate that.

I have realised overriding the redactor.js is the best option for me for now and looks easy to achieve. Also, after doing a bit of a research I was able to get it working from the inline scripts as well. Saw a couple of out of the box blocks and seems like it is possible without having to use the Concrete5 ReaactorEditor implementation. I would prefer overriding over this one as I am a bit conscious on authors missing the HTML and Image option to break the overall responsiveness.

The following is the code which works for me (say if I dont want to do this site wide):

$(function() {
    var container = $('.ccm-tab-content');
    container.find('.redactor-content').redactor({
        minHeight: 200,
        buttonsHide : ['html', 'image', 'deleted','unorderedlist', 
                       'orderedlist', 'outdent', 'indent'],
        'concrete5': {
            filemanager: <?php echo $fp->canAccessFileManager()?>,
            sitemap: <?php echo $tp->canAccessSitemap()?>,
            lightbox: true
        }
    });
});



Thanks a bunch for your reply!
Sharad