WYSIWYG Editor with EE image integration

Hi Malcolm,

Looks very nice. Just installed this to give it a go. I don’t normally use any WYSIWYG editors at all on any sites but thought I would give this a try. Definitely a synch to install so great news there 😉

Would be great if perhaps somehow the editor could tie in even further with the File Upload Locations in ExpressionEngine so that you could also upload using the editor and then the uploaded file would be inserted right along in the paragraph where your caret is.

Very nice addition for ExpressionEngine though and thank you for sharing it with everybody that is very kind indeed.

Best wishes,

Mark

Hi Malcolm,

thanks for providing epEditor, it is so much better than tinyMCE etc. I really wonder why there are so few simple rich text editors. Most of the time, all I really want is some very basic formatting (bold, italic), links, headings, lists and images - no need for multiple rows of toolbars! The user should be able to do any more, he just messes up the design when he does! And for those few cases when more options are needed, provide other styling options through CSS classes as in epEditor - perfect for our needs!

That said I have to say epEditor is not perfect either: * when you sitch to html view and save your entry, it converts the html-entitities! * depending on which browser you use, different things happen when you copy text from somewhere and paste it into the editor. I had forced line-breaks etc. in my texts that where quite hard to get rid of! * also depending on the browser, some things don’t work very well - e.g. selecting an inserted picture is not possible in safari * sometimes the editor doesn’t load at all. I was able to fix this to some degree by changing the timeout time in epEditor_init(). However, if you increase that load time you also have to wait longer until the editor loads… * sometimes the editor just hangs. you can’t edit anything anymore. only solution is a reload

I’m only using the editor in Safari and Firefox on the mac, so that might be the reason for some of these problems.

Anyway, this is a very nice editor and I hope it gets developed further - it definately needs better robustness. Also, image upload integration would very nice!

Thanks for you work!

Hello

was trying to give it a shot - no luck unfortunately - install went o.k. - enabled extension - then I’m kind of struggling where to go from there - how to I activate the editor for some custom fields I have in the editor?

Thanks for your instructions to get this going.

Mmjaeger, sorry to hear that you’re having problems. After you enable the extension you should be able to:

• Go into Custom Weblog Fields • Select a Field Group • Click ‘Create a New Custom Field’ • Name your field and select ‘EPEDITOR’ from the ‘Field Type’ drop down

Then, assuming this field set is associated with a weblog, when you create a new entry the epEditor should load with the form.

If you can’t select EPEDITOR’ from the dropdown go to: Admin – Utilities – Extension Manager and check the extension is showing and is enabled.

If you have done all that and the editor doesn’t load check the post from Björn above for possible problems.

Björn, thank you very much for your constructive criticism of the editor. Most of the issues you have encountered are known problems and we are working towards resolving them.

I must confess that we haven’t done much testing in Safari so will dedicate some time to this in the near future.

The problem with the editor not loading is something we’re a little stuck on. When used outside EE we initiate the editor with a call to the addLoadEvent(); function (http://simonwillison.net/2004/May/26/addLoadEvent/), but this doesn’t work inside EE so we have reverted to the rather crude window.onload = setTimeout(); method. We found that a delay of anything less that 1 second and the editor never loads, but, as you point out, to be certain it loads means increasing the delay and this is far from ideal.

If anyone has any ideas about how to improve this we’d love to hear from you.

We’re currently working on a new release and we’ll post back here as soon as it’s ready. Thanks, Malcolm

That’s exactly what I did - still no luck - all I get is a new empty textarea but no way to edit existing textareas.

Mmjaeger, can you post details of your browser, OS and EE version? Thanks.

Mmjaeger, can you post details of your browser, OS and EE version? Thanks.

OS X 10.5.6 - EE 1.6.7, Safari AND Firefox - I tried both

OS X 10.5.6 - EE 1.6.7, Safari AND Firefox - I tried both

The editor works fine for me in Firefox on OS X. Are you running Firebug? If so check for JavaScript errors.

If nothing is happening and you get no errors if may be that the path to the script files is incorrect and the page simply isn’t finding the JavaScript. If you view the page source of the edit screen you should see this block of code just before the </head> tag

//<![CDATA[
var ep_script_path = "/scripts/epEditor/";
var ep_editor_width = "95%";
var ep_editor_height = "250px";
//]]>

As you can see the script path is set from the server root, so if your EE installation isn’t in the root folder you will need to change the script path in the extension settings.

Beyond this I’m at a loss, sorry.

I also had to adjust quite a few path variables in a few epeditor files…

I also had to adjust quite a few path variables in a few epeditor files…

Hi Björn, could you be specific about what you had to change. The script path should be all you need to edit. Thanks, Malcolm

Hi Björn, could you be specific about what you had to change. The script path should be all you need to edit. Thanks, Malcolm

Let me see

epEditor.image.php -> path to path.php epEditor.link.php -> path to path.php

I had to edit this paths because I’m not running EE in the root directory of the server but in a subdirectory… I just set a full path instead of the relative path that didn’t work…

Didn’t have to change that path to the script though… btw. apart from the problems I mentioned before, the editor works fine on Safari and Firefox on my Mac here…

OS X 10.5.6 - EE 1.6.7, Safari AND Firefox - I tried both

The editor works fine for me in Firefox on OS X. Are you running Firebug? If so check for JavaScript errors. If nothing is happening and you get no errors if may be that the path to the script files is incorrect and the page simply isn’t finding the JavaScript. If you view the page source of the edit screen you should see this block of code just before the </head> tag

//<![CDATA[
var ep_script_path = "/scripts/epEditor/";
var ep_editor_width = "95%";
var ep_editor_height = "250px";
//]]>

As you can see the script path is set from the server root, so if your EE installation isn’t in the root folder you will need to change the script path in the extension settings. I did run Firebug - no errors showed up. as to the path, I don’t run EE in the root but a sub-dir - let me try to change the path settings and give it another try. Thanks for your very responsive help. Beyond this I’m at a loss, sorry.

this is what I have before the head tag ends:

[removed]
//<![CDATA[
var ep_script_path = "/Users/Marco/Sites/sites/mmjaeger.com/scripts/epEditor/";
var ep_editor_width = "95%";
var ep_editor_height = "250px";
//]]>
[removed]
[removed][removed]
[removed][removed]
[removed][removed]
<link rel="stylesheet" type="text/css" href="/Users/Marco/Sites/sites/mmjaeger.com/scripts/epEditor/epEditor.css" />

Hi mmjaeger,

I think your script path is wrong. It looks like you’ve set up a local website called mmjaeger.com, and so this is your root folder. Therefore your script path should just be:

var ep_script_path = "/scripts/epEditor/";

not:

var ep_script_path = "/Users/Marco/Sites/sites/mmjaeger.com/scripts/epEditor/";

Change this in the extension settings and see how you go.