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

Question

主要目标：

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

更具体地说：

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

我正在尝试做的事情的图片：

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

现在，我已将divs 替换为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>

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

希望对你有帮助。