Installing TinyMCE Help

Discussion in 'Javascript' started by vunet.us, Jun 5, 2007.

  1. vunet.us

    vunet.us Guest

    Hi all,
    I have difficulties initializing TinyMCE. Initialization involved 1
    included file tiny_mce.js and one which I include "on demand" (see
    tinyMCEOnDemand()). The content of that function is all the way below.
    If I do not "demand" that file but, rather, write locally, everything
    works smoothly with included file tiny_mce.js. But my HTML object
    required for initialization appears on the page when user decides to
    make it appear, therefore TinyMCE cannot be initialized until a
    necessary html object is visible (i.e. textarea). I wrote function
    start() to simulate this process of my needs. As a result, I suffer
    running the code below.
    Can anyone suggest something?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My example</title>
    <!-- tinyMCE -->

    <script language="javascript" type="text/javascript" src="../jscripts/
    tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
    function start(){
    var body = document.getElementsByTagName("body")[0];
    var d = document.createElement('div');
    d.style.display = "none";
    d.innerHTML = "<textarea id='Descriptions' style='width:450px; height:
    250px'></textarea>";
    body.appendChild(d);
    d.style.display = "block";
    tinyMCEOnDemand();
    }

    function tinyMCEOnDemand(){
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.id = 'tinyMCEScriptInitializer';
    script.type = 'text/javascript';
    script.src = "tinyInit.js";
    head.appendChild(script);
    }
    </script>
    <!-- /tinyMCE -->

    </head>
    <body onload="setTimeout('start()',3000);">
    </body>
    </html>

    ============================
    tinyInit.js file has:

    tinyMCE.init({
    theme : "advanced",
    mode : "exact",
    elements : "Descriptions",
    save_callback : "customSave",
    content_css : "example_advanced.css",
    extended_valid_elements : "a[href|target|name]",
    plugins : "table",
    theme_advanced_buttons3_add_before :
    "tablecontrols,separator",
    //invalid_elements : "a",
    theme_advanced_styles : "Header 1=header1;Header
    2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific
    setting CSS classes
    //execcommand_callback : "myCustomExecCommandHandler",
    debug : false
    });

    // Custom event handler
    function myCustomExecCommandHandler(editor_id, elm, command,
    user_interface, value) {
    var linkElm, imageElm, inst;

    switch (command) {
    case "mceLink":
    inst = tinyMCE.getInstanceById(editor_id);
    linkElm =
    tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

    if (linkElm)
    alert("Link dialog has been overriden. Found link href: " +

    tinyMCE.getAttrib(linkElm, "href"));
    else
    alert("Link dialog has been overriden.");

    return true;

    case "mceImage":
    inst = tinyMCE.getInstanceById(editor_id);
    imageElm =
    tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

    if (imageElm)
    alert("Image dialog has been overriden. Found image src: " +

    tinyMCE.getAttrib(imageElm, "src"));
    else
    alert("Image dialog has been overriden.");

    return true;
    }

    return false; // Pass to next handler in chain
    }
    // Custom save callback, gets called when the contents is to be
    submitted
    function customSave(id, content) {
    alert(id + "=" + content);
    }
     
    vunet.us, Jun 5, 2007
    #1
    1. Advertisements

  2. vunet.us

    -Lost Guest

    <snip TinyMCE code and whatnot>

    You are *still* working on that TinyMCE example?

    Any link to your example? Any errors or is TinyMCE just not behaving as
    you expect?
     
    -Lost, Jun 5, 2007
    #2
    1. Advertisements

  3. vunet.us

    vunet.us Guest

    vunet.us, Jun 5, 2007
    #3
  4. vunet.us

    vunet.us Guest

    THIS IS a plug-n-play example which works! Try to remove textarea and
    it won't work. My goal is to add textarea dynamically and init
    tinyMCE. That's all...

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My example</title>
    <!-- tinyMCE -->

    <script language="javascript" type="text/javascript"

    src="http://www.eclayer.com//tinymce/jscripts/tiny_mce/tiny_mce.js"></
    script>

    <script language="javascript" type="text/javascript">
    tinyMCE.init({
    theme : "advanced",
    mode : "exact",
    elements : "Descriptions",
    save_callback : "customSave",
    content_css : "example_advanced.css",
    extended_valid_elements : "a[href|target|name]",
    plugins : "table",
    theme_advanced_buttons3_add_before :
    "tablecontrols,separator",
    //invalid_elements : "a",
    theme_advanced_styles : "Header 1=header1;Header
    2=header2;Header 3=header3;Table Row=tableRow1", // Theme

    specific setting CSS classes
    //execcommand_callback : "myCustomExecCommandHandler",
    debug : false
    });


    // Custom event handler
    function myCustomExecCommandHandler(editor_id, elm, command,
    user_interface, value) {
    var linkElm, imageElm, inst;

    switch (command) {
    case "mceLink":
    inst = tinyMCE.getInstanceById(editor_id);
    linkElm =
    tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

    if (linkElm)
    alert("Link dialog has been overriden. Found link href: " +

    tinyMCE.getAttrib(linkElm, "href"));
    else
    alert("Link dialog has been overriden.");

    return true;

    case "mceImage":
    inst = tinyMCE.getInstanceById(editor_id);
    imageElm =
    tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

    if (imageElm)
    alert("Image dialog has been overriden. Found image src: " +

    tinyMCE.getAttrib(imageElm, "src"));
    else
    alert("Image dialog has been overriden.");

    return true;
    }

    return false; // Pass to next handler in chain
    }

    // Custom save callback, gets called when the contents is to be
    submitted
    function customSave(id, content) {
    alert(id + "=" + content);
    }


    </script>
    <!-- /tinyMCE -->

    </head>
    <body>

    <textarea id='Descriptions' style='width:450px; height:250px'></
    textarea>

    </body>
    </html>
     
    vunet.us, Jun 5, 2007
    #4
  5. vunet.us

    -Lost Guest

    <snip semi-working example>

    1. Either rewrite the init() method, because its DOM-readiness is shit.

    I tried tests both by dynamically adding textareas and by attempting to
    hide/show them.

    No luck.

    The init() method does some really weird stuff in regards to the
    original textarea. For example, it rewrites the entire damn thing into
    this convoluted TABLE, SPAN crap.

    2. Find the TABLE of TinyMCE and hide it. Here is the kicker though...
    YOU MUST hide it via JavaScript. Do it via CSS and the TABLE gets
    removed before TinyMCE initializes it. Another sign of TinyMCE and/or
    its init() method being feces.

    I have seen stool samples with better code and practices than what
    TinyMCE produces.

    Poop Count = 4
     
    -Lost, Jun 6, 2007
    #5
  6. Peter Michaux, Jun 6, 2007
    #6
  7. vunet.us

    vunet.us Guest

    vunet.us, Jun 6, 2007
    #7
  8. Holy crap! Do they pay €25 for each bug report?

    I just loaded their demo. Wow that took a long time.

    What about the FCKEditor? Free support.

    Peter
     
    Peter Michaux, Jun 6, 2007
    #8
  9. vunet.us

    vunet.us Guest

    I may have found what I need but I still solve various aspects such as
    appending innerHTML, etc.:

    http://tinymce.moxiecode.com/punbb/viewtopic.php?id=4673
     
    vunet.us, Jun 6, 2007
    #9
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.