jQuery HTML编辑器
对于我的当前项目，我正在创建一个html编辑器。
它需要如何工作
元素在中
- 文本区域--将HTML键入为文本
- Iframe--将类型化的
显示为将字符串HTML真实呈现给UI
- 一些按钮(
)
工作逻辑
注册用户在文本区域内键入某些内容：
例：
<div style="border:1px solid red;">This is a div</div>在该用户单击转换为UI的按钮后，我们需要将iframe内容更改为文本区域的新值。
在转换iframe元素之后，html将是
<html>
<head>
<style>
.mydiv{
}
</style>
</head>
<body>
<div class="mydiv" style="color:red">This is a div</div>
</body>
</html>还有一个按钮可以将iframe HTML返回到文本区域，
所有这些都很好，现在除了firebug问题没有什么大问题，但是我需要集成一个更好的UI来自定义iframe内容->
用户点击iframe上的DIV，这样当弹出改变该div的颜色和字体时，它将是一些颜色选择器，用于选择颜色，然后下拉以选择字体。希望这不会是很大的痛苦。
在此之后，我需要得到修改后的值。
我改变了div的颜色，
所以返回的值将如下所示
<html>
<head></head>
<body>
<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>TO DO
请注意上面的
- 属性，它是内联样式，如果元素定义了一个类，我需要将它转换为类作用域，所以我需要用新样式添加/更新css类"mydiv“。
- 假设我们正在更改iframe的
body元素，body是一个常见的元素，所以我需要在css样式块中添加/更新BODY作用域。
例：
体{颜色:灰色；}
我希望你们能理解我的想法，我需要在我目前的项目中实现这样的东西。
还有什么更脏的吗？这样就不用担心了，我可以用它，或者我怎么能做到这一点？特别是css类的分组。
我希望我需要使用某种正则表达式，但我在这方面非常薄弱。
请帮我完成。
我尝试的是在这里：http://jsfiddle.net/5PKXq/3/
谢谢。
回答 1
Stack Overflow用户
发布于 2012-04-12 06:16:42
虽然我认为您确实在重新发明这个轮子，但我不知道是什么原因阻止您获取textarea的内容，然后直接将其附加到容器div中(我不知道，它甚至不必是一个iframe，我个人认为这是一种糟糕的方法)。
var $textarea = $('textarea'),
$container = $('div#container'),
$refresh = $('button#refresh'), // or something
;
$refresh.on('click', function () {
$container.empty()
.html($textarea.val())
;
// or something
});请注意，这是未经测试的代码。
https://stackoverflow.com/questions/10118183
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号