Skip to content →

Month: June 2012

Install a WYSIWIG editor on Drupal in 6 clear steps

Published June 8, 2012 by Jo Jordan

I hope these instructions will save other people that many hours I spent.

Situation

I am setting up a blog with Drupal and I want to add a WYSIWYG.  If you blog already, you will recall that WordPress, and very likely other blog progams, allow you to write directly onto the screen.  This is called “Visual”.  Alternatively, you can write in plain text and add HTML (e.g., mark a heading with  <h1>).  This is called HTML.

The core of Drupal comes with HTML only.  I am trying to add a WYSIWYG or Visual option.

Overview

Basically, we have to

  • Download and install the WYSIWYG module.
  • Go to Configuration and look for WYSIWYG profile.  Select it.
  • Look at at the choice of WYSIWYG editors.  I chose CKeditor.
  • Make a new folder in the root directory of your website.  More  just now.
  • Download and unpack the CKeditor following the link provided.
  • And now for the trick.  Rejig the position of the files of CKeditor.

Taking these steps one-by-one.

#1 Download and install the WYSIWYG module

You have two choices.  Install the WYSIWYG module manually (go to Modules in the top tool bar) and then remember to install the module which requires only that you check a check box.

Alternatively, if you have already installed Drush, go to your Windows Command Line (at Start, All Programs, Accessories), check Drush is working by typing “Drush Status”, and then change your directory to your website.  “cd c:wampwwwmywebsitenamesitesallmodulescontrib”.

Use Drush by typing

drush dl wysiwyg

drush en –y wysiwig

Note the module name is typed in lowercase.   The commands just mean “use drush to download wysiwyg” and “use drush to ‘enstall’ wysiwg”.

#2 Find the WYSIWYG Profile

Don’t use the profile on the Modules page.  Select Configuration on the top tool bar and look for the WYSIWYG profile on the left.  It should be immediately under “Text formats”.  If you cannot see it, go to your modules folder, delete WYSIWYG and start again. At least, that was my solution.

#3 Choose a WYSIWYG editor.

If you see the WYSIWYG profile, select it and you should see a long list of WYSIWYG editors all highlighted in blue.

I chose the first one, CKeditor.

Now, don’t rush.  This is not a module.  It is a library.  So, the download instructions are different.

#4 Make a folder to store the library

Using Windows Explorer, make a folder to receive the library.

I am working in WAMP and I will make a library folder at “sites/all.”  So I create C:/wamp/www/sites/all/libraries.

#5 Download the WYSIWYG editor library

Now go back to the screen where you had the choice of editor (highlighted in blue), download the library, and unpack it into your library folder.

#6 Rejig the files in the library

And now the catch which I will try to explain well as it caught me out for a while.

You will know have two folders, both containing files.

C:/wamp/www/sites/all/libraries/ckeditor

AND

C:/wamp/www/sites/all/libraries/ckeditor/ckeditor

Copy all the files from the lower folder (ckeditor/ckeditor) into the upper folder.

Summary

Now when you go back to the top tool bar and select configuration, and go to the WYSWYG profile, you will see a boring white and grey table containing the label “Input Format”.  Congratulations!  You have done what defeats many – activated the CKeditor on Drupal.

Use the drop-down lists to pick the CKeditor and save.  Nothing happens, so go back to the WYSIWYG profile and you will see a new screen where you can “edit” the settings.  This is where you set up your WYSIWYG editor.  Reward yourself. Here comes another learning curve!

Have I written on a similar topic?

2 Comments

Install Drush on WAMP slowly but successfully

Published June 7, 2012 by Jo Jordan

I am presently building a website based on Drupal using my WAMP server on my laptop as a development site.

In these notes, I record the rather frustrating task of installing DRUSH. Drush is a facility for automating repetitive tasks involving in clicking together a Drupal site.   In particular, I wanted to simplify the tedious process of downloading and implementing all the modules needed to create a website.

Where I start from

These notes begin when two important stages have been completed.

Completed: Install a Wamp Server on your laptop.

Completed: Use a 5 minute install to create a Drupal site.

I am also assuming email has been set up for your development site and that you have looked around sufficiently to find the Modules tab at the top of the page.

It might be useful to install and activate one Module by hand so you appreciate the timesavings involved in using Drush.

Getting oriented: check your file structure

It is also helpful to look at your file structure before you begin.  I have WAMP stored under c:wamp and I store useful tools that I have downloaded from the internet at c:tools.

Each of my websites is stored in c:wampwwwwebsite1, c:wampwwwwebsite2, etc.  If the website is based on Drupal, then Drupal is placed in the website folder.  This means I may have more than  one copy of Drupal on my laptop. That strikes me as inefficient, but that is my set up at present.

Find Drush and gnuwin32 online

To get Drush, working, locate the Drush site through Google and download version 5 (not 4 – it doesn’t work  on Windows) to a folder called Drush under c:tools.

Now find gnuwin32 using Google and download the following using whatever setup.exe there are.  Gnuwin32 will give you Unix commands.  Download the following into your Program Files (x86).

  • Libarchive
  • Gzip
  • Wget
  • Gtar
  • Bsdtar

An extra step

I found advice to copy bsdtar.exe onto tar.exe.  No feedback occurs at all so it might be idea to run through the whole setup and if you have trouble, come back to do this step.

Adjust your path statement

Now adjust your Path statement (very carefully).  Adjusting the path statement allows you to call Drush from c:tools and for Drush to call PHP and SQL from WAMP and to use the Gnuwin32 commands.

Practically, open Word or a text editor, and then open Windows Explorer.  Go to c:toolsdrush and confirm that you can see the drush.bat file.  If so, copy the path, e.g., c:toolsdrush from the browser at the top of the screen to the text editor and add a semi-colon (;).

Now do the same for the other critical components.

  • C:Program Files (x86)Gnuwin32
  • C:Program Files (x86)Gnuwin32bin [where gzip hangs out]
  • C:wampbinphpphpn.n.n [whatever numbers you have]
  • C:wampbinmysqlmysql.1.36bin

You should have a long line of paths separated by semi-colons(;).

Now find your path statement. Go to Computer/Properties/Advanced/Environment Variables and be very careful. Messing this up can mess up the entire system.  It is also hard to see what you are doing.

Make sure the current Path Statement ends with a semicolon (;).  Copy the extra paths from your text editor and save.

Test the installation of Drush

Get your Command Line (got to Accessories) and check whether all is well by typing “drush status”.

If all looks sensible, then you are ready to download another module.  First, go to Windows Explorer and add a subdirectory to your website as follows.

c:wampwwwmywebsitenamesitesallmodulescontrib

Then use the Windows Command Line to work within this new directory.

  • Cd c:wampwwwmywebsitenamesitesallmodulescontrib

Then

  • Drush dl module
  • Drush en –y module

Conclusion

When you log in to your website the module should be installed and activated, saving you a lot of effort.

Just remember to use the CLI to work within the subdirectory so that Drush downloads here and not elsewhere.

Check out Similar Posts

One Comment