Install WYSIWYG editing tools for Drupal

Source: Internet
Author: User
Tags drupal
Drupal only provides a highly customizable system without many features. By default, Drupal uses a plain text editor to publish content. In most cases, we need a more convenient WYSIWYG editing tool, and more functions such as selecting and uploading images. Follow these steps to install and configure a visual editor for Drupal:
1) install the WYSIWYG module in the same way as the general module.
After installation, you need to make the appropriate Configuration:
Administer> site configuration> WYSIWYG

2) WYSIWYG is only the API engine provided by Drupal to various visual editors. If you have not installed any editors, you need to install one. Here I select tinymce and decompress it to the sites/All/libraries/tinymce directory under the Drupal installation root directory.
If the libraries directory does not exist, create one by yourself.
At this time, you can choose tinymce as the editor in WYSIWYG settings.
3) After tinymce is selected as the editor, you need to go to administer-> site configuration-> input formats to assign the appropriate options for editor visualization.
At this time, you can go to create content and create a blog entry to see if there is a rich text editor?
4) The editor with the above steps will pop up the following dialog box when you need to insert an image:

Look, there is no button to select the image!
Therefore, we need to add the function of inserting a local image. We need to install the following two plug-ins:
(1) imce Module
After the installation is successful, remember to go to administer-> site configuration-> imce and assign imce permissions to users who need to upload image files. Otherwise, these users still cannot upload images.
(2) imce WYSIWYG bridge module
The functions of this module are to bridge imce and WYSIWYG. Note that this is the responsibility of tinymce with wysiwyg api.
After imce WYSIWYG bridge is installed, remember to configure tinymce and imce in WYSIWYG Configuration:

In administer-> site configuration-> WYSIWYG, click Edit to go to The tinymce profile for filtered HTML page, click buttons and plugins, and check the imce.
Now let's test the image upload function:
In the rich text editor, click "select image". The following dialog box is displayed:

Click the button in the Red Circle to bring up the upload image dialog box:

After uploading the image, select the image and click send to tinymce. Then, you can see the image in the Rich Text Editor:

The uploaded files are stored in sites/default/files by default.
Note:
If you encounter Drupal, it will automatically remove the line break, or the image you added cannot be displayed during browsing, it is likely that the following two problems are involved. Check the filters in the following two places:
1) check whether the input format in administer-> site configuration-> WYSIWYG is correct.
2) Check administer-> site [...].

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.