ckeditor installation. Setting up CKEdit or how to remove extra icons on the panel. Selecting an image on the server, uploading images to the server
→ WYSIWYG CKEditor
Surely, many developers have at least heard about the existence of HTML editors embedded in web pages. I would like to present to you perhaps the most advanced to date WYSIWYG. For the uninitiated, I will describe in a nutshell what is at stake. If you or your clients want to edit the content of the site with their own hands, and there is no time or desire to learn the basics of html, then ckeditor exactly what is needed.
Previously the product was called FCKeditor, but due to unhealthy associations among the British associated with the abbreviation FCK(project creator Frederico Calderia Knabben), the editor has been renamed to ckeditor. In addition to the name in new version api for working with files on perl And python, at least in the free distribution. The developers offer several tariff plans for support and perhaps on these conditions you will be provided not only with them. Currently the default is asp And php. I use in my work perl and I will write the interface myself. I'll post it later. But in general, the project has a plugin architecture, which is quite easy to manage if you understand JS.
Download WYSIWYG ckeditor can be here or on the site www.ckeditor.com.
This is how he actually looks. True, I presented you with a slightly truncated version, but it almost does not differ from the full set.
Connecting and configuring ckeditor
Default connection
Connect and set up ckeditor very easy.
1 . Downloading ckeditor and unpack to the root of the site, CMS or other system. Developers do not recommend novice programmers to rename directories and files in order to avoid conflicts in the editor. If everything is left as is, then the default launch is a matter of minutes.
2 .In the page code, load the main code and insert the element textarea. Moreover, there can be several textarea elements, the main thing is to assign different identifiers to them.
3 .Initialization to your taste, but it is better to do after the document object model is ready.
For Jquery:
For ExtJS:
Ext.onReady(CKEDITOR.replace("textID",()));
Ancient way:
Or just before the closing tag
Additional setting
To change the default settings in ckeditor some kind of configuration file is provided config.js, which is located at /ckeditor/config.js. It contains the configuration hash.
Here is an example of the one used for the demo on this page:
CKEDITOR.editorConfig = function(config) ( config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = false; config.height = 200; config.removePlugins = "resize, about, save"; );
config skin- interface. There are three options: kama, v2, office2003. Default kama.
config.uiColor- interface color. Only works for kama.
config.language- Interface language.
config.fullPage- a braid for the edited document. If installed true then the editable area will contain a full-fledged html document, if false- content only.
config.height- the height of the editable area in pixels. Likewise for the width.
config.removePlugins- List of buttons (plugins) to be disabled. For example: resize- this is due to which the editor area can be stretched as you like by holding the lower right corner with the mouse, save- save button.
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:
|
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, you must 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 designed for user input in a 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. |
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:
|
| 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:
|
| Method | Select the HTTP request method to use. In HTML code, the method parameter. Available values:
|
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 the size is equal to one, then a drop-down 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 is a visual editor that you can add to your website, blog or forum for free. It is open source and runs on most popular CMS. With the installation of this visual editor even inexperienced webmasters can handle it. In fact, adding CKEditor to the site takes place in two steps: first, you unpack the archive to the server, and then add a few lines to the page code. Detailed instructions for installation you will find in the archive with the editor.
Out of the box, this website extension supports the ability to resize the input window, copy and paste text, design links, change the font, work with superscript and subscript text, add special characters, add a source of information, insert images, anchors, and so on. Further. The functionality provided depends on the selected version of CKEditor. There are three of them: Basic, Standard and Full. If the functionality of the most "advanced" edition was not enough for you, then you can expand the editor's capabilities with the help of plugins.
The developers have not forgotten about the possibility of changing the appearance of CKEditor. If none of the two standard themes suit your taste, then you can look for additional "skins" on the official website and third-party specialized resources. We remind you that all of the above functionality is available to webmasters for "single" use completely free of charge. There are also versions of the visual editor with commercial licenses.
Key features and functions
- distributed in three versions, which differ in functionality;
- can be "extended" by plugins;
- very easy to install and works on most popular CMS;
- supports changing toolbar themes;
- is completely free.
What's new in this version?
4.6.1 (08.12.2016)
- the "callback" parameter in CKEDITOR.ajax.post is now optional;
- Fixed problems with highlighting the entire contents of the editor in the event that the project began or ended with a widget or other non-selectable element. The same problems were observed when working with the "Select All" plugin;
- fixed browser freeze when trying to insert a table into a list with missing last element;
- improved plugin for normalizing CSS background properties;
- other fixes and improvements.
CKEditor it is a ready to use text editor html, designed to make it easier to create content for web pages. This 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 community that does not stop developing 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 folder samples :
4- Basic examples:
All examples in this article are contained in the folder samples V 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