Wiz CMS Tutorials

Make Some Rich HTML Style Text Editable

Video Tutorial

First off...

The first 3 steps to edit rich HTML text are almost exactly the same as the 3 steps required to set up for simple text. So before you do this tutorial, you start with the simple text one and then this tutorial picks up at the end of that one. The 3 steps of that tutorial are literally the first 3 steps of this one.

Step 4

Yes, step 4! Because the first 3 steps are in the editing simple text with wiz tutorial. So I'm serious, go read it first! I'll wait...

You back? Now let's pretend we have text to edit very similar text to the text used in that tutorial, but it looks like this:

<h1>My Page Title!</h1>
<p>This is <strong>some neat</strong> text!</p>
<footer>that's all...</footer>

The main difference is that the text we want to edit has HTML tags in it now! We don't want the user to have to learn any HTML to edit it in the text editor, so what to do? Simple! Use the rich text editor instead.

There's only a few differences between setting up rich text and setting up for editing simple text. The first is that instead of just grabbing the text you're also going to grab the HTML tag containing it. That means instead of This is <strong>some neat</strong> text! in your mytext.txt file you're going to have <p>This is <strong>some neat</strong> text!</p> in your mytext.txt file. Notice that the containing <p></p> tags went along with it.

Likewise the snippet from the PASTE-IN-HTML-SNIPPET.txt file would replace the <p></p> tags as well instead of just their content. It would look like this in the end:

<h1>My Page Title!</h1>
<?php echo file_get_contents('edit/mytext.txt'); ?>
<footer>that's all...</footer>

Step 5:

Now for step five. In the EXTRA folder you'll find a folder named wymeditor. Simply make a copy of this folder next to your CMS file. It contains the files/scripts used for the rich editor.

Step 6:

Now you just need to tell the CMS to use the rich editor. If you open up the CMS file in there you'll find a variable called $useWYMeditor. It's not far from the top. It is set to false. You need to set it to true. That will make it look something like this:

// first one is true or false determining if you want to use the WYMeditor
// second one is a path to the wymeditor folder. For example if you put
// the wymeditor folder right beside this file you'd make it "" (or basically
// just empty quotes) since it's right there. If you put it in a folder one
// up from this file then you'd make it '../', '../../' for up 2, etc.
// your content should be in HTML form when using this editor, at very
// least wrapped in <p></p> tags
$useWYMeditor = true;
$pathToWYMeditor = "";

Note that you could have put the WYMeditor files somewhere else and given a path to them with the $pathToWYMeditor variable. But if you put them right next to the CMS file (like we did) then you don't need to change that variable at all.

That Was It

Now if you go to the URL where you put your CMS instance just like we did in the last tutorial it will have a visual rich editor instead of just a simple text box. Neat!

Tutorial Menu Next Tutorial ❯