Call for testers: new Online Editor

Thursday 23 October 2008 1:29:29 am

Well, I managed to fix the translations, so never mind, but there is a problem now when I try to publish the object with inserted media in any xml block attribute - I can see the media in the edit area, but after i hit "Publish" button, changes do not go to database... is that again related with the "not supported plugins" thing? I remember I had this problem with the ezdhtml when I integrated the flash for ezvideoflv/ngflashvideo( with custom tag ) to be visible and playable into the xml edit area even before publish, still in edit mode, but the problem there was from the parser script, and this here doesn't seem to be the case ....

I searched for some time through the javascript and php of the extension, but I couldn't find any clue as to what's the problem...

If anyone has an idea, please, it will be helpful. Thanks.

Iguana IT - http://www.iguanait.com

Tuesday 28 October 2008 8:27:58 am

Michaël D.
You need to allow that file in your rewrite rule, but don't allow php files generally, use the name of the file plus parts of the path as well to make sure nothing else is exposed.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Friday 31 October 2008 1:24:15 am

Hi Russ!

Even though the editor is new, the format behind the editor is still the same ('ezxml'), with it's strict focus on separating content and design. It has not been within the scope of this project to change the internal format so many of the new features in the new editor is accomplished in the layer between TinyMCE and eZ Publish (the tinymce theme, aka 'ez' and the xml input handler).

The images your editing is really <embed> content in eZ, and the src is only there to be able to preview the image object.

Now, to be able to add external images like you want, it will have to be supported by the xml handler, witch will have to map it to a specific custom tag for internal storage, like done for the underline tag.
Or you can use literal.html, but then there won't be any preview in the edtior or dialog to be able to set it's property, only pure code.

ref:
http://ez.no/doc/ez_publish/technical_manual/4_0/reference/xml_tags

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Monday 03 November 2008 6:49:45 pm

Thanks for the response André,

So I've been working to get my 3rd party images (from external servers) inserted into ez OE5.0 and have created a simple custom tag to do this. I created 'external-image.tpl' in my extension's 'ezxml' template directory and edited ezoe's 'tag_custom.tpl' file.

Doing this successfully inserts 3rd party images into OE5.0 so you can render a preview within OE itself and can view the image "in-page" after saving. However, when selecting the "edit" icon <b>after</b> saving, the image is no longer viewable in OE as it was before, even though it's obviousely "still there" (you can still see it after previewing/saving). I've looked and looked but am not sure where the Template or JS code is that renders the "in-editor" display. It looks as if it might be 'ezxmltext_ezoe.tpl' but can't see what I need to edit to ensure this works.

Here is what I have so far:

* Code Purpose: "Hack" to render a view of a 3rd party image <b>directly inside OE5</b>.
* Template: extension/duty/design/ezwebin/templates/content/datatype/view/ezxmltags/tag_custom.tpl.
* Issues: This works when inserting the 3rd party image the first time, but not for subsequent views - e.g when re-editing an existing content-object, the <img /> element has been stripped out somehow.

...
tagGenerator: function( tag, customTag, text )
{
	if ( customTag === 'underline' )
		return '<u id="__mce_tmp" type="custom">' + (text ? text : customTag) + '<\/u>';

	/* Simply added another "else if" block below: */

	else if ( customTag === 'external-image' && ez.$( customTag + '_inline_source' ).el.checked )
	{
		var popup_src = document.getElementById('external-image_src_source').value;
		var popup_alt = document.getElementById('external-image_alt_source').value;
		var popup_cls = document.getElementById('external-image_cls_source').value;
		return '<span id="__mce_tmp" type="custom"><img src="'+popup_src+'" alt="'+popup_alt+'" class="'+popup_cls+'" \/><\/span>';
	}
	else if ( ez.$( customTag + '_inline_source' ).el.checked )
		return '<span id="__mce_tmp" type="custom">' + (text ? text : customTag) + '<\/span>';
	else
		return '<div id="__mce_tmp" type="custom"><p>' + (text ? text : customTag) + '<\/p><\/div>';
},
...

* Code Purpose: To render a view of a 3rd party image <b>while previewing</b> and <b>after saving</b>.
* Template: extension/ezoe/design/standard/templates/ezoe/external-image.tpl
* Issues: None

{* Template to deal with 3rd Party Images *}
{* Template is associated with an eZ Global Variable declaration in settings/override/site.ini.append.php *}
{* The vars: $src, $alt and $cls come from the Custom Tags dialogue box in the eZ GUI *}
<img src="{$src}" {if and(is_set($alt),gt($alt|count_chars(),0))} alt="{$alt|wash}" {/if} {if and(is_set($cls),gt($cls|count_chars(),2))} class="{$cls|wash}" {/if} />

As usual - any pointers would be most welcome :-)
Thanks a lot,
Russ

Russell Michell, Wellington, New Zealand.
We're building! http://www.theruss.com/blog/
I'm on Twitter: http://twitter.com/therussdotcom

Believe nothing, consider everything.

Monday 10 November 2008 4:48:16 pm

Thank you André! I will check this out.

Meantime, in addition, I notice that the 3rd Party addon "YouTube" uses almost exactly the same approach that I posted above, except it's all nice and wrapped-up as an addon.

A problem exists though with the custom-tag template itself. Keeping it in extensions/youtube/design/standard/templates/content/datatype/view/ezxmltags - renders the 3rd party object invisible when previewing the page.

Moving this template to the overall extension's equivalent directory, fixes this.

extensions/duty/design/ezwebin/templates/content/datatype/view/ezxmltags/

(Where "duty" is the name of all my template, javascript and CSS modifications, wrapped-up as an extension overriding 'ezwebin')

Just thought I'd post some findings :-)

Ta
Russ

Russell Michell, Wellington, New Zealand.
We're building! http://www.theruss.com/blog/
I'm on Twitter: http://twitter.com/therussdotcom

Believe nothing, consider everything.

Wednesday 12 November 2008 1:56:05 pm

Hi again André,

That one doesn't preview the movie in the editor, so if you don't need to preview the custom tag in the editor, then you don't need to hack the editor..

True, but I modded the plugin's template to embed an <img /> element, not an <embed> and/or an <object> element as I'm referencing 3rd party images not .swf or other movies. So the hack needs to stand and it works well.

The only remaining issue is that when a user wishes to delete or swap an existing 3rd party image with another - by selecting it with the mouse, he has to be able to select the custom-tag content (In this case my <img /> element) <b>and</b> the "hidden" <span> element, in order to remove any reference/trace of the old image which you can't do easily within the editor.

In older versions of TinyMCE you would simply click an element in the path-bar, thus selecting it and all its child HTML elements, and hit delete. With the TinyMCE version in-use with eZ, you get a popup window, which <b>a:</b> needs to be set to be a proper JS popup and not a positioned <div> in ezoe.ini and <b>b:</b>Needs to be closed anyway before the <span> and custom-tag are both selected and delete can be hit.

Does this make sense?

<b>Default ezoe behaviour (with my 3rd-party image mods):</b>

* User inserts 3rd party image:
- ezoe dumps visible <img /> custom-tag
- ezoe dumps invisible <span> element
* User clicks on visible image
* User hits 'delete' key
- ezoe removes visible <img /> custom-tag but leaves invisible <span> element (obviously) thus causing problems

Or:

* User inserts 3rd party image:
- ezoe dumps visible <img /> custom-tag
- ezoe dumps invisible <span> element
* User clicks on 'custom.insert-image' (for example) in ezoe's path-bar
- ezoe pops-up a postioned <div> dialogue (older TinyMCE's didn't do this when selecting stuff in the pathbar)
* User closes dialogue
* User hits 'delete' key
- Nothing happens. User is only able to physically select the image.

<b>better ezoe behaviour (with my 3rd-party image mods and #Plugins[]=inlinepopups set in ezoe.ini):</b>

* User inserts 3rd party image:
- ezoe dumps visible <img /> custom-tag
- ezoe dumps invisible <span> element
* User clicks on 'custom.insert-image' (for example) in ezoe's path-bar
- ezoe pops-up a JS popup-window dialogue (older TinyMCE's didn't do this)
* User closes dialogue
* User hits 'delete' key
- ezoe removes visible <img /> custom-tag
- ezoe removes invisible <span> element

Is there a setting I've missed to disable pop-ups when slecting stuff in the pathbar?

I appreciate "hacks" are prob not deserving of help to the same extent as legitiamte bugs/suggestions might be so any help is always appreciated.

Thanks heaps as usual André :-)
Russ

Russell Michell, Wellington, New Zealand.
We're building! http://www.theruss.com/blog/
I'm on Twitter: http://twitter.com/therussdotcom

Believe nothing, consider everything.

Friday 05 December 2008 12:03:49 pm

Way to go André, cannot wait to test it.

Tony Wood : twitter.com/tonywood
Vision with Technology
Experts in eZ Publish consulting & development

Power to the Editor!

Free eZ Training : http://www.VisionWT.com/training
eZ Future Podcast : http://www.VisionWT.com/eZ-Future

Monday 08 December 2008 2:43:29 pm

Sorry André, does that mean that custom css classes can be applied to any kind of standard tag while editing? Maybe even using the "styles" dropdown from Tiny?

Principal Consultant International Business
Member of the Community Project Board

Tuesday 09 December 2008 3:10:25 pm

Unfortunately, I think I misunderstood "attribute" for "tag".
Excellent news, but not as spectacular...

Principal Consultant International Business
Member of the Community Project Board

Wednesday 10 December 2008 7:32:34 am

Hi !

I'm trying this nice editor because I would like to install it on a new 4.0.1 site.

I encouter a problem with the images positionment : when I edit my xmlblock with the new online editor, all is OK, I get the looked for alignement.

But when viewing the node, images are never positioned like in editing mode.

Here are the screenshots :

Editing :
http://www.hiboox.fr/go/images/informatique/editing,4f0339e8a027109d0fb3be63b3897ded.png.html

Viewing :
http://www.hiboox.fr/go/images/informatique/view,324d7dc645f660f3c814ec7bd62c1786.png.html

Is there something to do ?

Thanks in advance !

eZ Publish Freelance
web : http://www.webaxis.fr