Aug 4, 2012

Drupal 7 + WYSIWYG + CkEditor | Install and configure




Before we start how to Install and configure Wysiwyg and CKEditor into your Drupal site , lets have a quick look about it?

What does WYSIWYG stands for?
It stands for What You See Is What You Get

Why do we use it?
WYSIWYG editors are used to generate the HTML code necessary for viewing web page content.

How useful they’re?
They are particularly useful for people with limited or no knowledge of HTML code in other words you do not need HTML tags to use.

As you create your content, the editor creates the code in background.

For example, if you want your text to appear in different colours, fonts in different sizes, all you need is to highlight the text and select the appropriate option from the tools available in the editor.

What is CKEditor?

CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. 
This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Installation and Configurations
  • Download wysiwyg module from http://drupal.org/project/wysiwyg
  • Extract to your (modules sites/all/modules) directory
  • Then navigate to admin/config/content/wysiwyg to download the editor Library you want to install in your site
  • So, here I am going to select CKEditor
    • and I downloaded it from http://ckeditor.com/download
    • once the .zip file is downloaded extract the file and place it in sites/all/libraries folder
  • Go back again to admin/config/content/wysiwyg, now you’ll see the window as shown below in image 1.0

Image 1.0
  • Here is the place that I am going to select which input format is going to use the CKEditor/Wysiwyg
  • I’ll select the Filtered HTML format and hit “Save” (when the input format is selected to be filtered html I’ll be able to see the CKEditor whenever I create a block, node etc...)
  • ^^^ Even after the above step we’ll not find the needed icons or plugins in the editor, it will look simply plain

Image 2.0

  • Now you need to enable all the plugins that you need to appear in the CKEditor as shown in the Image 4.0 Navigate to admin/config/content/wysiwyg/profile/filtered_html/edit and expand the option “Buttons and Plugins” and check all the plugins that you wanted to appear in the Editor.
 
Image 3.0

  • We’ve done it! didn’t we ? check it for yourself , go and create a content , make sure the input format is “Filtered HTML" ------
    Boooom!
Image 4.0

Aug 1, 2012

Drupal Quick Tip: Drupal 7 FAQs | Drupal Modules | Drupal Panels | Drupal Questions | Drupal Doubts


Common
  • What is Drupal?

  • What is module in Drupal?
Module is like an addon/plugin that you install and enable in drupal to enhance and
expand features in your site. The modules are developed by the drupal community

Drupal 7
  • How do I get the Admin menu as Drupal 6?
Install and enable the module Administration module and Disable the module “Toolbar”
which comes with the core modules in Drupal 7

  • How to enable the “PHP Code” filter when creating a content?
Go to Modules list (/admin/modules) and enable “PHP filter” module under core category

  • I cannot create a Panel Page in panels !
Enable the  “Page manager” module in the modules page

  • I want to create a content type which has my taxonomy terms as a field too !
When creating a feild in your content type make sure you select the field-type as

  • Can I create dummy contents in Drupal 7?
Yes, you can!
Install the Devel module and enable the Devel Genrate module too (which is a sub
module of it)

  • How to add conditional stylesheets in Drupal 7
Download and install the “conditional stylesheets” module from
http://drupal.org/project/conditional_styles and add the below code in your .info file as
need

  conditional-stylesheets[if IE 7][all][] = ie7.css



  • Where do I place my new custom panel layout?
It should be placed in layout folder inside your theme folder eg:
sites/all/themes/mytheme/layouts

Every week we update the article! stay tuned !

Follow by Email