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

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

In Drupal 7, as in the sixth version, we need to install the editor. Of course, you can not 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 cms bundle with the editor.
drupal 7.17
CKEditor - WYSIWYG HTML editor 7.x-1.11
CK Editor 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 much easier.

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

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

1. Download 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 editor CK Editor 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 as follows: site/all/libraries/ckeditor

On the modules page, enable and then configure.
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 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 familiar visual editor.

If the editor is not displayed:
Check the correctness of the selected module releases for your version of Drupal. Try changing to another release.

Customizing CKEditor profiles

1 step. Setting up the Advanced profile in CKEditor.
Advanced (advanced, with image uploads, etc.)
Go to "Management > configuration > ckeditor - admin/config/content/ckeditor
Set up the Advanced profile, click the “change” link opposite the Advanced profile.
Appearance of the editor (Editor appearance):
We choose color.

Drag and drop the buttons you want.

We choose Russian language.

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

2 step. Full profile setting in ckeditor
We go "Management - configuration - ckeditor" - admin/config/content/ckeditor
You can leave the settings by default, select the Russian language.

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

A little from the Drupal 7 review, such a mini positive review.
In the seven by default there is 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 decrease.

What problems are encountered when working with the editor

CKeditor doesn't show all buttons

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

• There are few buttons in the Basic Package.
• Standard Package - there are more of them.
• The full set is in the Full Package - download it if you want to use the maximum.

Installing and configuring the Elfinder file manager for Drupal 7

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

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

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

1. Download script ]]> ]]>

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

1. Setting 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.
Above, I have already described setting up editor profiles.

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

Now everything should work, but I can’t understand why this is not in the Drupal core? Instead, several editor options for every taste. Which is too good. ;)

New working link

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

There is a glitch with adding new voids () with each edit.

It was revealed that a 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 set in the content type. It turns out double use of announcement compartment: manual and automatic.

Path to setting up the ad display:

Home » Administration » Structure » Content Types » Article » Manage Display

Advice. Should be set up appearance remove the teaser-drupal button in the visual editor 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.

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

How to install the module read.

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

3. Insert links. Out of the box, the insert links dialog box contains a bunch of unnecessary and incomprehensible things. We replace it with the Simple link plugin. How to install, see paragraph 2. We connect (see item 1):

Config.extraPlugins = "SimpleLink";

A new icon (button) of the plugin will also appear.

4. Insert images. Here everything is the same as with links, you can put the Simple Image plugin to insert images by link.

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 .

couldn't figure out why the plugin wasn't starting until I looked in the log

5. Appearance. By default, the Moono skin is used, but I wanted to bring the appearance to the BUEditor's appearance.

this is what BUEditor looked like

7. Place holder. To add a placeholder, install the plugin (see step 2) Configuration Helper . We connect (see item 1):

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

8. Emoticons. The insert Smiley plugin is responsible for smiles in CKEditor "e, it is included in the standard package - Full Package.

This is how the emoticons look out of the box:

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

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

Write 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 emoticons in (default: 8) smiley_columns

config.smiley_columns = 6;

That's what I did

9. Spell checking browser. As written UksusoFF browser-based spell checking is disabled in CKEditor.

Config.disableNativeSpellChecker = false;

10. Context menu. In CKEditor, when RMB is pressed, it opens context menu, not the browser's native menu

This article will show you how to install a visual editor on 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 buttons will be available: set bold text italic font, lists, create a link delete a link, and emoticons (see below for an example).

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 text editor shown, one thing I didn’t 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.