html，js中的css编辑器答案

【问题标题】：css editor in html,jshtml，js中的css编辑器
【发布时间】：2011-12-31 15:02:33
【问题描述】：

我想为最终用户实现选项，以使他们能够更改页面上的 (css) 样式。例如，当他们在样式页面上时，他们可以点击 header 并且会出现弹出窗口，并在友好的用户界面中选择背景颜色、文本颜色、边框、填充...只需点击.

这样的东西是否可用，来自 jquery 插件或...

【问题讨论】：

点击带有header的文本的链接或元素，还是点击<header>元素本身？
没关系，我可以在我想要的元素上绑定onClick函数，该插件只需要提供UI用于选择颜色，填充......然后返回css类

标签： javascript jquery html css editor

【解决方案1】：

看看这个：http://usejquery.com/posts/brosho-design-in-the-browser-jquery-plugin

【讨论】：

哇，这是一个非常酷的插件。我不确定最终用户在当前状态下是否真的可以使用它，但我想修改它以使用颜色选择器以及字体系列、大小的下拉列表不会太费力等...事实上，我想我可能会尝试这样做（在我正在使用可定制用户个人资料页面的网站上需要此功能）。

【解决方案2】：

你可以在一些代码中做到这一点：演示：https://cdpn.io/harshavardhana-holla-gmail-com/debug/yLVLYeQ/RBrOJRNNRooM

<!DOCTYPE HTML>
<html>
    <head>
       <style> textarea, iframe
       {
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
     </head>
     <body><table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
     <table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
     <tr>
<td width="50%" scope="col">  </td> 
<td width="50%" scope="col" align="left"> 
   <center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your Code here!</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!</p>
</body> 
</html>
</textarea>
</form>
</td>

<td><b><center>Output</b></center>
<iframe name="targetCode"  id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: 
iframe.contentDocument;

iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>

我创建了一些显示结果的 iframe！

【讨论】：