Re: Re: Re: ZMS-2.11/ZTinyMCE as plugin integration

finally i got tinymce to work somehow properly in zms.

it still isn't perfect. specially switching to ZMS-Standard is still missing.

the trick is to tell tinymce just to init emself on the alternate textarea, which i gave the class' richtextEditor':
tinyMCE.init({
    ....
    editor_selector : "richtextEditor",
    ....
    });
<textarea class="richtextEditor" ....

otherwise it would init all textareas it finds (also the ZMS-Standard stuff)

on submitting the form you have to sync the editors content with its original inited textarea (in this case the alternate):
tinyMCE.activeEditor.save(); ### there should be a loop on inited editors, in case we got more than one textareas to edit.
after that you have to sync the alternate textarea with the ZMS-Standard textarea (thats the one which will get saved):
document.getElementById(elName).value = document.getElementById('alternate_' + elName).value;


<!-- ## BO zms/pugins/tinymce/manage_form.dtml                 ## -->
<!-- ## WORK IN PROGRESS: switching to ZMS-Standard is missing ## -->

<dtml-unless "REQUEST.get('f_zmiRichtextOnSubmitEventHandler')">

<script type="text/javascript">
<!--//

var zmiRichtextElNames = new Array();
<dtml-call "REQUEST.set('count',0)">
<dtml-in "getObjAttrs(REQUEST.get('ZMS_INSERT',meta_id)).keys()">
    <dtml-let key=sequence-item obj_attr="getObjAttr(key,REQUEST.get('ZMS_INSERT',meta_id))">
        <dtml-if "obj_attr.get('type',_.None)=='richtext'">
            zmiRichtextElNames[<dtml-var count>]='<dtml-var "getObjAttrName(obj_attr,lang)">';<dtml-call "REQUEST.set('count',count+1)">
        </dtml-if>
    </dtml-let>
</dtml-in>
<dtml-if "count==0">
    zmiRichtextElNames[<dtml-var count>]='<dtml-var "REQUEST.get('elName')">';
    <dtml-call "REQUEST.set('count',count+1)">
</dtml-if>

<dtml-call "REQUEST.set('beforeSubmitBtnClick','zmiRichtextOnSubmitEventHandler(); ')">
function zmiRichtextOnSubmitEventHandler() {
    for (e in zmiRichtextElNames) {
        var elName = zmiRichtextElNames[e];
        tinyMCE.activeEditor.save();
        document.getElementById(elName).value = document.getElementById('alternate_' + elName).value;
    }
}

//-->
</script>
<dtml-call "REQUEST.set('f_zmiRichtextOnSubmitEventHandler',_.True)">

<dtml-call "REQUEST.set('format',REQUEST.get('format',getFormat(REQUEST)))">
<dtml-if "REQUEST.has_key('format')">
    <dtml-call "REQUEST.set('contentEditable','false')">
    <dtml-call "REQUEST.set('data',renderShort(REQUEST))">
<dtml-else>
    <dtml-call "REQUEST.set('data',getObjAttrValue(getObjAttr('text'),REQUEST))">
</dtml-if>

<script language="javascript" type="text/javascript" src="/TinyMCE/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "richtextEditor",
    plugins : "table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen",
    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
    theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
    theme_advanced_buttons3_add_before : "tablecontrols,separator",
    theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugi2n_insertdate_dateFormat : "%Y-%m-%d",
    plugi2n_insertdate_timeFormat : "%H:%M:%S",
    paste_use_dialog : false,
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal : false,
    paste_auto_cleanup_on_paste : true,
    paste_convert_headers_to_strong : false,
    paste_strip_class_attributes : "all",
    paste_remove_spans : false,
    paste_remove_styles : false
});
</script>
<textarea class="richtextEditor" name="alternate_<dtml-var "REQUEST.get('elName')">" id="alternate_<dtml-var "REQUEST.get('elName')">" cols="50" rows="15" style="width:100%"><dtml-var "REQUEST.get('data')" html_quote ></textarea>

</dtml-unless>

<!-- ## EO zms/pugins/tinymce/manage_form.dtml ## -->




On Monday 06 April 2009 12:26:48 Rainer Feigl wrote:
> hi folks,
> 
> tinymce actually works if i comment out the alternate textarea in manage_form.dtml, though i dont think, thats the way its supposed to be.
> 
> <dtml-comment><textarea name="alternate_<dtml-var "REQUEST.get('elName')">" id="alternate_<dtml-var "REQUEST.get('elName')">" cols="50" rows="15" style="width:100%"><dtml-var "REQUEST.get('data')" html_quote ></textarea></dtml-comment>
> 
> i'll post a clean(er) solution, after i got time to get a bit more into this. for now it works :-)
> 
> rainer feigl
> 
> ---------------------------------------------------------------------------------------------------------------
> 
> Hello,
> [1] getHome() returns an object not a path
> [2] the JS error is due to the missing formatlist
> [3] the dtml
> http://bscw.hoffmannliebenberg.de/pub/bscw.cgi/d1194862/manage_form.dtml
> shows the principle (just for demo purposes: the code is based on
> xstandard and tinycme specific functionality / JS code is still
> missing - but it works:
> http://bscw.hoffmannliebenberg.de/pub/bscw.cgi/d1194866/tinycme.png
> 
> I hope this example will help; maybe you send the complete solution
> back to the forum.
> 
> Best regards
> fh
> 
> 
> --- In [email protected], "michael_schaefer_zeitec"
> <michael.schaefer@...> wrote:
> >
> > Dear ZMS-developers,
> >
> > we would like to integrate (Z)TinyMCE as ZMS-WYSIWYG-Editor
> (rte-plugin).
> >
> > Therefore we tried to use the new ZMS-plugin-concept. We installed
> > ZTinyMCE, created a manage_form.dtml-document in the directory
> > plugins/rte/tinymce. After a restart and adding the ZTinyMCE-poduct to
> > our Zope-instance we could switch to the new editor in
> > Configuration/Paragraph formats/Textbody.
> >
> > We got two problems:
> > First, although we changed to the new editor, the standard editor
> > buttonbar is still shown (now we have got to editors!?).
> >
> > Second, we are not able to save edited content, because of the
> > occuring error: "Feld 'Format' muß einen Wert haben!" (Dropdownmenu
> > 'Format' is given in the old standard editor).
> >
> >
> > Here our detailed steps we made to integrate TinyMCE.
> >
> > 1. Download ZTinyMCE from http://www.fry-it.com/oss/ZTinyMCE
> > 2. Install Product ZTinyMCE in zope/Products
> > 3. makedir zope/Products/zms/plugins/rte/tinymce
> > chown zope: zope/Products/zms/plugins/rte/tinymce
> > 4. cat <<EOF >zope/Products/zms/plugins/rte/tinymce/manage_form.dtml
> > <dtml-unless "REQUEST.get('f_zmiRichtextOnSubmitEventHandler')">
> > <dtml-call
> > "REQUEST.set('format',REQUEST.get('format',getFormat(REQUEST)))">
> > <dtml-if "REQUEST.has_key('format')">
> > <dtml-call "REQUEST.set('contentEditable','false')">
> > <dtml-call "REQUEST.set('data',renderShort(REQUEST))">
> > <dtml-else>
> > <dtml-call
> > "REQUEST.set('data',getObjAttrValue(getObjAttr('text'),REQUEST))">
> > </dtml-if>
> > <input type="hidden" name="format" value="<dtml-var format>">
> > <dtml-unless "REQUEST.get('tiny', False)">
> > <dtml-if tinymce.conf>
> > <dtml-var tinymce.conf>
> > <dtml-else>
> > <script language="javascript" type="text/javascript" src="<dtml-var
> > "getHome()">/TinyMCE/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
> > <script language="javascript" type="text/javascript">
> > tinyMCE.init({
> > mode : "textareas",
> > theme : "advanced",
> > theme_advanced_toolbar_align : "left"
> > });
> > </script>
> > </dtml-if>
> > <dtml-call "REQUEST.set('tiny', True)">
> > </dtml-unless>
> > <dtml-call "REQUEST.set('f_zmiRichtextOnSubmitEventHandler',_.True)">
> > </dtml-unless>
> > EOF
> > chown zope: zope/Products/zms/plugins/rte/tinymce/manage_form.dtml
> > 5. zope restart
> > 6. add Product ZTinyMCE in your ZMS-instance
> > add tinymce.conf to your ZMS-instance
> > 7. change in ZMS:
> > content/Konfiguration/Absatzformate/Textkörper/Richedit to tinymce
> >
> >
> > Our environment: we are using Zope 2.11.1-final, python 2.4.4, linux2,
> > and ZMS 2.11.0-33 (Build #131d)
> >
> > We would be please if someone has got a solution or an alternative way
> > to implement TinyMCE.
> >
> > Many thanks
> > Michael Schäfer
> >
>