CODEWITHSUNDEEP
javascriptjquerywymeditor
ironfroggy
ironfroggy

Reputation: 8119

WYMeditor won't reflect contents into textarea value

I started deploying WYMeditor across all the content types on a site, and its looking good. Now I got to see how it works saving and viewing, but its not submitting anything and I have no idea why.

I've looked at this from several angles. I would even take a monkeypatch at this point, if I can learn how to grab the data myself I can stick it into the field at submission time. That or the real reason its not working by itself would be great. Anyone with an idea?

<li><label for="id_comment">comment on this article:</label> <textarea id="id_comment" rows="10" cols="40" name="comment"></textarea> 
<script type="text/javascript"> 
    $(document).ready(function(){

    jQuery("#id_comment").wymeditor({
      "toolsItems":[
         {
            "name":"Bold",
            "css":"wym_tools_strong",
            "title":"Strong"
         },
         {
            "name":"Italic",
            "css":"wym_tools_emphasis",
            "title":"Emphasis"
         },
         {
            "name":"InsertOrderedList",
            "css":"wym_tools_ordered_list",
            "title":"Ordered_List"
         },
         {
            "name":"InsertUnorderedList",
            "css":"wym_tools_unordered_list",
            "title":"Unordered_List"
         },
         {
            "name":"Indent",
            "css":"wym_tools_indent",
            "title":"Indent"
         },
         {
            "name":"Outdent",
            "css":"wym_tools_outdent",
            "title":"Outdent"
         },
         {
            "name":"Undo",
            "css":"wym_tools_undo",
            "title":"Undo"
         },
         {
            "name":"Redo",
            "css":"wym_tools_redo",
            "title":"Redo"
         },
         {
            "name":"CreateLink",
            "css":"wym_tools_link",
            "title":"Link"
         },
         {
            "name":"Unlink",
            "css":"wym_tools_unlink",
            "title":"Unlink"
         },
         {
            "name":"Paste",
            "css":"wym_tools_paste",
            "title":"Paste_From_Word"
         }
      ],
      "logoHtml":"",
      "updateEvent":"blur",
      "stylesheet":"/static/yui/tiny_mce.css",
      "skin":"twopanels",
      "classesHtml":"",
      "updateSelector":"textarea"
      });

    });
</script></li>

Upvotes: 9

Views: 3331

Answers (3)

aky
aky

Reputation: 1

Instead of this:

"updateEvent":"blur",
"updateSelector":"textarea"

you need:

"updateEvent":"click",    
"updateSelector":"[type=submit]"

Upvotes: 4

Timo Huovinen
Timo Huovinen

Reputation: 55623

You can also force update all the wymeditors, which I needed to do before the actual submit because I had custom functionality that manipulated the textarea content.

document.addEventListener('submit',function(e){
    e.preventDefault();
    //update all the wymeditors
    var i=0,wym = jQuery.wymeditors(i);
    while(wym){
        i++;
        wym._element.html(wym.xhtml());
        //wym.update();//would use this, but it is not reliable
        wym = jQuery.wymeditors(i);
    }
    e.target.submit();
});

Upvotes: 1

cefn
cefn

Reputation:

I had the same problem, and noticed from looking at example 1 in the wymexamples directory provided from their site that Wymeditor uses special element classes (CSS classes) to indicate the parts of the page which need to have extra behaviour added to them.

In particular, the submit button has a class of wymupdate, and I think this causes a pre-submit handler to be associated with the control.

Once I'd added the wymupdate class to the submit button in my source, then the textarea field was filled out with the HTML before the submission took place and it showed up server-side in the correct POST variable.

I include below the relevant bits from the example source which make it work...

<script type="text/javascript">
jQuery(function() {
    jQuery('.wymeditor').wymeditor();
});
</script>

...

<form method="post" action="">
<textarea class="wymeditor">&lt;p&gt;Hello, World!&lt;/p&gt;</textarea>
<input type="submit" class="wymupdate" />
</form>

...although the wymupdate class association seems to be automagic, the wymeditor class association is triggered explicitly as shown in the <script>, and then this must cause it to look for things of class wymupdate.

Upvotes: 12

Related Questions