Question

我们构建了一个小工具，您可以在一个字段中编辑jQuery模板，在另一个字段中编辑JSON数据，然后单击按钮在浏览器中立即查看结果。

我真的需要扩展它，所以设计师可以编辑另一个字段中的完整CSS样式表，当我们渲染模板时，它将应用CSS。我们的想法是，一旦我们获得了良好的结果，我们就可以获取这三个字段的内容，将它们放在文件中并在我们的项目中使用它们。

我找到了jQuery.cssRule插件，但它看起来基本上已经放弃了（所有链接都无处可去，三年内没有开发）。有什么更好的东西还是镇上唯一的游戏？

注意：我们正在寻找某人在这里输入传统CSS样式表数据的东西，并且可以立即用于在页面内进行渲染，并且可以随意编辑和更改旧规则，新规则将用于他们的代替。我不是在寻找设计师必须学习jQuery语法并输入单独的.css（“属性”，“值”）类型调用jQuery的东西。

Answer 1

当然，只需在头部添加style标记：

$("head").append("<style>p { color: blue; }</style>");

在行动here中查看。

您可以使用以下内容替换动态添加的style代码中的文字：

$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);

在行动here中查看此内容。

Answer 2

实现此目标的最简单方法是将用户生成的内容沙盒化为<iframe>。这样，对CSS的更改不会影响编辑器。（例如，input { display:none; }无法破坏您的网页。）

只需渲染HTML（包括文档<head>中的CSS，然后将其写入<iframe>。

Example:

<iframe id="preview" src="about:blank">

var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();

Answer 3

如果用户应该能够编辑整个样式表，而不仅仅是单个样式属性，那么您可以将输入的样式表存储在临时文件中并使用

将其加载到html文档中。

$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

Answer 4

听起来你想为css写一个翻译？如果是手工输入文本，那么以后使用它就像复制并粘贴到css文件一样简单。

所以，如果您的页面上有一个textarea键入css并希望在按下按钮时应用这些规则，您可以使用类似的东西（只有伪代码，需要工作）：

//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
  //now get each property 
  $.each($(this).split(';'), function(){
    $(elem).css({property:value});
  });
});

然后你可以写一些东西来浏览设计师输入的每个元素，然后获取它的当前css规则（包括你使用上面代码片段之类的代码应用的那些）并从中创建一个css字符串然后输出或保存在数据库中。这对于子串很痛苦，但不幸的是我不知道更快或更有效的方式。

希望至少能给你一些想法

使用jQuery创建新的（不更改）样式表

4 个答案: