How do I configure JCE Editor?

Text Version

In this tutorial we will be covering the JCE configuration options.

In this tutorial we will be covering the JCE configuration options.

Begin by navigating to Components > JCE Administration > Configuration

Begin by navigating to Components > JCE Administration > Configuration

Editor Width - You can set a default width of the editor in px or %. If you do not enter a value it will use the default value supplied by Joomla.
Editor Height - You can set a default height of the editor in px or %. If you do not enter a value it will use the default value supplied by Joomla.
Editor State - This setting will turn the editor on or off.
Editor Toggle Label - You can set the language string used for the editor toggle button.
Inline Table Editing - This will enable the inline table editing function for Firefox. This is known to be buggy.
Layout Rows - The number of rows of buttons to use in the editor layout.

Editor Width - You can set a default width of the editor in px or %. If you do not enter a value it will use the default value supplied by Joomla.
Editor Height - You can set a default height of the editor in px or %. If you do not enter a value it will use the default value supplied by Joomla.
Editor State - This setting will turn the editor on or off.
Editor Toggle Label - You can set the language string used for the editor toggle button.
Inline Table Editing - This will enable the inline table editing function for Firefox. This is known to be buggy.
Layout Rows - The number of rows of buttons to use in the editor layout.

Cleanup HTML - This will automatically attempt to cleanup bad HTML, close tags, remove empty tags for you automatically.
Relative URLs - Use relative URLs in links instead of absolute. This is highly recommended in case you ever need to move your content.
Fix Table Elements - When invalid table elements are found JCE will automatically fix them to product XHTML valid code.
Plugin Mode - If you enable this, & and ' characters are not encoded when you save content. This is not recommended unless you have a specific reason to.
Fix List Elements - When invalid list elements are found JCE will automatically fix them to product XHTML valid code.
Prohibited Elements - A comma seperated list of elements that you never want to allow saved into your content. This can help prevent certain types of attacks.
Extended Elements - If you enable Cleanup HTML and elements that you need are removed by JCE you can add those elements here and they will no longer be removed.
Event Elements - A comma seperated list of elements that you add javascript events to, like onclick, onload, etc.

Cleanup HTML - This will automatically attempt to cleanup bad HTML, close tags, remove empty tags for you automatically.
Relative URLs - Use relative URLs in links instead of absolute. This is highly recommended in case you ever need to move your content.
Fix Table Elements - When invalid table elements are found JCE will automatically fix them to product XHTML valid code.
Plugin Mode - If you enable this, & and ' characters are not encoded when you save content. This is not recommended unless you have a specific reason to.
Fix List Elements - When invalid list elements are found JCE will automatically fix them to product XHTML valid code.
Prohibited Elements - A comma seperated list of elements that you never want to allow saved into your content. This can help prevent certain types of attacks.
Extended Elements - If you enable Cleanup HTML and elements that you need are removed by JCE you can add those elements here and they will no longer be removed.
Event Elements - A comma seperated list of elements that you add javascript events to, like onclick, onload, etc.

Force Container Element - Force contents you've entered to be within an element. You can select the type of element to place it in. If you select Paragraph and enter the text "This is my text." in the editor, the code will be converted to "<p>This is my text.</p>".
Newlines - You can select the element to use for new lines. These are created when you press the enter or return key.
Editor Content Class - If you want to force a custom class for the editor background you can set that here. This is useful if you have a site with a dark background, as by default that will be shown in the editor.
Custom Editor Content Class - If you set Editor Content Class to custom you can enter the class to use here.
Use Template CSS - You can choose whether to use the template's css file in the editor. This way you can have a better idea of what the final content will look like.
Use Custom CSS file - You can also load a custom CSS file to use in the editor window.

Force Container Element - Force contents you've entered to be within an element. You can select the type of element to place it in. If you select Paragraph and enter the text This is my text. in the editor, the code will be converted to <p>This is my text.</p>.
Newlines - You can select the element to use for new lines. These are created when you press the enter or return key.
Editor Content Class - If you want to force a custom class for the editor background you can set that here. This is useful if you have a site with a dark background, as by default that will be shown in the editor.
Custom Editor Content Class - If you set Editor Content Class to custom you can enter the class to use here.
Use Template CSS - You can choose whether to use the template's css file in the editor. This way you can have a better idea of what the final content will look like.
Use Custom CSS file - You can also load a custom CSS file to use in the editor window.

Custom Configuration Variables - If you have any custom Tiny MCE config variables you can set them here.
Custom Callback File - You can set a URL containing callback functions for Tiny MCE callback commands. This needs to be a URL relative to your site root.
Upload Method - You may experience issues with the Flash uploader depending on the version you are running as they changed security settings. If you have problems change this to HTML and uploading should work.
Folder Tree - Toggle the folder tree view in the "manager" components, like image manager, file manager, etc.
Help URL - You can set the URL that the help button points to.

Custom Configuration Variables - If you have any custom Tiny MCE config variables you can set them here.
Custom Callback File - You can set a URL containing callback functions for Tiny MCE callback commands. This needs to be a URL relative to your site root.
Upload Method - You may experience issues with the Flash uploader depending on the version you are running as they changed security settings. If you have problems change this to HTML and uploading should work.
Folder Tree - Toggle the folder tree view in the manager components, like image manager, file manager, etc.
Help URL - You can set the URL that the help button points to.

Editor Toggle - Allow users to toggle if the editor is shown or not.
Toolbar Position - You can set the location of the toolbar with the buttons.
Toolbar Alignment - You can set the alignment of the buttons in the toolbar.
Editor Skin - You can set the skin to use for the editor.
Editor Skin Variant - If your skin comes with a variant you can set that here.
Popup Dialog Skin - You can set the skin to use for popups generated by JCE.
Allow Javascript - You can disallow insertion of Javascript elements in HTML view. "No" is recommended for security purposes.
Allow PHP - You can disallow insertion of PHP elements in HTML view. "No" is recommended for security purposes.
Block Format Elements - A comma seperated list of elements that you can choose for block elements in JCE.
Additional Fonts - Additional fonts you can choose in the editor dropdown. Generally you want to stick to standard fonts as not all users have all fonts installed.

Editor Toggle - Allow users to toggle if the editor is shown or not.
Toolbar Position - You can set the location of the toolbar with the buttons.
Toolbar Alignment - You can set the alignment of the buttons in the toolbar.
Editor Skin - You can set the skin to use for the editor.
Editor Skin Variant - If your skin comes with a variant you can set that here.
Popup Dialog Skin - You can set the skin to use for popups generated by JCE.
Allow Javascript - You can disallow insertion of Javascript elements in HTML view. No is recommended for security purposes.
Allow PHP - You can disallow insertion of PHP elements in HTML view. No is recommended for security purposes.
Block Format Elements - A comma seperated list of elements that you can choose for block elements in JCE.
Additional Fonts - Additional fonts you can choose in the editor dropdown. Generally you want to stick to standard fonts as not all users have all fonts installed.

Remove Fonts - You can remove fonts from the editor dropdown.
Font Styles - You can set the sizes you can set fonts to from the editor dropdown menu.
File Directory Path - You can set the path you want to store files in. This path should be relative to your site root.
Upload File Size (KB) - You can set the maximum upload size for file in KB. This is also controlled by settings in php.ini. Consult your host for what they allow for maximum upload sizes.
Upload Conflict Methods - You can set a default setting to deal with files you are trying to upload that already exist.
HTML View Height - You can set the height (in pixels) for HTML source view.
HTML View Width - You can set the width (in pixels) for HTML source view.
Preview Height - You can set the height (in pixels) for page preview.
Preview Width - You can set the width (in pixels) for page preview.
Custom Colors - A comma seperated list of colors you want available in the color picker. These colors should be in hex format, i.e. #FFFFFF for white.

Remove Fonts - You can remove fonts from the editor dropdown.
Font Styles - You can set the sizes you can set fonts to from the editor dropdown menu.
File Directory Path - You can set the path you want to store files in. This path should be relative to your site root.
Upload File Size (KB) - You can set the maximum upload size for file in KB. This is also controlled by settings in php.ini. Consult your host for what they allow for maximum upload sizes.
Upload Conflict Methods - You can set a default setting to deal with files you are trying to upload that already exist.
HTML View Height - You can set the height (in pixels) for HTML source view.
HTML View Width - You can set the width (in pixels) for HTML source view.
Preview Height - You can set the height (in pixels) for page preview.
Preview Width - You can set the width (in pixels) for page preview.
Custom Colors - A comma seperated list of colors you want available in the color picker. These colors should be in hex format, i.e. #FFFFFF for white.

Was this answer helpful?

 Print this Article

Also Read

How do I install a plugin?

Text Version In this tutorial we will be installing a plugin for JCE. Begin by navigating...

How do I use the image manager?

Text Version In this tutorial we will be using the JCE image manager. This is a fully featured...

How do I use the link manager?

Text Version In this tutorial we will be using the JCE link manager. This makes linking to...

How do I install JCE Editor?

Text Version In this tutorial we will be installing JCE editor. This is a WYSIWYG editor with...

How do I install a language?

Text Version In this tutorial we will be installing a language pack for JCE. Begin by...