widgEditor WYSIWYG module

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

widgEditor WYSIWYG module

Post by nils73 »

Just created a moule using widgEditor ... if anybody is interested in testing it, just follow these steps:

1. download a copy of Cameron Adams 'widgEditor' at http://www.themaninblue.com/experiment/ ... Editor.zip
2. unzip the package
3. create a file called 'widgEditor.module.php' inside the new folder 'widgEditor'
4. copy the following code and paste it to the newly created file and you are almost done

Code: Select all

<?php
#CMS - CMS Made Simple
#(c)2004 by Simon Brown (simon@uptoeleven.ws)
#This project's homepage is: http://cmsmadesimple.sf.net
#
#This program is free software; you can redistribute it and/or modify
#it under the terms of the GNU General Public License as published by
#the Free Software Foundation; either version 2 of the License, or
#(at your option) any later version.
#
#This program is distributed in the hope that it will be useful,
#but WITHOUT ANY WARRANTY; without even the implied warranty of
#MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#GNU General Public License for more details.
#You should have received a copy of the GNU General Public License
#along with this program; if not, write to the Free Software
#Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
#
#$Id$
#
#TODO - install and uninstall, activate and deactivate, choose non-wysiwyg to actually work

class widgEditor extends CMSModule
{
	function GetName()
	{
		return 'widgEditor';
	}

	function IsPluginModule()
	{
		return true;
	}

	function HasAdmin()
	{
		return false;
	}

	function GetVersion()
	{
		return '1.0';
	}
	
	function IsWYSIWYG() {
		return true;
	}

	function WYSIWYGTextarea($name='textarea',$columns='80',$rows='15',$encoding='',$content='',$stylesheet='/modules/widgEditor/basic.css')
	{
		global $gCms;
		$rows = $rows + 10;
		if ($stylesheet != '')
		{
			$gCms->variables['widgeditor_stylesheet'] = $stylesheet;
		}
		if (!array_key_exists('widgeditor_textareas', $gCms->variables))
		{
			$gCms->variables['widgeditor_textareas'] = array();
		}
		array_push($gCms->variables['widgeditor_textareas'], $name);
		return '<textarea id="'.$name.'" name="'.$name.'" columns="'.$columns.'" rows="'.$rows.'" class="widgEditor nothing">'.cms_htmlentities($content,ENT_NOQUOTES,get_encoding($encoding)).'</textarea>';
	}
	
	function WYSIWYGGenerateHeader()
	{
		global $gCms;
	
		if (array_key_exists('widgeditor_textareas', $gCms->variables))
		{
	
		?>
   <style type="text/css" media="all">
	    @import "<?php echo $gCms->config["root_url"]?>/modules/widgEditor/css/info.css";
	    @import "<?php echo $gCms->config["root_url"]?>/modules/widgEditor/css/main.css";
	    @import "<?php echo $gCms->config["root_url"]?>/modules/widgEditor/css/widgEditor.css";
    </style>		
    <__script__ type="text/javascript" src="<?php echo $gCms->config["root_url"]?>/modules/widgEditor/scripts/widgEditor.js"></__script>	
		<?php
		}
	}

	function GetHelp($lang='en_US')
	{
		return "
		<h3>What does this do?</h3>
    <p>This is a very handy WYSIWYG editor with only little features for authors that should not mess with the layout and/or source code.</p>
    <h3>How do I use it?</h3>
    <p>Install it, then go to User Preferences and select widgEditor as your WYSIWYG editor. Now go back to your content and edit it using widgEditor.</p>
    <p>With widgEditor you can:</p>
    <ul>
      <li>create headlines & paragraphs</li>
      <li>make text bold or italic</li>
      <li>create links</li>
      <li>insert images</li>
      <li>edit the source-code</li>
    </ul>
    <p>If you are using stylsheets to design your website, those relevant for links, headings and paragraphs will automatically applied.</p>
		";
	}

	function GetAuthor()
	{
		return 'Cameron Adams';
	}

	function GetAuthorEmail()
	{
		return '2005@themaninblue.com';
	}
	
	function GetChangeLog()
	{
		?>
		<ul>
		<li>
		<p>Version: 1.0</p>
		<p>widgEditor WYSIWYG textarea replacement tool</p>
		</li>
		<li>
		<p>Author: Cameron Adams aka themaninblue.com</p>
		</li>
		</ul>
		<?php
	}
}

# vim:ts=4 sw=4 noet
?>
All you have to do now is to upload the files to your server, install them via module/plugins-dialogue in admin panel and set the preferences to use this WYSIWYG editor. Should work, but I am not really a good coder so there might be some glitches ... comments are welcome, improvements as well.

I should probably mention that I am NOT the author of this pretty cool WYSIWYG editor ... I just adopted it for CMSMS.

Regards,
Nils
pinthenet

Re: widgEditor WYSIWYG module

Post by pinthenet »

I tried it out but it didn't work... Install went OK but the Page Edit didn't show any editing functions and the admin Theme was messed up (no colours),
In the module script I notice you reference modules/widgEditor/basic.css - this doesn't exist

From your description it sounds quite a useful function

John
koehler

Re: widgEditor WYSIWYG module

Post by koehler »

please drop us a link to a working demo,

thanks!

Michael
100rk

Re: widgEditor WYSIWYG module

Post by 100rk »

koehler wrote: link to a working demo,
Something like http://www.themaninblue.com/experiment/widgEditor/? ;-)
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: widgEditor WYSIWYG module

Post by nils73 »

Ooops ... sorry. I should have mentioned, that it would be useful to put the imported styles into one CSS called 'basic.css'

Code: Select all

@import "css/info.css";
@import "css/main.css";
@import "css/widgEditor.css";
Put this CSS file into folder '/modules/widgEditor/css/' and everything should work fine. If you are looking for a working demo, simply download the zip-file, there is a working example included along with a readme.txt containing more options for the widgEditor. You can configure the look of it and many more.

Regards,
Nils
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: widgEditor WYSIWYG module

Post by nils73 »

I have modified some parts in widgEditor and translated it into German. One thing it can do now, is to handle {smarty} elements without messing up the code. Therefore it inserts custom tags (just a workaround) called that are being stripped out when the page is rendered (either for caching or dynamic display).

You will have to modify both '/modules/widgEditor/scripts/widgEditor.js' and '/lib/content.functions.php':

'/modules/widgEditor/scripts/widgEditor.js', Line 124 add

Code: Select all

widgSelectBlockOptions.push("smarty", "Code-Element");
'/modules/widgEditor/scripts/widgEditor.js', Line 675 add

Code: Select all

ellse if (typeof(succeedingElement) == "smarty")
{
theBody.insertBefore(theParagraph, succeedingElement);
}	
'/modules/widgEditor/scripts/widgEditor.js', Line 1602 add after "ul"

Code: Select all

, "smarty"
'/lib/content.functions.php', Line 200 add

Code: Select all

#Strip <smarty> tags when using widgEditor
$tpl_source = str_replace(array("<smarty>","</smarty>"), array("", ""), $tpl_source);
That should do the trick. If you need custom HTML elements, you can do something similar with HTML blobs or simply add the code as a {smarty} user module and it will work. It is a dirty hack but it worked well over here and I like the widgEditor interface for it's clean and easy style.

HINT:
If you would like to see your styles used in widgEditor you will have to add them to widgContent.css and they will show up.

Regards
Nils
koehler

Re: widgEditor WYSIWYG module

Post by koehler »

100rk wrote:
koehler wrote: link to a working demo,
Something like http://www.themaninblue.com/experiment/widgEditor/? ;-)
Thank you! Seams to be a very nice LW alternative.

When do you have a CMSMS module ready ?

Regards,

  Michael
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: widgEditor WYSIWYG module

Post by nils73 »

The module is ready ... all you have to do ist to follow the steps listed here. Or drop me a short message and I will email the module as a zipped file to you. At present I do not plan to create a downloadable version since I am a lousy programmer and have only adopted some lines so that widgEditor is suitable for my needs.

Regards
Nils
yolgie

Re: widgEditor WYSIWYG module

Post by yolgie »

Servus,

Well, there are a view minor mistakes in your adaption of the module that I can identify...
  • there is a typo in your adaption of the 'widgeditor.js' -> its of course "else if" and not "ellse if"
  • instead of basic.css it is enough to enter WidgEditor.css
  • in your 'widgEditor.module.php', by importing main.css and info.css you mess up the design of the cms admin mode
Still the whole thing does not work yet -> there is simply no editor appearing, just a normal textfield...
But the HTML-Source seems to be correct... its just like it can't import the .js file correctly...

MfG

Matthias
Last edited by yolgie on Thu Sep 01, 2005 5:29 am, edited 1 time in total.
yolgie

Re: widgEditor WYSIWYG module

Post by yolgie »

I have reduced the problem now to miniscule size, but I can still not solve it...

The problem occurs only if: themes/default/includes/standard.js is loaded after http://.../cms/modules/widgEditor/scripts/widgEditor.js

My uneducated guess would be tht there is some kind of function or method or bla that is overwritten by standard.js...

Maybe somebody knows what I have to change/do/erase/burn/...

MfG

Matthias
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: widgEditor WYSIWYG module

Post by nils73 »

Matthias,

of course you are right with correcting my mistakes and typos. Thanks for that. As far as CMSMS v0.10 (no beta) is concerned, there have been minor changes that have great effect on how a WYSIWYG module works. Having a short glance I could see that there is no with a given width of 80 like

Code: Select all

<textarea id="content_en" name="content_en" columns="80" rows="21">
I am not quite sure though and right now I have no v0.10 running on my server but I will look into it after my holidays. However if someone knows a bit more, please feel free to speak it out loud. :-)

Regards,
Nils
yolgie

Re: widgEditor WYSIWYG module

Post by yolgie »

Servus,

As a really, really, really dirty workaround i've temprarily replaced the standard.js by an empty file, wich solves the problem for the moment at the cost of messing up the default admintheme...
Maybee I'll find out which part exactly of the js is the evil part ...

MfG

Matthias
thetallguy

Re: widgEditor WYSIWYG module

Post by thetallguy »

I'm new to the forums and CMSMadeSimple as well, but so far I've been very impressed by them both.  I'm having a lot of fun setting up my first CMSMS site!

I picked up on this thread because I wanted a text editor that was faster and simpler than FCK or Xinha or HTMLArea, and widgEditor fit the bill perfectly.  I used Nils' code at the top as a starting point for my own module (thanks, Nils!) and also encountered the same problem Yolgie had, where the editor failed to work.  I was able to figure out the problem and get it working.

The reason that widgEditor and standard.js fail to work together is that both of them try to use the window.onload vector to initialize themselves.  (widgEditor uses it so that it can take over the textarea tags once they're built, while standard.js uses it to fix a lame bug in IE so that the css menus work.)  To fix the problem, I had to change the module.widgeditor code to invoke it directly after the textarea tag, and I had to modify widgEditor.js to not try to grab the windows.onload, since it was no longer needed.

I also eliminated two of the three style sheets, which were interfering with the admin page styles and causing havoc.

For my site, it's now working well.  Your mileage may vary. :)

if people are interested, I'll zip up the whole thing and post it to the development area.  That is, Nils, if you have no objection.

Michael
KnightWolfJK

Re: widgEditor WYSIWYG module

Post by KnightWolfJK »

1 vote for submission to the Forge

:) Thanks
cyberman

Re: widgEditor WYSIWYG module

Post by cyberman »

KnightWolfJK wrote: 1 vote for submission to the Forge
I'm too  :) ...

In moment there's a discussion about standard editor for CMS 1.0. So it would be great users have a choice between many editor modules, not only two.
Post Reply

Return to “Modules/Add-Ons”