0

对于我当前的项目，我正在创建一个 html 编辑器。

它需要如何工作

里面的元素

  1. 文本区域 - 将 HTML 键入为文本
  2. iframe - 将输入的 HTML 显示为真实的 [将字符串 HTML 呈现到 UI]
  3. 一些按钮

工作逻辑

注册用户在文本区域内输入内容：

前任 ：

<div style="border:1px solid red;">This is a div</div>

在该用户单击按钮 [Converting to 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 返回到文本区域，

所有这些都很好[除了萤火虫问题现在没有大问题]，但我需要集成更好的 UI 来自定义 iframe 内容->

例如：用户单击DIViframe 上的一个，这样就会出现一个弹出窗口来更改该 div 的颜色和字体[它将是一些颜色选择器，用于选择颜色并下拉选择字体][我需要实现一些更像这样]。希望这不会是一个很大的痛苦。

所以在那之后我需要得到修改后的值。

例如：我改变了 div 的颜色，

所以返回的值将是这样的

<html>
<head></head>
<body>

<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>

去做

  1. 请注意样式属性 [上面]，它是内联样式，如果元素定义了类，我需要将其转换为类范围，因此我需要使用新样式添加/更新 css 类“mydiv”。

  2. 假设我们正在更改bodyiframe 元素上的某些内容，这body是一个常见元素，因此我需要BODY在 css 样式块中添加/更新范围

    前任：

    身体{颜色：灰色；}

    我希望你们明白我的想法，我需要在我当前的项目中实现这样的东西。

这有什么更薄的吗？[所以不用担心，我可以使用它] 或者我怎样才能做到这一点？尤其是css类的分组。

我希望我需要使用某种正则表达式，但我对此很薄弱。

请帮我完成。

我在这里尝试过：http : //jsfiddle.net/5PKXq/3/

谢谢你。

4

1 回答 1

0

尽管我认为您确实在这里重新发明了轮子，但我看不出是什么阻止您获取 的内容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
});

请注意，这是未经测试的代码。

于 2012-04-12T06:16:42.177 回答