Javascript视图HTML切换

Javascript View HTML Toggle

本文关键字：切换 HTML 视图 Javascript      更新时间：2023-09-26

我正在开发一个wysiwyg编辑器，因为我发现的大多数编辑器都不能按我希望的方式工作。

我已经完成了大部分操作，"粗体、斜体、前景、背景色等"，但我现在遇到的问题是制作视图代码按钮。

我希望发生的是，当用户点击按钮时，他们会看到代码，如果他们再次点击，它会切换回html。

我试过

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

它做了我想要的事情，但没有保留换行符，所以所有的<p>标签都会一起在一行上运行。有没有人有更好的解决方案可以保留换行符，所以如果<p>有换行符，就像你查看html一样。

当切换到视图代码模式时，可以添加white-space:pre。这应该很好：http://jsfiddle.net/rNPJA/

显示如何在两个之间切换的解决方案代码

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' })
相关文章：