Question

主要目标：

创建一个能够实时预览HTML / CSS代码的网站。

更具体地说：

HTML / CSS代码可以在某些特定部分中由用户编辑。因此，实时预览中的代码不会来自文本区域，而是来自div。

我想要做的图片：

所以，在我的Previous Question中，我试图找到一种方法，在从黑匣子中获取代码后使实时预览框工作。它不起作用，因为代码是在div标记中提供的，而不是textarea。我想补充一点，div代码中的代码使用xmp代码，因为某些部分可以从用户处理。

现在，我已将divs替换为textarea代码，但EDIT功能无效。

主要问题： 如何编辑textarea文本的部分内容？下面，我使其适用于div代码但不适用于textarea。如何为textarea进行以下工作？

$('input#thebox1').keypress(function(e) {
    console.log($(this).val());
    if(e.which == 13 && $(this).val().length > 0) {
        var c = $(this).val();
        $('.popup1').removeClass().addClass(c).text(c);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>

<div id="copyTarget1" class="innerbox css">
	<blockquote>
	    <pre>
		    <code>
.title
{ 
  background: #<b class="popup1" style="color:#FF0000;">value </b>; 
  vertical-align: middle;
}

			</code>
		</pre>
	</blockquote>
</div>
<br><br><br><br><br><br>

Answer 1

我考虑采用另一种方法，使用Ace（Cloud9编辑器）让您的生活更轻松。这是一个很棒的解决方案，可以获得不同语言的代码编辑器。全部内置JavaScript。它很容易集成。我刚下载它来创建你想要构建的案例。

您可以在此处找到我刚刚制作的示例：https://dubaloop.io/dev/html_css_js_editor/

基本上，您为ace加载库：

<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

然后为HTML，CSS，JavaScript编辑器创建一个“预”容器：

<pre class="editor" id="editor_js">
function foo(items) {
  alert('works');   
}</pre>

您可以使用以下函数将它们转换为代码编辑器：

var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");

它将生成一个很好的代码编辑器，可以通过错误，警告等。您也有不同的主题。你可以看到它非常用户友好。在我的示例中，我只获取每个代码容器的内容并将其发送到空白iframe。要检索您可以使用的内容：

editor_js.getValue();

检查我上面发送给你的例子的源代码。我还使用以下示例创建了.zip：https://dubaloop.io/dev/html_css_js_editor/example.zip

看看这是否适合你。

ACE的GitHub回购：https://github.com/ajaxorg/ace-builds

我希望它有所帮助。

更新：

我决定将重播的回复更新为您的上一条评论。关于它的一些事情：

首先，我更新了之前发送给您的链接中的代码：https://dubaloop.io/dev/html_css_js_editor/ 我们的想法是查看指南，了解如何操作输入并根据需要进行调整。他们有很好的操作选择。这是指南：https://ace.c9.io/#nav=howto&api=editor

我刚刚制作了你想要做的简短版本：我在HTML编辑器中替换<h1>的内容，在文本字段输入中输入;类似于你想要实现的目标。我将html代码编辑器设置为只读，因此您无法对其进行编辑。看看，让我知道。

其次，我使用您的代码创建了另一个示例。你可以在这里查看：https://dubaloop.io/dev/html_css_js_editor/example.html 我注意到你遇到的第一个问题与你如何触发预览更新有关（$（'。innerbox'）。on（“keyup”...））。那里没有keyup事件。现在，当你按Enter键时，我将它设置在任何输入上。另一个大问题，可能是你的主要问题是你是如何通过jQuery访问iframe的。你需要使用$（'selector'）。contents（）。find（'selector2'）。最后，另一个问题是您从代码包装器中检索获取属性值的数据。您需要获得的是实际内容作为平面文本，以避免其他HTML内容。为此，您需要使用.text（）（请检查更新的GetHtml（）和GetCss（）函数）。

我希望你能从这里开始工作。不过，我喜欢选项1：P

我希望它有所帮助。

使用输入框替换textarea中的字符串（属性）部分

1 个答案: