Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to disable source button in ckeditor 4

I am using ckeditor version 4 as text editor in my website for user but I want my website secure, so that's why I want to disable the ckeditor source button... so that user cannot add any kind of code in my website.

ckeditor config.js file is by default empty; what is the setting for custom toolbar?

This is the file where I am using ckeditor:

<textarea name="article_content" id="article_content" rows="5" cols="50" style="width:90%; margin-bottom:15px;"></textarea>
    <script type="text/javascript">
            CKEDITOR.replace( 'article_content',
            {
filebrowserBrowseUrl :'<?php echo base_url(); ?>asset/ckeditor/filemanager/browser/default/browser.html?Connector=<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/connector.php',
filebrowserImageBrowseUrl : '<?php echo base_url(); ?>asset/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/connector.php',
filebrowserFlashBrowseUrl :'<?php echo base_url(); ?>asset/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/connector.php',
filebrowserUploadUrl  :'<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/upload.php?Type=File',
filebrowserImageUploadUrl : '<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
filebrowserFlashUploadUrl : '<?php echo base_url(); ?>asset/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
                });
            </script>

Does anybody know how to customize the toolbar?

like image 396
user2715321 Avatar asked Aug 25 '13 11:08

user2715321


People also ask

How do I enable source in CKEditor?

To enable this plugin, basically add extraPlugins: 'sourcedialog' to editor's config: // Inline editor. CKEDITOR. inline( 'editable', { extraPlugins: 'sourcedialog' }); // Classic (iframe-based) editor.

What is CKEditor source?

The Source Dialog plugin provides an easy way to edit raw HTML source of the editor content, similarly to what is possible with the Source Editing Area plugin for classic editor, but using a dialog window.

How do I customize my CKEditor toolbar?

The simplest way to configure the toolbar is to use the dedicated toolbar configurator that is available in each editor installation package starting from CKEditor 4.5. The editor instance below was configured by using the accessible "toolbar groups" approach, with some unwanted buttons removed by setting the config.

What is the output of CKEditor?

CKEditor 4 offers a flexible output formatting system that gives developers full control over what the HTML code produced by the editor will look like. It is possible to define: When to indent tags (each tag may have a different configuration) and which indentation method to use (tabs, spaces).


2 Answers

Either by:

CKEDITOR.replace( 'article_content', {
    removePlugins: 'sourcearea',
    // The rest of options...
} );

Or:

CKEDITOR.replace( 'article_content', {
    removeButtons: 'Source',
    // The rest of options...
} );

You can also redefine toolbar completely by using config.toolbar. Read more about it in the Toolbar Customization Guide.

like image 107
Reinmar Avatar answered Oct 06 '22 01:10

Reinmar


You can remove any button from CKeditor toolbar by using config.removeButton command. Write this line in your config.js file

config.removeButtons = 'Source';

if you want to remove multiple items do this

config.removeButtons = 'Anchor,Subscript,Superscript,Strikethrough,Source';

like image 34
Usman Shaukat Avatar answered Oct 06 '22 00:10

Usman Shaukat