jquery - 使用 contenteditable 元素和 iframe 创建一个编辑器

Question

我目前的问题是当我像这样在 css 中放置一个空格时。该规则不会显示

body{
 background-color : red;
}

只有当我把一切都放在一边时，它才会这样工作

body{
background-color : red;
}

我目前正在创建一个具有 contenteditable 属性的 2 div。

<div class="editor-field html-field" data-name="html" contenteditable="true"></div>
<div class="editor-field css-field" data-name="css" contenteditable="true"></div>

在我的 javascript 中，我设置了一个时间间隔。

setInterval(modifyEditor, 1500);

这就是我将 html 和 css 放入 iframe 的方式。

var iframeContent = $('iframe').contents();
setIframeCss(iframeContent);
var iframeBody = iframeContent.find('body');
var iframeCss = iframeContent.find('#editorStyles');

function modifyEditor(){

  var checkHtmlText = $('.html-field').text();
  var checkCssText = $('.css-field').text();

  if(htmlText != checkHtmlText){
    htmlText = checkHtmlText;
    iframeBody.html(htmlText);
  }

  if(cssText != checkCssText){
    cssText = checkCssText;
    iframeCss.html(cssText);
  }

}

function setIframeCss(iframeContent){
  var createStyle = $('<style class= "editorStyles" id = "editorStyles"></style>');
  iframeContent.find('head').append(createStyle);
}

Answer 1

在 HTML 中，空格是折叠的。为了在各种条件下正确显示空格(例如从行首开始的空格)，浏览器会将常规空格(字符代码 32)替换为不间断空格(字符代码 160)。这对 HTML 没问题，但 CSS 不理解什么是不间断空格。它被视为无效字符，整行或整 block 都被标记为无效(被视为语法错误)。

我该做什么？

关于如何替换 unicode 间距字符的简单查找在 StackOverflow 上得到了这个答案，感谢 @Guffa 的回答:

https://stackoverflow.com/a/16416631/1456201

需要使用涉及 unicode 空格字符的正则表达式添加替换方法(在您的情况下，第一个\u00A0 可以工作，但为什么不将它们全部包括在内以涵盖任何可能性，因为这是用户输入的情况？):

str.replace(/[\u00A0\u1680​\u180e\u2000-\u2009\u200a​\u200b​\u202f\u205f​\u3000]/g,'');

这是一个带有工作示例的 JSFiddle:https://jsfiddle.net/jimbo2150/Lgnqabp5/1/