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: sales@selectsystems.com.au