创建一个具有contenteditable元素和iframe的编辑器
创建一个具有contenteditable元素和iframe的编辑器
提问于 2017-02-18 09:43:10
我现在的问题是，当我像这样在css中放入一个空格时。这条规则不会显示
body{
background-color : red;
}
只有当我把所有东西都放在一边的时候，它才会像这样工作
body{
background-color : red;
}
我目前正在创建一个带有contenteditable属性的2div。
<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);
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-18 10:26:52
在HTML中，空格是折叠的。为了在各种情况下正确地显示空格(如从行首开始的空格)，浏览器将用不间断的空格(字符码160)替换常规空格(字符码32)。这对于HTML来说很好，但是CSS不理解什么是不间断的空格。它被视为无效字符，并且整行或整块被标记为无效(它被视为语法错误)。
我做什么好？
感谢@Guffa，在StackOverflow上，通过简单查找如何替换unicode空格字符，得到了以下答案：
https://stackoverflow.com/a/16416631/1456201
需要添加一个包含unicode空格字符的正则表达式的replace方法(在您的示例中，第一个\u00A0可以使用，但既然这是用户输入用例，为什么不全部包含它们以涵盖任何可能性？)：
str.replace(/[\u00A0\u1680\u180e\u2000-\u2009\u200a\u200b\u202f\u205f\u3000]/g,'');下面是一个带有工作示例的JSFiddle：https://jsfiddle.net/jimbo2150/Lgnqabp5/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42310143
复制相关文章
相似问题
腾讯云开发者
