Why doesn't the language change in ckeditor. Installing the visual editor CKEditor. Static configuration

new player September 24, 2014 at 05:47 pm

CKEditor 4 User Guide

  • CMS

CKEditor 4 - WYSIWYG article editor. It allows you to perform flexible text formatting, including working with styles, lists, links, graphics, etc.

Interface

Figure 1. Editor window

The WYSIWYG editor window contains the following button bars:


Switching View Mode
Printing and Selecting an Article Template
Working with the clipboard (cut, copy, paste, undo)
Search and Replace
Create Forms
Inserting spoilers (collapsed text) and page breaks
Change the text style
Paragraph formatting
Insert links
Embedding Media Content from Third Party Sites
Pasting objects
Choosing a formatting style
Choosing paragraph formatting
Font selection
Choosing a font size
Select text or background color
Spellchecking
Additional viewing options (show blocks and expand)

The bottom panel of the editor window contains information about the current tag and text statistics:


Switching View Mode

The editor's view mode switching panel contains the following buttons:


Printing and Selecting an Article Template

The following buttons are located in the panel for printing and selecting an article template:


Printing an article on a printer. After clicking on this button, a standard dialog box will open asking you to select a printer and send the text of the article for printing.
Article template selection:
  • Image and Title - article template containing title, image and text
  • Strange Template - article template, the text of which is divided into two columns
  • Text and Table - an article template containing a title, table and text
A template is a predefined HTML markup code for a future article. The templates are described in the plugins/templates/templates/default.js file. You can add custom templates to given file or create a separate file with templates and configure CKEditor to work with it.
Working with the clipboard

The following clipboard operations are available in the editor:


Cut button. Cuts the selected fragment of the article and places it on the clipboard.
Copy button. Copies the selected article fragment and places it on the clipboard.
Insert button. Pastes the contents of the clipboard into the article. If text is pasted from external applications such as MS Office, all formatting-related tags will be included when pasted. Most of these tags are redundant and should be removed, making it difficult to edit the article. Therefore, it is recommended to use this button only for pasting unformatted texts.
"Insert text only" button. Similar to the "Insert" button. When you paste an article fragment from the clipboard, its formatting is completely removed.
"Insert from Word" button. Similar to the "Insert" button. Used if you want to preserve the formatting of the inserted fragment. Pasting optimally preserves the appearance of the text and removes unnecessary formatting. Recommended when copying text from MS Word or other MS Office applications.
Cancel button. Used to undo the last change made.
Repeat button. Used to revert the last undone change.
Search and Replace

The Find and Replace toolbar contains the following buttons:


Search

When you click on the "Search" button, a search window opens:



In the "Find" field, the desired piece of text is entered.


The following options are available:

  • Throughout the text. If this option is enabled, then when the end of the article is reached, the search will continue from its beginning. If this option is disabled, the search will end when the end of the article is reached.

To perform a search, you must enter the desired fragment, enable the required search options and click the "Find" button. The editor will search and highlight the first found fragment in the text of the article. Each time you press the "Find" button again, the editor will search further in the text and highlight the next found fragment.

Replacement

When you click on the "Replace" button, a window for replacing a fragment of text opens:



In the "Find" field, the desired piece of text is entered. In the "Replace with" field, the text with which you want to replace the desired fragment.


The following options are available:

  • Register sensitive. If this option is enabled, then the search will take into account the case of the searched fragment characters.
  • Just the whole word. If this option is enabled, then the editor will search for the entered fragment as a whole word. The search results will not include words for which the entered fragment is a part.
  • Throughout the text. If this option is enabled, then when the end of the article is reached, the search will continue from its beginning. If this option is disabled, the search will end when the end of the article is reached.

To perform a replacement, fill in the "Find" and "Replace with" fields, enable the required search options, and click the "Replace" or "Replace All" button. When you click on the "Replace" button, the editor will search and replace the first found fragment in the text of the article. Each time you press the "Replace" button again, the editor will search further in the text and replace the next found fragment.
When you click on the "Replace All" button, the editor will immediately search and replace the required fragment throughout the text of the article.

Create Forms

Forms are intended for user input in the browser window, passing them to the handler and, if necessary, displaying the results of processing. For example: user registration form, feedback form, etc.


The form creation panel contains the following buttons:


Button "Form". Used to insert a form into an article. In the HTML code, the form tag corresponds to the form tag.
Checkbox button. It is used to insert checkboxes (flag buttons, ticks) into a form or into an article.
Radio button. Used to insert radio buttons (switches) into a form or article.
Text field button. Used to insert a single line text entry field.
Multiline text field button. Used to insert a multi-line text entry field.
Dropdown button. Used to insert a drop down list.
Button "Button". Used to insert a button into a form or article.
Image button. Used to insert an image used as a button.
Hidden field button. Used to insert a hidden field into a form or article.
The form

Clicking on the "Form" button opens the settings window for the new form.



The form settings window contains the following fields:


Name Arbitrary form name. In HTML code, the name parameter.
Action The URL of the program or document that processes the data entered in the form. In HTML code, the action parameter.
Identifier The unique ID of the form. In HTML code, the id parameter.
Encoding Select how the form data is to be encoded. In HTML code, the enctype parameter. Available values:
  • text/plain - spaces are replaced with a "+" sign, letters and other characters are not encoded;
  • multipart/form-data - data is not encoded. Used when submitting files via a form;
  • application/x-www-form-urlencoded - spaces are replaced by a "+" sign, characters other than the Latin layout (letters of the Russian alphabet, etc.) are encoded by their hexadecimal values.
Target Select the window or frame in which the form data handler will display the results of processing. In HTML code, the target parameter.
Available values:
  • New window (_blank) - displays results in a new browser window;
  • Main window (_top) - Ignores frames and displays results in the full browser window. If there are no frames, then it works similarly to _self (see below);
  • Current window (_self) - displays the results in the current window;
  • Parent window (_parent) - Displays results in the parent frame. If there are no frames, then it works similarly to _self.
Method Select the HTTP request method to use. In HTML code, the method parameter.
Available values:
  • GET - the URL of the called handler is used to transfer data. The transmitted data is displayed in the address bar of the browser. The amount of transmitted data is limited by the maximum length of the browser's address bar;
  • POST - the body of the web browser request to the server is used to transfer data. The transmitted data is not displayed in the browser. The amount of transmitted data is not limited. The method allows you to transfer files.
Checkbox

The checkbox is designed to display controls that enable or disable any property or option. Such an element can take one of two values: yes or no. In the HTML code, this element corresponds to the input type="checkbox" tag. When you click on the "Checkbox" button, the settings window for the new element opens.



The checkbox element settings window contains the following fields:

  • Name - an arbitrary name of the element. In HTML code, the name parameter;
  • Value - acts as a unique element identifier. In HTML code, the value parameter;
  • Selected - if the option is enabled, this element will be checked by default.
radio button

The element "Radio button" is designed to display a group of values ​​with the ability to select only one of them. Those. elements within a group are mutually exclusive. Each element can take one of two values: yes or no. In the HTML code, this element corresponds to the input type="radio" tag. When you click on the "Radio button" button, the settings window for the new element opens.



The settings window for the Radio Button element contains the following fields:

  • Elements within a group must have the same name.
  • Value - acts as a unique element identifier. In HTML code, the value parameter.
  • Selected - if the option is enabled, this element will be checked by default. Within a group, this property must be enabled for only one element. If it is enabled for several elements, then only the last one will be marked.
Text field

The "Text field" element is intended for the user to enter a text string. In the HTML code, this element corresponds to the input type="text" tag. Clicking on the "Text field" button opens the settings window for the new field.



  • Name - an arbitrary name of the element. In HTML code, the name parameter.
  • Value - contains the text that will be displayed in the text field by default. In HTML code, the value parameter.
  • Field width (in characters) - the length of the input area of ​​the text field in characters. In HTML code, the size parameter.
  • Max. number of characters - the maximum length of the string that can be entered in the text field, in characters. In HTML code, the maxlength parameter.
  • Content Type - The content type of the text field. In HTML code, the type parameter. Before data is sent to the server, it is checked for compliance with the specified type.

Available content types:

  • Email - text field contains an email address;
  • Password - the text field contains the password;
  • Search - a text field is intended for entering the searched text;
  • Phone number - the text field contains a phone number;
  • Text - the text field contains a regular string;
  • Link - The text field contains a URL.
Multiline text field

The "Multi-line text field" element is intended for the user to enter text consisting of several lines. In the HTML code, this element corresponds to a pair of textarea tags. When you click on the "Multi-line text field" button, the settings window for the new field opens.



In the settings window of the "Text field" element, there are the following fields:

  • Name - an arbitrary name of the element. In HTML code, the name parameter.
  • Columns - field width in characters. In HTML code, the cols parameter.
  • Rows - field height in rows. In HTML code, the rows parameter.
  • Value - Contains the text that will be displayed in the default text box.
Drop-down list

The drop-down list element is designed to display a multiple choice list or a drop-down list. In the HTML code, this element corresponds to a paired select tag. The elements of the list correspond to the paired option tag. When you click on the "Drop-down list" button, the settings window for the new list opens.




The multiple choice list settings window contains the following fields:

  • Name - an arbitrary name of the element. In HTML code, the name parameter.
  • Value - contains the value of the list item, which is selected by default. In the HTML code for this element, the option tag is set to selected="selected" .
  • Size - the height of the displayed list area in rows. If size equal to one, then a dropdown list will be displayed. If the size is not specified, then the appearance of the list will depend on the "Allow multiple selections" option.

Group of parameters "Available options":

  • Text - input field for the displayed text of the list item. It is entered in pair with the "Value" field. To add the "Text - Value" pair to the list, click the "Add" button.
  • Value - field for entering the value of the list element transmitted to the server. It is entered in pair with the "text" field. To add the "Text - Value" pair to the list, click the "Add" button.
  • Add - the button for adding the entered pair "Text - Value" to the list.
  • Edit - button to change the selected list item. To change, you need to select the required element in the list settings, edit the contents of the "Text" and "Value" fields and click the "Change" button. The selected item will be updated accordingly.
  • Raise - button to move the selected list item one level up.
  • Lower - button to move the selected list item one level down.
  • Mark as selected - when the button is clicked, the selected item in the list becomes marked as selected by default. The value of the element is displayed in the "Value" field (see above). In the HTML code for this element, the option tag is set to selected="selected" .
  • Delete - button to remove the selected element from the list.
  • Allow selection of multiple options - if the property is enabled, then using the ctrl key it will be possible to select multiple items in the list. If the list size is not specified and the property is disabled, then a drop-down list will be displayed. If the list size is not specified and the property is enabled, then the list size is set to four.

The end of the article follows...

CKEditor it is a ready to use text editor html, designed to make it easier to create content for web pages. This is WYSIWYG an editor that provides text editing functionality directly to your web pages.

CKEditor this application is open source, meaning it can be modified to your liking. Its usefulness comes from an active society that does not stop the development of applications with free add-ons and a transparent development process.

3- Download CKEditor

You have 4 download options CKEditor.

Download result:

You can see examples CKEditor in the folder samples :

4- Basic examples:

All examples in this article are contained in the folder samples in CKEditor which you have downloaded. But I will try to make it easier for you.

Create a folder myexamples , the examples in this article will be in that folder.

4.1- Replace Textarea elements using JavaScript

A simple usage example CKEditor.replace(..) to replace

See example:

Example run results:

4.2- Replace textarea elements with name class

With

replacebyclass.html

Replace Textareas by Class Name

Replace Textarea Elements by Class Name

Running the example:

4.3- Create CKEditor with jQuery

Creation example CKEditor using jQuery.

jQuery Adapter - CKEditor Sample

Create Editors with jQuery

Running the example:

5- Basic customization

5.1- Changing the color of the interface

CKEDITOR.replace("textarea_id", ( uiColor: "#14B8C4" ));

UI Color Picker

UI color

See also:

5.2- Change language

uilanguages.html

User Interface Globalization

User Interface Languages

Note: A list of language codes and language names can be found in:

  • /samples/assets/uilanguages/languages.js

Running the example:

6- Inline Editing

6.1- Creating a complex inline editor

This example shows inline editing - object CKEditor will be automatically created from elements (element) having attribute contenteditable="true".

You can change the content inside an element HTML which has the attribute contenteditable="true". And the toolbar will appear on change:

In this example:

  • If a h1, h2, h3 or tag with id=taglist, va co contenteditable="true" then the toolbar just shows (Removed plugin colorbutton, find, flash, fonts ,...)
  • Opposite the toolbar is shown by default.

Example run illustration:

Massive inline editing

Massive inline editing

H1 With contenteditable="true"

div with contenteditable="true"

H1 H1 H1

H2 H2

H3 H3

div with contenteditable="true"

hello CKEditor ...

Running the example:

6.2- Convert element to inline editor using code

inlinebycode.html

Inline Editing by Code - CKEditor Sample

Inline Editing by Code

hello CKEditor

6.3- Replace textarea with inline editor

inlinetextarea.html

Replace Textarea with Inline Editor

6.4- Inline editing with jQuery

jquery-inline.html

Create Editors with jQuery - Inline Example

hello CKEditor

7- CKEditor configuration

you can customize CKEditor at startup. You have 2 configuration options CKEditor:

  1. Statistical configuration:
    • Will have an effect on everyone CKEditor
  2. Configuration for specific CKEditor:
    • Has effect only for the configured CKEditor.

7.1- Static configuration

Statistical configuration:

  • Will have an effect on everyone CKEditor, for those that don't specify a specific configuration.

See an example of a statistical configuration:

// Configuring the toolbar, displays a few buttons. CKEDITOR.config.toolbar = [ ["Font","FontSize"], ["Bold","Italic"] ]; // Configuring UI Color. CKEDITOR.config.uiColor = "#9AB8F3"; CKEDITOR.config.width = "500px"; CKEDITOR.config.height = "70px";

config-static.html

Config CKEditor - Static config

CKEditor Static config

Running the example:

See also config. toolbar

7.2- Configuration for a specific CKEditor object

With each CKEditor on the page, you can customize them differently. For example a web page has 2 different CKEditor with distinction toolbar in quantity button.

config-instance.html

Config CKEditor - instance config

CKEditor instance config

Running the example:

7.3- Configuration attributes

You can see the list of configuration attributes at the link:

8- Toolbar configurations

There are several approaches to toolbar configuration CKEditor:

  1. Use Toolbar Configurator
  2. "Item by Item" configuration
    • config.toolbar
  3. Toolbar Groups Configuration
    • config.toolbarGroups

8.1- Configuration Toolbar "Item by Item"

You can configure toolbar using the way "Item by Item" , that is, you declare groups, each group consists of button.

// Declaring groups, each group with the buttons. CKEDITOR.config.toolbar = [ ( name: "my_document", items: [ "Source", "-", "NewPage", "Preview", "-", "Templates" ] ), ( name: "my_clipboard", items: [ "Cut", "Copy", "Paste" ] ), "/", ( name: "my_styles", items: [ "Bold", "Italic", "Format" ] ) ];

You also don't need to declare the name of the group.

CKEDITOR.config.toolbar = [ [ "Source", "-", "NewPage", "Preview", "-", "Templates" ], [ "Cut", "Copy", "Paste" ] , "/" , [ "Bold", "Italic", "Format" ] ];

toolbar-itembyitem.html

CKEditor Toolbar Configuration - Item by Item

Running the example:

8.2- Configuration of Toolbar Groups

Benefits of group configuration:

The most important advantage of Toolbar Groups Configuration over Toolbar Groups Configuration "Item by item" This? automation.

Now for developers plugin it is possible to determine the group to which it is added button.

Although it is not required, it is recommended to configure all groups and subgroups (including those you are not using), because at any time in the future, when installing a new plugin, this button will automatically appear in the toolbar without the need for further configuration.

For example:

// Ckeditor has built the basic group called "mode", "document", "clipboard", "undo", "styles", "links" ..... // You can define your group with any name, and contain the basic group of CKEditor. // Your group can namesake with available group of Ckeditor . // Your group may not need to list the sub-group, then by default it will contain one sub-group has the same name as your group. CKEDITOR.config.toolbarGroups = [ ( name: "document", groups: [ "mode", "document" ] ), ( name: "my_group", groups: [ "clipboard", "undo" ] ), ( name: "styles" ), ( name: "links" ) ];

Configuration advantage Toolbar Groups this is when you change the library CKEditor to the new version, if in any group new version is added new button, it will automatically appear on the panel toolbar, you do not need to change the code of your web page.

You can also use "/" in configuration toolbar to break lines (Move back button to a new line).

CKEDITOR.config.toolbarGroups = [ ( name: "document", groups: [ "mode", "document" ] ), ( name: "my_clipboard", groups: [ "clipboard", "undo" ] ), "/" , ( name: "styles" ), ( name: "links" ) ];

toolbar-group.html

CKEditor Toolbar Group Configuration

Running the example:

8.3- List of groups and Item ready on CKEditor

These are the definitions of the groups in CK Editor 3.x:

( name: "document", items: [ "Source","-","Save","NewPage","DocProps","Preview","Print","-","Templates" ] ), ( name : "clipboard", items: [ "Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo" ] ), ( name: "editing", items : [ "Find","Replace","-","SelectAll","-","SpellChecker", "Scayt" ] ), ( name: "forms", items: [ "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" ] ), ( name: "basicstyles", items: [ "Bold","Italic","Underline ","Strike","Subscript","Superscript","-","RemoveFormat" ] ), ( name: "paragraph", items: [ "NumberedList","BulletedList","-","Outdent", "Indent","-","Blockquote","CreateDiv", "-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl" ] ), ( name: "links", items: [ "Link","Unlink","Anchor" ] ), ( name: "insert", items: [ "Image","Flash","Table","HorizontalRule", "Smiley","SpecialChar","PageBreak","Iframe" ] ), ( name: "styles", items: [ "Styles","Format","Font","FontSize" ] ), ( name: "colors", items: [ "TextColor","BGColor" ] ), ( name: "tools", items: [ "Maximize", "ShowBlocks","-","About" ] )

9- More examples on the CKEditor website

For example, create a custom plugin for your CKEditor.

Create CKEditor Plugin:

This article will show you how to install visual editor to your site. Such an editor is very convenient for adding and/or editing new information for the site. For example, installation on the forum, in the block with comments, which facilitates and expands the possibilities of editing the text of a new comment, i.e. you can highlight text, underline it, insert a link and much more, it all depends on how much access you give your reader. And, of course, what should not be forgotten is the admin part, which can greatly facilitate your work when adding and editing material.

I worked with two visual editors Tinymce and C.K Editor although these two editors are quite popular, frankly, C.K Editor I liked it more, or rather, it was more suitable for my tasks. Therefore, here we will consider how the editor is installed. C.K Editor and I'll tell you another time.

To get started, as always, we need to download the editor, you can download Full- package, or select all the necessary packages on the official website.

After the download is complete, unpack the downloaded archive, for example, into a folder libs located at the root of the site. AT index.html between tags add editor plugin ckeditor.js and of course the library jQuery.

HTML

And so, it remains to create a form with a test field , with which our editor will interact.

HTML

In general, everything about the installation, after loading the page with you, in the specified text field The text editor should now appear. This editor can be customized to your taste, change the background of the editor frame or language, you can set the width and height of the window. The file is used for this. config.js which is in the folder libs/ckeditor/config.js . In this file, we can set the above listed settings and many others. More details on the official website.

For example, by changing the file config.js which are shown below we will change the language, border color and height of the editor.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.language = "en"; //language config.uiColor = "#AADC6E"; //frame color config.height = 300; //frame height );

You can also change the appearance of the editor by setting in the settings config.toolbarBasic- minimum or Full- maximum editor functions. Or, customize the editor individually using the settings config.toolbar_Basic as shown in the example below.

If you select the minimum configuration, the editor's capabilities will be limited and only the buttons will be available: set bold text, italic font, lists, create a link delete a link, and emoticons (see example below).

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.width = 1050; //width of the editor window config.toolbar = "Basic"; //editor functionality, Basic-minimum, Full-maximum config.toolbar_Basic = //Individual setting of the Basic mode [ ["Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink","-","Smiley"] ]; );

It is possible to group buttons into groups, and again, this requires a file config.js .

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.toolbarGroups = [ ( name: "document", groups: [ "mode", "document", "doctools" ] ), ( name: "clipboard", groups: [ "clipboard ", "undo" ] ), ( name: "editing", groups: [ "find", "selection", "spellchecker", "editing" ] ), ( name: "forms", groups: [ "forms" ] ), "/", ( name: "basicstyles", groups: [ "basicstyles", "cleanup" ] ), ( name: "paragraph", groups: [ "list", "indent", "blocks", "align ", "bidi", "paragraph" ] ), ( name: "links", groups: [ "links" ] ), ( name: "insert", groups: [ "insert" ] ), "/", ( name : "styles", groups: [ "styles" ] ), ( name: "colors", groups: [ "colors" ] ), ( name: "tools", groups: [ "tools" ] ), ( name: " others", groups: [ "others" ] ), ( name: "about", groups: [ "about" ] ) ]; );

In general, the basic settings of the text editor are shown, one thing that I did not like is the size of this editor, after downloading it weighs 4m 265kb which is kinda too much. If it also bothers you, then you can delete the directory samples and also clean the catalog with languages, since it weighs the most. It has a lot of languages ​​that are not used, so you can simply remove them and leave only those that are needed, for example, Russian and English.

Go to catalog libs/ckeditor/lang and here we delete all files except the language you need, for example, leave: en.js and en.js . After all the manipulations done, the size will be halved, and the directory ckeditor will look like:

On this I have everyone who knows other subtleties of this editor, write in the comments.

Today we will figure out how to integrate and configure the very popular CKEditor content editor into a standard ASP.NET MVC application. We will also install and configure the equally popular CKFinder file manager.

Official developer page: https://ckeditor.com/

CKEditor is a very popular visual WYSIWYG editor for HTML content.

CKFinder is a file manager that allows you to access file system on the server and manage files from the client's browser.

Usually both of these components go together, that is, the file manager is integrated into the editor.

CKEditor comes in two versions. Version 4 is older and therefore more common. And version 5, a new one that implements a modular architecture, with many innovations.

Customizing CKEditor

I use the 4th version in my projects, its functionality is quite enough to solve any problems. Download the archive with the editor and add it to your project.

Add CKEditor very simple. This happens in several stages:

  1. connect via tag
    }

Everything is ready! In the example above, CKEditor connects to a text area "content1" inside an HTML form. Further, the contents of this field will be sent to the server.

It is worth noting that there are many plugins for CKEditor that extend its standard functionality. You can also write plugins yourself (this process is described in more detail in the official documentation on the site). Let's add a plugin to the editor that allows you to embed videos from video hosting on the page Youtube.

At the time of this writing, all plugins can be found in a separate section on the site. The plugin we are interested in is located at: https://ckeditor.com/cke4/addon/youtube


After that, a new button will appear on the editor toolbar, allowing you to work with the new plugin.

Setting up CKFinder

Now let's deal with the CKFinder file manager. Since the files (for example, pictures) are located on the server, in addition to connecting this component on the client, that is, in the user's browser, we will also need to configure it from the server side, namely, connect some libraries and implement several methods.

The official documentation for configuring the connector for ASP.NET applications is located at: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

Unlike the CKEditor editor, which we set up on the site and downloaded manually, we can add CKFinder to the project directly in Visual Studio via . The minimum set of packages required for work looks like this:

  1. CKSource.CKFinder- JavaScript client, connects on the client side
  2. CKSource.CKFinder.Connector.Core- the main and key library that provides the CKFinder connector on the server
  3. CKSource.CKFinder.Connector.Config- this library allows you to customize CKFinder via a common . Please note how the config file will change after installing this package, now there are all the settings for CKFinder.
  4. CKSource.CKFinder.Connector.Host.Owin- this library allows you to connect the connector as an OWIN component in the application. On the server side, CKFinder works exactly according to this specification, i.e. Open Web Interface for .NET
  5. Microsoft.Owin.Host.SystemWeb- immediately install OWIN host or server
  6. CKSource.FileSystem.Local- this component adds support for working with the file system on the server

After installing all the necessary components, you can start configuring the server side.

Firstly, CKFinder requires that only authenticated users have access to the file system, that is, with each request to the server through this file manager, we must tell it whether this user has the right to access files on the server or not.

To do this, we need to implement a special interface, and in it a method that authenticates all incoming requests.

CKFinderAuthenticator.cs

Public class CKFinderAuthenticator: IAuthenticator( public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) ( var user = new User(true, new List ()); return Task.FromResult((IUser) user); ) )

In the example above, we just return a fake user each time, which is always authenticated (true flag) and has no roles (empty sheet). That is, we always have rights to access the file system. In a real project, this issue, of course, needs to be taken more seriously and combine this method with the existing user authentication and authorization system.

Namespace CKEditor ( public class Startup ( public void Configuration(IAppBuilder app) ( //register the file system for the connector FileSystemFactory.RegisterFileSystem (); //declare a route in the application and map it to a connector //the CKFinder client JS library expects to see a connector from this route app.Map("/ckfinder/connector", SetupConnector); ) //Declare a method for setting up and initializing the connector private static void SetupConnector(IAppBuilder app) ( //Create instances of the required classes var connectorFactory = new OwinConnectorFactory(); var connectorBuilder = new ConnectorBuilder(); var customAuthenticator = new CKFinderAuthenticator(); connectorBuilder .LoadConfig() //load the configuration from the Web.config file .SetAuthenticator(customAuthenticator) //set the previously defined authenticator.SetRequestConfiguration((request, config) => ( config.LoadConfig(); )); //define the configuration for each separate request //create an instance of the connector var connector = connectorBuilder.Build(connectorFactory); //add the connector to the pipeline app.UseConnector(connector); ) ) )

This completes the server configuration. Now let's integrate the CKFinder client with CKEditor on the page.

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) (
}

If all scripts are connected correctly and the connector is configured on the server side, then we will get access to the file system through CKFinder from the user's browser.

Depending on the connector settings in the file Web.config we can change permissions for manipulating files and folders (create, move, etc.).

I note that we have considered only the basic configuration of CKFinder. In addition to this, you can add logging, file caching, various plugins (for example, add a watermark to uploaded images), etc. You can read more about this in the official documentation.

Similar posts