Configure the Kendo editor
The configuration file of the Kendo editor is exposed and is shipped with the AdminApp
files.
The Kendo editor configuration file is located in your project’s ~\AdminApp\config.json
.
The structure of the file consists of one valid property – editorSettings
.
By default, the config.json
is populated with the following settings:
NOTE: When making changes to the Kendo editor configuration, you must resart your application for the changes to take effect. For more information see Application restart.
For more information about all supported settings, see Kendo UI for jQuery documentation » kendo.ui.Editor.
Include custom stylesheets
You can include custom stylesheets in the editing area using the stylesheets configuration in config.json. We recommend including only specific stylesheets, rather than the whole styles of the project. For example, you can include only styles related to headings or lists.
To apply the styles only to the content editing area, you must add a specific selector to your CSS rules. In this case, the selector must be .sf-editor
EXAMPLE: Use the following example:
Your project’s ~\AdminApp
folder is consider root folder and all relative stylesheets must be addressed by it. For example, if you have file named heading.css
that is located inside folder ~\AdminApp\assests\
, you must add the file in the config.json
in the following way: assets/headings.css
You can also include stylesheets using the absolute path.
EXAMPLE: Use the following example:
You can include CSS files from a package, which your project is based on.
EXAMPLE: Use the following example:
If your project is based on Bootstrap 4 resource package, you can take advantage of the provided npm
script for compiling SASS
file to one minified CSS
file.
Perform the following:
- Use
@import
to include all needed SASS
files into editor.scss
that is located in ~\ResourcePackages\Bootstrap4\assets\src\project\sass\
If you prefer a different name, you must change the configuration variable editorSassFile
, which is defined in package.json
- Run
npm run sass:editor
To run npm
scripts, you must be at the root of Bootstrap 4 package: ~\ResourcePackages\Bootstrap4\
.
This task will generate editor.min.css
file that you can find in folder ~\ResourcePackages\Bootstrap4\assets\dist\css\
- Include the
editor.min.css
file in the config.json
file.