CKEditor 4 Plugin Documentation
Contents CKEditor – Rich Text Editor Plugin .................................................................................................................................... 2
CKEditor 4 ...................................................................................................................................................................... 2
Administration .............................................................................................................................................................. 2
Insert Images ............................................................................................................................................................. 3
Installing the Plugin ....................................................................................................................................................... 4
Configure Settings ......................................................................................................................................................... 4
Using CKEditor Configuration .................................................................................................................................... 4
Demo Websites ............................................................................................................................................................. 5
Contact Us ..................................................................................................................................................................... 5
Select Systems International Page | 2
CKEditor – Rich Text Editor Plugin This plugin allows you to install CKEditor - the Smart WYSIWYG HTML Rich Text editor which can be used to edit the Full Description on Products, Categories and well as Blog and Topics Text.
CKEditor 4
Proven, enterprise-grade WYSIWYG HTML editor with wide browser compatibility, including legacy browsers.
Paste from Word, Excel and Google Docs. Excellent tables support with columns resizing, selecting rows and columns.
Media embeds (insert videos, tweets, Instagram posts and more), widgets, code snippets, math formulas. Autocomplete, @mentions, emoji plugins. Inline and iframe UI, autogrow, maximize mode for distraction-free writing. Read-only mode. Various styling and formatting plugins, copy formatting feature.
For more information on CKEditor see https://ckeditor.com/
Administration
The backend Administration has several pages where rich text can be edited
Edit Product Edit Category Topics Message Templates
For each of these functions the CKEditor is utilised.
Select Systems International Page | 3
Insert Images The implementation utilises Roxy File Manager to upload and insert images into the text
Select Systems International Page | 4
Installing the Plugin
The zip package supplied can be uploaded and installed using the “Upload plugin or theme” button on the Configuration > plugins page.
Refer to Then the installation of the plugin follows the standard nopCommerce procedure. See https://docs.nopcommerce.com/user-guide/configuring/system/plugins.html
Alternatively, you can manually install the plugin:
1. Copy the Plugin to the correct directory 2. Restart the Application – Click the Icon in the top
Once installed the you can configure the plugin.
Configure Settings
The settings for the plugin can be set using the configure page. To setup the plugin or define the options open the config page in the Menu then click the required function checkbox. After entering the settings click Save.
Using CKEditor Configuration CK Editor has configuration options which are stored in config file in the plugin directory
See nopCommerce/Plugins/Editor.CKEditor/Scripts/CKEditor/config.js
Select Systems International Page | 5
For example, you can set the Height of the Editor using
config.height = 500;
All the setting options can be found here https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
Edit the config.js file then restart the application for the settings to take effect
Demo Websites
To view the plugin operation or refer to the respective demo websites
http://v40demo.selectsystems.com.au/
http://v41demo.selectsystems.com.au/
http://v42demo.selectsystems.com.au/
Contact Us
If you have any more questions or would like to make suggestions on how to make the plugin operations more functional please email: [email protected]