使用輸入框

Question

主要目標替換textarea的部分字符串（屬性）：

要創建一個網站，將有一個HTML/CSS代碼，實時預覽。

更具體地：

的HTML/CSS代碼將是可編輯的形式在一些特定部分的用戶。所以，實時預覽中的代碼不會從文本區域派生，而是從div派生。

圖片的什麼，我試圖做的：

所以，在我Previous Question我試圖找到一種方法，使對黑匣子獲取代碼後實時預覽框中的工作。它不起作用，因爲代碼是在div標記中給出的，而不是textarea。我想補充一點，div標記中的代碼使用xmp標記，因爲某些部分可以從用戶編輯。

現在，我用textarea標籤替換了divs標籤，但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"> 
 
\t <blockquote> 
 
\t  <pre> 
 
\t \t  <code> 
 
.title 
 
{ 
 
    background: #<b class="popup1" style="color:#FF0000;">value </b>; 
 
    vertical-align: middle; 
 
} 
 

 
\t \t \t </code> 
 
\t \t </pre> 
 
\t </blockquote> 
 
</div> 
 
<br><br><br><br><br><br>

Answer 1

我想過採取另一種方法，使利用ACE（CLOUD9編輯）您的生活更輕鬆。獲取不同語言的代碼編輯器是一個非常棒的解決方案。所有內置JavaScript。整合很容易。我只是下載它來創建您正在嘗試構建的案例。

你可以找到我剛纔在這裏所作的例子：https://dubaloop.io/dev/html_css_js_editor/

基本上，您加載庫王牌：

<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

看看這是否適用於您。

GitHub庫的ACE：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」...））有關。那裏沒有關鍵事件。現在，我在輸入時將其設置爲任何輸入。另一個大問題，也許你最主要的問題是你如何通過jQuery訪問iframe。你需要使用$（'selector'）。contents（）。find（'selector2'）。最後，另一個問題是您正在檢索從代碼包裝獲取屬性值的數據。你需要得到的是實際的內容作爲平面文字，以避免其他的HTML內容。爲了做到這一點，你需要使用.text（）（請檢查更新的GetHtml（）和GetCss（）函數）。

我希望你能從這裏開始工作。不過，我喜歡選項1：P

我希望它有幫助。