1

Topic: scriptaculous inplaceeditor and tinymce

Thanks to some posts here i managed to get tinymce and scriptacoulus work side on side without js errors (load prototype, tinymce and then scriptaculous).

What i was not able to do though was, to replace the inplaceeditor (they render textareas) to be shown as tinymce editor.

So if i call
tinyMCE.execCommand("mceAddControl", true, "scriptaculous_editor");
i keep getting redirected to a blank page and get an endless browser loading.

Has anyone got this to work (like it is in googles notebook)?

Thank you in advance!

2

Re: scriptaculous inplaceeditor and tinymce

anyon ever done this?

3

Re: scriptaculous inplaceeditor and tinymce

Hi,

the order of loading the scripts is important!

This runs very fine for me:

<script src="javascript/prototype/prototype.js" type="text/javascript"></script>
<script src="javascript/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="javascript/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/tiny_mce/tiny_init_default.js" type="text/javascript"></script>

4

Re: scriptaculous inplaceeditor and tinymce

yes - thank you.

The part with the ordering of the script tags i got right. It works side by side. But i am not able to get it work for the inplace editor. If i have at the start of the webpage a texteare - the textarea is replaced just fine. But whenever i click on a text where the inplace editor comes it wont replace the textareas there (no matter what i tried) :-(

5

Re: scriptaculous inplaceeditor and tinymce

This is even reported on the scriptaculous website.
as Bartholomay said, the order is important.

Last edited by Andy^ (2006-06-13 20:06:00)

6

Re: scriptaculous inplaceeditor and tinymce

ok - thank both of you for your response.

The solution you pointed me to (and the one in even mentioned in my starting post) works perfectly.

That means if i have

<html>
<body>
<textarea id="xy">my contents</textarea>
</body>
</html>

For the above cas IT WORKS!

Where it IS NOT (!) working is with an in place editor (look here: http://wiki.script.aculo.us/scriptaculo … aceEditor)

An Inplace Editor has NO textarea at the first rendering of the page. The Textarea is rendered, if you click on a specific DIV. On the click, the DIF is removed from the current page and a plain textarea will show (without any markup/bold/links...

So what i want now, is - if i click, show the textarea BUT immediately replace it with tinymce and have it then show bold and links and so on.

7

Re: scriptaculous inplaceeditor and tinymce

Hey Eleasar,

Have you got any further with this problem? ... i could use a solution to the problem as well.
Couldn't find any WYSIWYG Ajax In-Place-Edit yet on the web, but perhaps you already found something or got a solution for the Integration of TinyMCE?

The problem as i see it with TinyMCE seems to be, that it tries statically to alter an textare, once it's configurated to "convert" this certain textarea - whereas Scriptaculous dynamically generates the (in-place) textarea frist if one activates the in-place-editor, so TinyMCE never get's notice of it an doesn't "convert" it....
One solution could be to either find a "hook"/event-point in the Scritpaculous In-Place-Edit to create the TinyMCE-Editor for the in-place textarea, just after the in-place got activated ( http://wiki.script.aculo.us/scriptaculo … laceEditor ?), another way to install an event handler for DOM changes, an keep on watching for certain Element Types/Classes, so once the scriptaculous textarea has been created, the DOM change event can be caught and the TinyMCE-Editor for that textarea-element can be created? Something like the "onnodeinserted" or "onnodeinsertedintodocument" events ( http://en.wikipedia.org/wiki/DOM_Events )?

Let me know (through this topic or by sending me an email) if you've got any further...

cheers,

Daniel

8

Re: scriptaculous inplaceeditor and tinymce

btw: i just found "WIKIWYG" - a WYSIWYG In-Placer-Editor - the downside is: it only works in Firefox, no IE:

http://demo.wikiwyg.net/wikiwyg/demo/clientserver/

9

Re: scriptaculous inplaceeditor and tinymce

Hi,
no - currently i haven't found a solution yet. I am still investigating, but the problem is at the moment, that there are so many projects which look promissing but all lack certain aspects (ASP.NET Atlas, scriptaculous, dojo - just to name a few). All have nice features and on all of them there is great developement. Currently it looks as if i am waiting to a) get tinymce into scriptaculous or b) if they manage it to integrate it on their own.

Dojo looks the best i think, as they have a inplace editor AND an (simple) wysiwyg editor. As i have lots of other layout things to do, i will start first with the other layout - hopefully someone gets it done smile

10

Re: scriptaculous inplaceeditor and tinymce

Found another mini in-place editor based on prototype and scriptaculous (which seems to be in a kind of alpha-phase):

  http://lists.rubyonrails.org/pipermail/ … 01658.html

  resp.:

  http://wrath.rubyonrails.org/pipermail/ … editor.zip

This one is small and nicely integrated (the example needs prototype and the scriptaculous files in same dir)

- but: works only in IE, not in FF (!?!?) ... darn!

11

Re: scriptaculous inplaceeditor and tinymce

I think i found a solution for using TinyMCE as wysiwyg-widget for the scriptaculous In-Place-Edit!

The essential hint/code came from http://dev.rubyonrails.org/ticket/5263

The Code below is a demo html page and contains all you need in addition to your prototype, scriptaculous and of course TinyMCE files (please change the inclusion directories to yours).

I've tested it with FF 1.5 and IE 6, and finally got it working.
It needs a little tweaking and polishing, since
- in IE, there are two JS Error Dialog (regarding focussing and an "is not an object"-error) - one could try to solve these cleanly or just to catch them, since they dont bother the editing itself.
- in FF, the TinyMCE Editor does an upshift of 1em, so the stays not exactly in place when entering edit-mode (i tried a provisory fix/hack, but it's far from a final solution.
- there is a little Flash when entering the edit-mode

So, i left a little work for you, Eleasar - please let me know any improvement you made!
You can reach me via mail by concatenating my 'd767net' username here with '@' followed by 'gmx.net' (boy, i hope those spambots can't coup with this kind of email-adress obfuscation <:)

cheers,

Daniel

_________________________________________




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


  <script src="lib/prototype.js" type="text/javascript"></script>
  <script src="../tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
  <script src="src/scriptaculous.js" type="text/javascript"></script>


    <script language="javascript" type="text/javascript">
        // Notice: The simple theme does not use all options some of them are limited to the advanced theme
        tinyMCE.init({
            mode : "textareas",
            theme : "simple"
        });
    </script>


    <script type="text/javascript">
   
   
        // TinyMCE RichEdit Widget for Scriptaculous from http://dev.rubyonrails.org/ticket/5263
       
        Ajax.InPlaceRichEditor = Class.create();
   
        Object.extend(Ajax.InPlaceRichEditor.prototype, Ajax.InPlaceEditor.prototype);
        Object.extend(Ajax.InPlaceRichEditor.prototype,
        {
            enterEditMode: function(evt)
            {
       
                if (this.saving) return;
                if (this.editing) return;
       
                this.editing = true;
                this.onEnterEditMode();
       
                if (this.options.externalControl)
                {
                    Element.hide(this.options.externalControl);
                }
       
                Element.hide(this.element);
                this.createForm();
                this.element.parentNode.insertBefore(this.form, this.element);
                Field.scrollFreeActivate(this.editField);
       
                if (this.options.textarea)
                {
                    tinyMCE.addMCEControl(this.editField, 'value');
                }
       
                // stop the event to avoid a page refresh in Safari
                if (evt)
                {
                    Event.stop(evt);
                }
                return false;
            },
            onclickCancel: function()
            {
                if (this.options.textarea)
                {
                    tinyMCE.removeMCEControl('value');
                }
       
                this.onComplete();
                this.leaveEditMode();
                return false;
            },
            onSubmit: function()
            {
                // onLoading resets these so we need to save them away for the Ajax call
                var form = this.form;
       
                if (this.options.textarea)
                {
                    var tinyVal = tinyMCE.getContent('value');
       
                    if (tinyVal)
                        this.editField.value = tinyVal;
       
                    tinyMCE.removeMCEControl('value');
                }
       
                var value = this.editField.value;
       
                // do this first, sometimes the ajax call returns before we get a chance to switch on Saving...
                // which means this will actually switch on Saving... *after* we've left edit mode causing Saving...
                // to be displayed indefinitely
                this.onLoading();
       
                if (this.options.evalScripts)
                {
                    new Ajax.Request(
                        this.url, Object.extend(
                        {
                            parameters: this.options.callback(form, value),
                            onComplete: this.onComplete.bind(this),
                            onFailure: this.onFailure.bind(this),
                            asynchronous:true,
                            evalScripts:true
                        }, this.options.ajaxOptions));
                }
                else
                {
                    new Ajax.Updater(
                        {
                            success: this.element,
                            // don't update on failure (this could be an option)
                            failure: null
                        },
                        this.url, Object.extend(
                        {
                            parameters: this.options.callback(form, value),
                            onComplete: this.onComplete.bind(this),
                            onFailure: this.onFailure.bind(this)
                        }, this.options.ajaxOptions));
                }
                // stop the event to avoid a page refresh in Safari
                if (arguments.length > 1)
                {
                    Event.stop(arguments[0]);
                }
                return false;
            }
        });
   
   
    </script>
   
   
   
    <style>
       
        form.inplaceeditor-form {
            margin-top: 1em;                    /* compensate strange 1em up-shift with switch to TinyMCE (only in Firefox) */
        }
   
        textarea.editor_field {
            display:none;                            /* needed to make the inPLace-Replacment-"flash" milder */
        }
   
    </style>

      <!--[if IE]>
      <style>
            form.inplaceeditor-form {
                margin-top: 0em;            /* negate the above up-shift-compensation for Internet Explorer */
            }
        </style>
      <![endif]-->


</head>
<body>

    <p id="tobeedited" style="padding: 1px; width: 331px";>
       
                <b class="anriss">Musikmarkt in den USA bleibt stabil</b>
               
                Zwar ging der Verkauf von Musik in Form so genannter physischer Alben im ersten Halbjahr 2006 erneut zurück, das digitale Geschäft sorgte insgesamt aber für eine leichte Absatzsteigerung.
                <b class="anriss"> Kostenloses Buch zum Online-Recht mit sechstem Update</b>
               
                In seinem "Skript Internetrecht" hat der Münsteraner Juraprofessor Thomas Hoeren neben aktuellen Urteilen auch die Diskussion um die Urheberrechtsreform einbezogen.       

    </p>
    <br />

    <script>
        new Ajax.InPlaceRichEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
                rows:5, // multi-row is necessary to get tinymce via textarea
                ajaxOptions: {method: 'get'} //override so we can use a static for the result
                });
    </script>

</body>
</html>

12

Re: scriptaculous inplaceeditor and tinymce

First of all a big thanks to you!

I try to incorporate that into my solution as i proceed to the editing stuff. But that can take some time sad

13

Re: scriptaculous inplaceeditor and tinymce

Hey there.

What you want to do might be possible, but you need to be prepared to override some of the method calls inside the script.aculo.us library.

My suggestion is to go to a bookstore and check out Rails Recipes by Chad Fowler. In the first few recipes, there is one that gives you a step by step on replacing the default textarea in place editor with a select drop-down.

It's probably going to be tricky, but that is the right path for getting it working.

Best of luck.

14

Re: scriptaculous inplaceeditor and tinymce

Hi

I used the script from Daniel and it works great! Thanks.

But I'm struggling with an issue: If I try to pass additional parameters, the POST var 'value' is not available anymore.

<script>
        new Ajax.InPlaceRichEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
                rows:5, // multi-row is necessary to get tinymce via textarea
                ajaxOptions: {method: 'post', parameters: 'myparam=myvalue1&value=tinyValue' }
                });
    </script>

Any idea how to pass the textarea value AND additional parameters?

Thanks for any input
Aldo

15

Re: scriptaculous inplaceeditor and tinymce

I've made a simple library to help you doing such things, be sure to check http://inplacericheditor.box.re
A new version with full rewrite is actually in process.

It's gonna use prototype 1.6.0, script.aculo.us 1.8 and hopefully TinyMCE 3.0 if brought stable soon.
--
  Sebastien Grosjean - ZenCocoon

16

Re: scriptaculous inplaceeditor and tinymce

Hi all.

Well... I'm trying to implement a very nice feature:
the TinyMCE with Edit In Place Capabilities and, ALSO, I'd like the user to edit in place images.

I have seen here this great help: http://inplacericheditor.box.re/

And I'm using a very nice free upload file script "TinyBrowser" from BrynJ.

The problem is that I'm not (yet) a programmer, so I can't solve two thinks:

1) the php part of this--> What should we write on the .php associated file, to update records?

Here is the way I succefully call the Ajax with the appropriate TinyMCE configuration:

<script>
    // <![CDATA[
      new Ajax.InPlaceRichEditor($('blabla'),'/testes/update2.php',
      {ajaxOptions: {method: 'get'}, //override so we can use a static for the result
      externalControl: 'editar_conteudo',
      externalControlOnly: true},
      tinymce_opcoes_especificas
      );
    // ]]>
    </script>
   
</body>


And now here is the associated .php file:

<?php
  if( isset($_REQUEST["value"]) )
  {
     $str = $_REQUEST["value"];
     echo "$str";
  }
?>



This works [update:(ONLY ON FIREFOX)]. But not completly, since I'm not storing the values on amizade2.php file. How to KEEP this "edit values"?


The second problem, I have no clue:
2) If we upload an image and then we click Ok. We see strange chars instead of the image.


Please see it in:

http://www.cantinho.org/testes/amizade2.php








I hope you can help me start solving this problem.


Best Regards,
Talofo

Last edited by talofo (2008-09-23 18:48:17)