使用输入框替换文本区域中的部分字符串（属性）

主要目标：

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

进一步来说 ：

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

Image of what I am trying to do :

所以，在我的上一个问题 https://stackoverflow.com/questions/40157410/live-html-css-preview-from-a-div-tag-and-not-a-text-area-tag/40157761?noredirect=1#comment67975869_40157761从黑匣子中获取代码后，我试图找到一种使实时预览框工作的方法。它不起作用，因为代码是在div标签而不是textarea。我想补充一下中的代码div标签使用xmp标签，因为某些部分可以由用户编辑。

现在，我已经更换了divs with textarea标签，但编辑功能不起作用。

主要问题：如何编辑部分内容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>

我考虑采用另一种方法，使用 Ace（Cloud9 Editor）让您的生活更轻松。这是获得不同语言的代码编辑器的绝佳解决方案。全部用 JavaScript 构建。集成起来非常容易。我刚刚下载它来创建您正在尝试构建的案例。

您可以在这里找到我刚刚制作的示例：https://dubaloop.io/dev/html_css_js_editor/ 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 https://dubaloop.io/dev/html_css_js_editor/example.zip

看看这是否适合您。

ACE 的 GitHub 存储库：https://github.com/ajaxorg/ace-builds https://github.com/ajaxorg/ace-builds

我希望它有帮助。

UPDATE:

我决定更新回复以回复您的最新评论。关于它的一些事情：

• 首先，我更新了之前发送给您的链接中的代码：https://dubaloop.io/dev/html_css_js_editor/ https://dubaloop.io/dev/html_css_js_editor/我们的想法是检查指南，了解如何操作输入并将其调整为您需要的内容。他们有很好的操纵选择。这是指南：

我刚刚制作了您想要做的事情的简短版本：我正在替换内容<h1>在 HTML 编辑器中，通过在文本字段输入中输入它；与您想要实现的目标类似。我将 html 代码编辑器设置为只读，因此您无法对其进行编辑。看看并告诉我。

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

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

我希望它有帮助。