Installing plugins in CKEditor. Installing the visual editor CKEditor Ckeditor description

Drupal 7, like the sixth version, does not have a built-in visual editor.

User guide: how to install and configure the ckeditor editor in Drupal 7. Loading images from Elfinder.

In Drupal 7, as in the sixth version, we need to install an editor. Of course, you don’t have to do this and write texts seeing only the code. But I like visual editors. Let me remind you that we studied the installation and configuration for Drupal 6 in lesson 2:

Today we will look at the working combination of cms and editor.
drupal 7.17
CKEditor - WYSIWYG HTML editor 7.x-1.11
CKEditor 4.0
elFinder file manager 7.x-0.7
script elFinder - elfinder-1.2

For Drupal version 7, the entire installation and configuration process is much simpler. You don’t need to edit anything in the files, all actions are available from the admin panel (we’ll just check the boxes). Existing current versions modules make our life a lot easier.

How to install WYSIWYG editor CKEditor to the latest version CMS Drupal 7.17

CKEditor is flexible and convenient editor. Its interface resembles Word.
First we install the editor script, then the module itself. It is the module that will connect it to the site.
Note.
I indicate specific versions at the time of writing.

1. Download the module ]]> https://drupal.org/project/ckeditor ]]>
Unpack the archive into a folder site/all/modules. The whole path looks like this: site/all/modules/ckeditor

2. Download the editor CKEditor 4.0]]> https://ckeditor.com/download ]]>
For editor files you need to create a libraries folder in site/all/
The path to unpack the archive will be like this: site/all/libraries/ckeditor

On the modules page we enable it and then configure it.
Go to “Configuration - CKEditor - CKEditor Global Profile - Edit”. Here you need to check the entry in the “Path to CKEditor” field - it should be %l/ckeditor. This entry shows that the editor is located in the folder libraries.

All. You have installed CKEditor and it should work. To check, try opening the page for creating a new material. Now, instead of one large input field, you will see the usual visual editor.

If the editor is not visible:
Check that the selected module releases are correct for your version of Drupal. Try changing to another release.

Setting up CKEditor editor profiles

1 step. Setting up the Advanced profile in the CKEditor editor.
Advanced (advanced, with loading images, etc.)
Go to “Management > configuration > ckeditor - admin/config/content/ckeditor
Let’s set up the Advanced profile, click the “change” link next to the Advanced profile.
Editor appearance:
Choose a color.

Drag and drop the required buttons.

Select the language Russian.

File browser settings
We choose a file manager to our liking; below in the text there is installation and configuration of a file manager for Drupal 7 - Elfinder.

Step 2. Setting up the Full profile in the ckeditor editor
Go to “Management - configuration – ckeditor” - admin/config/content/ckeditor
You can leave the settings as default and select Russian.

The easiest option is to use Full (full) and Advanced (extended) - for registered ones, also your variations. Create a Plain profile for anonymous users, where you can mark the automatic change of html text to a simple format.

A little from the review of Drupal 7, such a mini positive review.
By default, the seven has a field for uploading pictures. A very useful feature. Each material can be assigned a picture – a kind of logo. In the announcement, this picture will automatically be reduced in size.

What problems do you encounter when working with the editor? CKeditor does not show all the buttons

To do this, check which version you downloaded at https://ckeditor.com/download

• There are few buttons in the Basic Package.
• Standard Package - there are more of them.
• The complete set is in the Full Package - download it if you want to get the most out of it.

Installing and configuring the Elfinder file manager for Drupal 7

A combination of an editor and a file manager will make your work more enjoyable. You can insert an image anywhere from the server or from your computer. Assign it the necessary attributes and an alternative description. Unfortunately, it also needs to be installed.
The CKEditor file manager will download not only pictures, but also other files.
As with the editor, you need to download the module and script.

Download the module ]]> https://drupal.org/project/elfinder ]]>

Unpack the archive and place the files in the site/all/modules/elfinder folder

Download script ]]> ]]>

From latest versions came up elfinder-1.2.
Then unpack the archive and place the files in the site/all/libraries/elfinder folder
There is small feature, the folder should be called elfinder.

Setting it up. For this we go admin/config/elfinder– “configuration – modules – elFinder – configure.”

In the “Root directory” we leave the choice for “Use system defaults” - the default in Drupal.

Default settings admin/config/media/file-system:

On the “Content” page - admin/content, you will see new tab"Files". Now just click on it and you will see the file manager interface.

And the last step is to combine the editor with file manager into one functional tool.
I have already described setting up editor profiles above.

I repeat:
Select in File browser type - elFinder. If desired, you can also change the folder for downloading files here.

Now everything should work, but I just don’t understand why this is not in the Drupal core? Instead, there are several editor options to suit every taste. Which is too good. ;)

New working connection

drupal 7.21
CKEditor - WYSIWYG HTML editor 7.x 1.13
CKEditor - ckeditor_4.1_standard
elFinder file manager 7.x-0.8
elFinder script - elfinder-1.2

A glitch appears with new voids () being added every time you edit.

It was discovered that the glitch appears when inserting a Drupal teaser. If the article does not separate the announcement, then there is no glitch.

The reason is that by default the announcement size is already configured in the material type. This results in dual use of the announcement separation: manual and automatic.

Path to setting up advertisement display:

Home » Administration » Structure » Content types » Article » Manage display

Advice. When customizing the appearance of the visual editor, you should remove the teaser-Drupal button in both profiles.

Articles for learning drupal:

General concepts for beginners.

How to Russify Drupal and its modules.

A selection of blog modules.

Quick guide.

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 free file KCFinder manager: 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 a few more 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 we will 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; config.shiftEnterMode = 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. Thus, your CKEditor editor with the KCFinder file manager is ready to work, and it doesn’t even look bad.

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

→ 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 your own hands, and learn html basics there is no time or desire - 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. At the moment there are asp and php by default. 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.

You can download WYSIWYG ckeditor here or at www.ckeditor.com.

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.

3.Initialization is to your taste, but it is better to do it after the document object model is ready.

For Jquery:

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

For Ext JS:

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

Ancient way:

Or just before the closing tag

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

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.

Table of contents

When creating an editor in your page, it is possible to set up configurations that change many of its aspects. For example:

ClassicEditor .create(document .querySelector("#editor"), ( toolbar : [ "heading" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ] , heading : ( options : [ ( model : "paragraph" , title : "Paragraph" , class : "ck-heading_paragraph" ), ( model : "heading1" , view : "h1" , title : "Heading 1" , class : "ck-heading_heading1" ), ( model : "heading2" , view : "h2" , title : "Heading 2" , class : "ck-heading_heading2" ) ] ) )) .catch(error =>

As you can see, configurations are set by a simple JavaScript object passed to the create() method.

Removing features

Builds come with all features included in the distribution package enabled by default. They are defined as plugins for CKEditor.

In some cases, you may need to have different editor setups in your application, all based on the same build. For that purpose, you need to control the plugins available in the editor at runtime.

In the example below Heading and Link plugins are removed:

// Remove a few plugins from the default setup. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

Be careful when removing plugins from CKEditor builds using config.removePlugins . If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration as in the example above.

List of plugins

Each build has a number of plugins available. You can easily list all plugins available in your build:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Adding features Adding complex features

As CKEditor builds do not include all possible features, the only way to add more features to them is to create a custom build .

Adding simple (standalone) features

There is an exception to every rule. Although it is impossible to add plugins that have dependencies to @ckeditor/ckeditor5-core or @ckeditor/ckeditor5-engine (that includes nearly all existing official plugins) without rebuilding the build, it is still possible to add simple, dependency-free plugins .

import ClassicEditor from "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Load the custom upload adapter as a plugin of the editor. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Toolbar setup

In builds that contain toolbars an optimal default configuration is defined for it. You may need a different toolbar arrangement, though, and this can be achieved through configuration.

Each editor may have a different toolbar configuration scheme, so it is recommended to check its documentation. In any case, the following example may give you a general idea:

ClassicEditor .create(document .querySelector("#editor" ), ( toolbar : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));

The above is a strict UI-related configuration. Removing a toolbar item does not remove the feature from the editor internals. If your goal with the toolbar configuration is to remove features, the right solution is to also remove their respective plugins. Check above for more information.

Listing available items

You can use the following snippet to retrieve all toolbar items available in your editor:

Array .from(editor.ui.componentFactory.names());