Question

Here is what I’m looking to do.

1: Have a jQuery WYSIWYG editor that allows users to enter text
2: Have a box that displays extracted text from the WYSIWYG editor that is only viewable. The extracted text should be bulleted. Each bullet item should be anything that is contained in an tag in the WYSIWYG.

Example:

WYSIWYG editor would contain the following text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut ipsum eget
enim porttitor pretium. <h6>Ut eget purus.</h6> In nisi congue accumsan. Nulla
mattis nisl at dui porta non lacinia nulla condimentum. <h6>Maecenas convallis
suscipit magna et venenatis.</h6> Phasellus a justo sed mauris hendrerit porttitor.

The view only box below would then show:
– Ut eget purus
– Maecenas convallis suscipit magna et venenatis

Thanks for the help!

Answer 1

Inspiration courtesy of Pekka:

var editorContents = $('<div/>');          // Inject the stuff from the textbox
editorContents.html( $('#editor').val() ); // into the DOM.

// Adjust to taste -- this is where we're putting the info we extract.
var bulletList = $('<ul/>').class('whatever').appendTo('wherever');

// Now just find the headings and put their contents into bullet points.
$('h6', editorContents).each( function (i) {
  $('<li/>').text( this.text() ).appendTo(bulletList);
} );

If you’re doing this over and over, you’re going to want to reuse bulletList, and you’re going to want to either reuse editorContents, or else .remove() it each time you’re done with it, to keep from leaking DOM objects all over the place 🙂

Oh, and you might want to use .html() instead of .text() for transferring the contents of the h6’s into the li’s. Up to you.