Loki WYSIWYG editor integration

[mrjiles]

Successfully integrated Loki WYSIWYG editor into sNews.  Very simple installation (even in sNews 1.7 MU).  Loki is a lightweight editor... information available at: http://apps.carleton.edu/opensource/loki/


1. Download the Loki package from the website and place in a web accessible folder

2. In the title() function, below the last echo, add the code below.  This will be line 252 in a default 1.7 installation, other installs, search for title().  Note: edit the src="" to reflect YOUR path.

Code:

echo '
<script src="/snews/loki/loki.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
     Loki.convert_all_textareas();
</script>
';

3.  That's it!!  Depending on your sNews setup, other changes may be necessary (works great for me though).  More install information/available options for the editor are available at: http://code.google.com/p/loki-editor/wiki/Installation.  The code above simply converts all textareas into a Loki editor (when logged in).  If you need a specific editor replaced, change:

Code:

Loki.convert_all_textareas();

to

Code:

Loki.convert_textareas(["TEXTAREA_ID"]);

One feature I'm working on now is an "image feed" feature.  The Loki editor appears to accept an RSS for the "insert image" function, for selecting images from your server.

[Keyrocks]

Welcome Mr. Jiles... and a first +karma for sharing Loki with sNews members. I haven't given it a test-run yet but I did run through their online demo and I like what I see so far... so I will need to download and give it a run soon. 

[emailoo]

Unfortunately
it does not work in Opera 

[Keyrocks]

Unfortunately
it does not work in Opera 

Ohhh... well we can't have that can we?  Still, it does look useful for those who (at least) use IE7.

[emailoo]

Opera Rules!

Making you faster 

And so seriously:
Tools must be universal for all.
How does this not mean that this is a hobby.

[Nicu Alecu]

Loki looks nice and promising. Semantic markup is important!
On google code it sais Opera & Safari support is on the way.
On the other hand, there are some significant issues which I don't want to tackle with just now ... so, for non-techie clients who want to edit their own content, I'll stick with TinyMCE (not really semantic, but very easy to explain to users) and for my personal use, I'll stick with WYMeditor, which is pretty much what I always wanted: I can type away really fast, I take care of the semantic side myself by just looking at the generated code but not always, since it visually shows the markup as you type... and BONUS: works great with the sNews preview function, no need to disable it!

[cyberderf]

Thanks for this !!!   I will test it. Any news for the image feed feature ?

[cyberderf]

Too bad I couldn't make this works in Firefox 3!  I was able to use it in Explorer 7 tough. I think I will remove it until a solution for Firefox comes.

[Frankc]

I for one like this Loki WYSIWYG editor but have a problem with it and hope somebody can help please?

It's pretty easy to install and the first time when I go to edit article Loki worked properly.

On the second install I however choose ADD new article and Loki don't work at all. Checked the other installation and the same apply. Works with EDIT but not with ADD article.

Loki loaded but don't display the icon's. If you however your mouse where the icons should appear you briefly see the link description but that's it.

What I try to figure out is what is the difference between EDIT article, where Loki load and works perfectly, and Add New article where Loki don't works properly??

Any help would be appreciated please.

[jean01]

Does not work at all with Vista IE7 or FF3 with version 1.7

[Frankc]

Strange but when I test in Mozilla Firefox the opposite is true.

In IE6 Loki works with EDIT but not NEW articles. (as per my post above)

In Firefox Loki works with NEW but not EDIT articles.

(There is by the way new version of Loki available and I downloaded and test with that to see whether it fix the problem but the same apply)

Seems as if Loki within sNews only integrate into ONE text area and not all as it's supposed to be so I will try to integrate per individual text area name.

[Frankc]

Potential bug?

After tried for some time with different settings the difference between EDIT and NEW articles seems to be the way how sNews create the text area.

Output source

Code:

New Article
<textarea name="text" rows="2" cols="100" id="txt"></textarea><br />


Edit Article

<textarea name="text" rows="2" cols="100" id="txt"><P><STRONG>Welcome at the Web Hosting Partner Site.</STRONG></P></textarea><br />

Input code

Code:

case 'textarea':
$output = '<p>'.$lbl.':<br />
<textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.
'</textarea><br /><script type="text/javascript" charset="utf-8">
Loki.convert_textareas(["txt"], {options: "default"});
</script>'; break;
}
return $output;

Loki convert per textarea ID and not textarea NAME that's why I used txt (id) and not text (name)

[mash.ppps]

I've successfully solved the integration of Loki into sNews for me.

Using sNews 1.7, Loki 2.0.2 and Firefox/Iceweasel 3.0.6, I can now edit new and existing Articles and/or Pages with Loki.

There's only one little drawback, but it's not annoying for me:
when editing existing Articles/Pages, Loki starts in it's "HTML-Source-View".
But one single click on the visible Toggle-Button (shown as "<>") switches back to Loki's WYSIWYG-View.

Also People using the Commenting-Functions of sNews on their Site will have to do some additionally tweaking, if they don't want Loki to appear in the Comments-Textareas.

So this worked fine for me:

1. In the File "snews.php", add the following Lines to your "title()"-Function (see first post for correct location):

Code:

echo '<script src="/path/to/loki/loki.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
   Loki.convert_textareas_by_class("loki", {options: "power"});
</script>';

Of course you have to use the correct Path to your "loki.js" in the "src"-Tag above.


2. Also in File "snews.php", in Function "html_input" (look for "case: textarea"), change the Line

Code:

<textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.

to read

Code:

<textarea class="loki" name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.

That's all.

As you can see, I'm simply adding an "class"-Tag to the Textarea-Form and initialize Loki with it's Class-Feature (see Loki-Doc.).
The Value of the "class"-Tag is freely choosen, you can use whatever you like here. It only has to match the Parameter you'll use in the Loki-Initialisation.

If you don't like the sNews-Editing-Buttons to appear below the Textarea, you may additionally comment out the call to "buttons()" in the "form_articles(..)"-Function.
But I have chosen to keep them, so I can also use them in Loki's "HTML-Source-View".

[Palmik]

Ok, if you want to use loki just for editing, creating articles/extras then find this

Code:

case 'textarea':
$output = '<p>'.$lbl.':<br />
<textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.
'</textarea></p>'; break;

and replace it with this

Code:

case 'textarea_loki':
$output = '<p>'.$lbl.':<br />
<textarea class="loki" name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.
'</textarea></p>'; break;

then find this (in the form_article function)

Code:

echo html_input('textarea', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '100', '', '', '');

and replace it with this

Code:

echo html_input('textarea_loki', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '100', '', '', '');