Search code examples
jquerytwitter-bootstrapwysiwygwysihtml5

Take WYSIWYG html code and copy to textarea


I'm using a wysihtml5 editor in conjunction with Bootstrap for a site I'm working on. I'm trying to find a way, using jquery, to capture whatever is added to the wysiwyg editor and post the rendered html code to a textarea tag that will be hidden.

Example Editor Text/Code:

<div id="editor" class="editor" contenteditable="true">
  <font size="5"><b>Headline Goes Here<br></b></font>
  <span style="color: #000; font-family: Arial; line-height: 14px;"><font size="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor auctor enim ac elementum. Etiam vehicula volutpat velit a aliquet.<br></font></span>
  <font size="1"><i>Footnote text goes here</i></font>
</div>
<textarea class="hidden editorResult" ></textarea>

The textarea doesn't need to have line breaks, but I ultimately am try to keep the rendered html inside the wysiwyg editor (#editor) as is and post into textarea (#editorResult).

Anyone have a solution?


Solution

  • Seems easy enough with jQuery $('.editorResult').val($('#editor').html());

    What you use to trigger that a button/keystroke is up to you.

    See: http://jsfiddle.net/UMSmu/