How to open a route in ckeditor. Installing plugins in CKEditor

I used BUEditor on my website - a simple, convenient editor, but it is not very convenient for users. I often thought about installing CKEditor, but it seemed like some kind of monster to me, but in reality everything turned out to be not so scary.

Read how to install the module.

After connecting through your module, on the admin/config/content/ckeditor/edit/profile_assignment page in the tab APPEARANCE OF THE EDITOR, In chapter Plugins An activation checkbox will appear. Turn on, save, check.

3. Inserting links. Out of the box, the link insertion dialog box contains a bunch of unnecessary and unclear stuff. We replace it with the Simple link plugin. How to install, see step 2. Connect (see point 1):

Config.extraPlugins = "SimpleLink";

A new plugin icon (button) will also appear.

4. Inserting images. Here everything is the same as with links; you can install the Simple Image plugin to insert images via links.

Config.extraPlugins = "SimpleImage";

Or upload images using the One Click Upload module. . Read more. I settled on the second method, although I used both in BUEditor.

The only thing I want to add is that the Enhanced Image plugin requires two more plugins Widget and Lineutils.

I couldn’t understand why the plugin didn’t start until I looked at the log

5. Appearance. The Moono skin is used by default, but I wanted to bring the appearance to the look of BUEditor.

this is what BUEditor looked like

7. Placeholder. To add a placeholder, install the plugin (see point 2) Configuration Helper. Connect (see point 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Our text"; // текст нашего placeholder !}

8. Smileys. The Insert Smiley plugin is responsible for smiles in CKEditor; it is included in the standard package - Full Package.

This is what the smileys look like out of the box:

To replace them with your own, you need to specify the path to the folder with images smiley_path in the config (see step 1):

Config.smiley_path = "/sites/default/files/smileys/";

Enter the names of the files (images) that will be displayed smiley_images :

Config.smiley_images = ["smile_1.png","smile_2.png"];

And description (hover description) smiley_descriptions

Config.smiley_descriptions = ["description-1", "description-2"];

You can also specify how many columns to display smileys in (default: 8) smiley_columns

Config.smiley_columns = 6;

Here's what I got

9. Browser spell checking. As UksusoFF wrote in CKEditor, browser spell checking is disabled. In order to disable this disabling (a bit of a tautology), you need to write in the config:

Config.disableNativeSpellChecker = false;

10. Context menu. In CKEditor, when you press RMB, a context menu opens, not the native browser menu

CKEditor is a ready-to-use HTML text editor designed to simplify the creation of web page content. This is a WYSIWYG editor that provides text editing functions directly to your web pages.

CKEditor is an open source application, meaning it can be modified as you wish. Its usefulness comes from an active community that never stops developing applications with free add-ons and a transparent development process.

3-Download CKEditor

You have 4 options for downloading CKEditor.

Download result:

You can see examples of CKEditor in the folder samples:

4- Basic examples:

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

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

4.1- Replace Textarea elements using JavaScript

A simple example is using CKEditor.replace(..) to replace via CKEditor .

replacebycode.html

Replace Textarea by Code Replace Textarea Elements Using JavaScript Code

Hello CKEditor

CKEDITOR.replace("editor1");

See example:

Results of running the example:

4.2- Replace textarea elements with name class

With having attribute name, and class ="ckeditor" will be automatically replaced by CKEditor.

Text

replacebyclass.html

Replace Textareas by Class Name Replace Textarea Elements by Class Name

Hello CKEditor

Running the example:

4.3- Create CKEditor with jQuery

An example of creating a CKEditor using JQuery.

jQuery Adapter - CKEditor Sample $(document).ready(function() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) Create Editors with jQuery

Hello CKEditor

Plug-ins and we see the following moving menu on the right


When you click the add to my editor button, the plugin is added to the assembly. When finished, click Build my editor and replace our built-in editor with the generated one.

The second approach is for those who are interested in delving into the code themselves.

On the website ckeditor.com, go to the add-ons->plug-ins section and click on the required plugin.


Select Download and follow the instructions from the site. For the most part, they either come down to the fact that you need to install dependencies for a given plugin and register both the plugin itself in the configuration file field config.js and the plugin on which the one being installed depends, separated by commas, for example,

Config.extraPlugins = "codemirror,youtube,imagerotate";

CKEditor is a visual editor that you can add to your website, blog or forum completely free of charge. It has an open source and works on most popular CMS. With the installation of this visual editor Even inexperienced webmasters can handle it. In fact, adding CKEditor to the site occurs in two steps: first, you unpack the archive to the server, and then add a few lines to the page code. Detailed instructions 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 functions, design links, change the font, work with superscript and subscript text, and add special characters, adding an information source, inserting images, anchors, and so on. 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 using plugins.

The developers did not forget about the possibility of changing appearance CKEditor. If none of the two standard themes is to 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” with 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 selecting the entire content of the editor if 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 freezing when trying to insert a table into a list with the last element missing;
  • improved plugin designed to normalize CSS background properties;
  • other fixes and improvements.