Javascript View HTML Toggle

Question

I am developing a wysiwyg editor because most of the ones I have found do not work the way I would like them to.

I have most of it done, "bold, Italic, Forecolor, backcolor, etc" but the problem I am having now is the make a view code button.

What I would like to happen is when the user hits the button they see the code and if they hit it again it toggles back to html.

I have tried

$('#wysiwyg').text($('#wysiwyg').html());

It did exactly what I wanted but it did not keep the line breaks, so all of the <p> tags would run together across one line. Does anyone have a better solution that would keep the line breaks, so if there is a line break for the <p> like there if you viewed the html.

Have you tried to put css style white-space: pre; when you switch to view code mode? (changed to correct name of css property) — Viktor S.
– Viktor S., Commented Feb 5, 2013 at 14:41
Do you mean instead of doing the code snippet above or after. I have tried wrapping the html in a pre after, but that dont yeild any different results. becuase once you so the text like this it seems to remove the line breaks. — Robert E. McIntosh
– Robert E. McIntosh, Commented Feb 5, 2013 at 14:43
That is just a css property which force element to show line breaks as-is. Without it, line breaks (\r\n) are ignored in HTML. — Viktor S.
– Viktor S., Commented Feb 5, 2013 at 14:44
I realized what I did wrong. I just went back and re-tried this and realized I didnt use the "dash". This works perfectly now! — Robert E. McIntosh
– Robert E. McIntosh, Commented Feb 5, 2013 at 14:47

Robert E. McIntosh · Accepted Answer · 2013-02-05 14:55:00Z

1

You can add a white-space:pre when you switch to view code mode. That should work fine: http://jsfiddle.net/rNPJA/

Solution code showing how to toggle between the two

if ($(this).data('wysiwyg-action') == "changeview") 
  if ($('#wysiwyg').css('white-space') != "pre")
    $('#wysiwyg').text($('#wysihtml-content').html()).css({ 'white-space':'pre' })
  else
    $('#wysiwyg').html($('#wysihtml-content').text()).css({ 'white-space':'normal' })

edited Feb 5, 2013 at 14:55

Robert E. McIntosh

6,2355 gold badges31 silver badges40 bronze badges

answered Feb 5, 2013 at 14:49

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert E. McIntosh Over a year ago

Just wanted to show people how to do this little snippet in case they come across this thread in the future.

Collectives™ on Stack Overflow

Javascript View HTML Toggle

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related