Why doesn't the language change in ckeditor? Installing the visual editor CKEditor

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

I worked with two visual editors: Tinymce and CK Editor, although these two editors are quite popular, I’ll be honest, I liked CK Editor better, or rather, it was more suitable for my tasks. Therefore, here we will look at how to install the CK Editor, and I will tell you another time.

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

After the download is complete, unpack the downloaded archive, for example, into the libs folder located in the root of the site. In index.html, between the tags we connect the ckeditor.js editor plugin and, of course, the jquery library.

HTML

And so, all that remains is 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, a text editor should already appear in the specified text field. This editor can be customized to your taste; you can change the background of the editor frame or language; you can set the width and height of the window. To do this, use the config.js file, which is located in the libs/ckeditor/config.js folder. In this file we can set the settings listed above and many others. More details on the official website.

For example, with the changes to the config.js file 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 editor's appearance by setting config.toolbarBasic - minimum or Full - maximum editor functions. Or you can customize the editor using the config.toolbar_Basic setting as shown in the example below.

If you select the minimum configuration, the editor's capabilities will be limited and only the following 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; //editor window width config.toolbar = "Basic"; //editor functionality, Basic-minimum, Full-maximum config.toolbar_Basic = // customization Basic mode [ ["Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink","-", "Smiley"] ]; );

There is an option to group buttons into groups, and again this requires a config.js file.

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, basic settings text editor shown, one thing I didn’t like was the size of this editor, after downloading it weighs 4m 265kb, which is a bit too much. If this also bothers you, then you can delete the samples directory and also clean out the directory with languages, since it weighs the most. There are a lot of languages ​​in it that are not used, so you can simply remove them and leave only those that are needed, for example, Russian and English.

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

That's all for me, anyone who knows other subtleties of this editor, write in the comments.

Typically, a WYSIWYG editor is required when it is necessary to write an admin panel in which an ordinary user who does not know HTML will easily and conveniently add their own texts. This was the case in my case.

Download CKEditor from the official website: download ckeditor
Download the free file manager KCFinder: download kcfinder

We integrate CKEditor into the website in a standard way. Add the ckeditor.js script to the page (in my case, the script is in the root of the site in the ckeditor directory). I unpacked KCFinder into the ckeditor folder, just for convenience.

Let there be a textarea field on the page that needs to be replaced with a WYSIWYG editor:

CKEDITOR.replace("ckeditor");

Next, we need to specify the settings in ckeditor so that when you click on the “upload file” button or view files on the server, KCFinder opens, for this we add the following settings to CKEDITOR.replace:

CKEDITOR.replace("ckeditor",("filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl" :"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type =images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"));

In the /ckeditor/kcfinder/ directory there is a script with the config.php configuration, where you need to specify the path to the folder into which the added files will be loaded (do not forget to make sure that the directory is writable).

It seems that everything is working, but there are still a few points regarding the code formatting settings in CKEditor, for example, I don’t like that when you press the enter key in the editor, the text is enclosed in a tag

This tag is also constantly written when we try to save an empty field with an editor connected. To fix this, add a small script:

If(typeof CKEDITOR !== "undefined") ( CKEDITOR.on("instanceReady", function(ev) ( // Output paragraphs as . ev.editor.dataProcessor.writer.setRules("*", ( indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true ));

Removed autocomplete tag

Now let’s remove the enclosure of the text in this tag when pressing enter. To do this, add the following settings to the configuration file /ckeditor/config.js:

// when pressing enter, add br config.enterMode = CKEDITOR.ENTER_BR;

If the last two lines of code don't seem to help solve the problem, clear your browser cache and test again, everything should work. So your editor is CKEditor c file manager KCFinder is ready to go, and it doesn't even look bad.

Additional information on setting up the configuration can be found on the official websites of the editors.

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."; // текст нашего placeholder !}

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

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):

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

→ WYSIWYG CKeditor Surely many developers have at least heard about the existence of HTML editors built into web pages. I would like to present to you perhaps the most advanced WYSIWYG to date. For the uninitiated, I will describe in a nutshell what we are talking about. If you or your clients want to edit website content with their own hands, but don’t have the time or desire to learn the basics of html, then Ckeditor is what you need. Previously, the product was called FCKeditor, but due to unhealthy associations among the British with the abbreviation FCK (creator of the Frederico Calderia Knabben project), the editor was renamed Ckeditor. In addition to the name in new version The api for working with files in perl and python has disappeared, at least in the free distribution. The developers offer several tariff plans for support and perhaps under these conditions you will be provided with not only them. On

this moment

by default there is asp and php . I use perl in my work and 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.

This is what he actually looks like. True, I presented you with a slightly stripped-down version, but it is almost no different from the full set.

Connecting and setting up ckeditor Default connection

ckeditor is very easy to connect and configure.

1 . Download ckeditor and unpack it to the root of the site, CMS or other system. The developers do not recommend that novice programmers rename directories and files to avoid conflicts in the editor. If you leave everything as is, starting by default is a matter of minutes.

2. In the page code, load the main code and insert the textarea element. Moreover, there can be several textarea elements, the main thing is to assign different identifiers to them.

$.noConflict();

jQuery(document).ready(function($) ( CKEDITOR.replace("textID",()); ));

For Ext JS:

Ext.onReady(CKEDITOR.replace("textID",()));

Ancient way:

Or just before the closing tag

Additional setup

To change the default settings, ckeditor provides some kind of configuration file config.js, which is located at /ckeditor/config.js. It contains a setup hash.

Here is an example of the one used for the demo version 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. The default is kama.

config.uiColor - interface color. Only works for kama.

config.language - Interface language.

config.fullPage - wrapper for the edited document. If set to true, the editable area will contain a full html document, if false - only content.

config.height - height of the editable area in pixels. Same for width.

config.removePlugins - List of buttons (plugins) to be disabled. For example: resize - this is thanks to which the editor area can be stretched as desired by holding the lower right corner with the mouse, save - the save button.

I shared with you an excellent WISIWIG editor, which is great for use on most sites. This tool undoubtedly makes typing and editing text easier for people ignorant of HTML.

Personally, it was quite difficult for me to find any information on setting up this WISIWIG editor on the Russian Internet, so I had to read the documentation in English. By the way, this fact prompted me to write this note. /ckeditor/config.js The secret of the whole trick is that almost all the settings are concentrated in the file . Unexpectedly true. If you, like me, use Textpattern as a CMS, then the path to the file will be slightly different -.
/textpattern/ckeditor/config.js

By default (without any settings) the file looks like this:

CKEDITOR.editorConfig = function(config) ();

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( 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" ] ), "/", ( name: "styles", items: [ "Styles", "Format","Font","FontSize" ] ), ( name: "colors", items: [ "TextColor","BGColor" ] ), ( name: "tools", items: [ "Maximize", "ShowBlocks ","-","About" ] ) ]; );

In order to remove unnecessary icons, you must manually remove its designation ("Maximize", "ShowBlocks", etc.) in this code. Accordingly, maintaining the correct syntax. I think there is nothing complicated here.

Usually for a client site I use this view:

I intentionally remove tools for text formatting that change the appearance of text on the site, such as font color, typeface and size, because I believe that this should be done by a web developer, and not by the person who fills the site. In addition, most people who will subsequently work with this site most often have a “strange taste” that can ruin general form site.

For example, this type of interface can be configured with the following code:

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( name: "document", items: [ "Undo","Redo"] ), ( name: "basicstyles", items: [ "Bold","Italic ","Underline","Subscript","Superscript","Format" ] ), ( name: "paragraph", items: [ "NumberedList","BulletedList","-","JustifyLeft","JustifyCenter", "JustifyRight","JustifyBlock" ] ), ( name: "links", items: [ "Link","Unlink" ] ), ( name: "insert", items: [ "Image","Table","SpecialChar " ]), ( name: "tools", items: [ "Maximize","Source"] ) ]; );

I will repeat once again if I say that today CKE dit is best system, which I just saw.

Share on social media networks