使用输入框替换textarea中的字符串（属性）部分 [英] Replace parts of string (attributes) in textarea using input boxes

问题描述

主要目标：

要创建一个将实时预览HTML / CSS的网站码。

更具体地说：

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

我想要做的图片：

因此，在我的上一个问题我试图找到一种方式，使得实时预览框在从黑盒子获取代码后工作。它没有工作，因为代码是在 div 标记，而不是 textarea 。我想补充一点， div 标签中的代码使用 xmp 标签，因为一些部分是可从用户编辑的。

现在，我已经用 textarea 替换了 divs

如何编辑零件的 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 }}）;  

 < script src = //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;&script><div>Replace Title Background Color：< / div>< input type = textid ='thebox1'>< div id =copyTarget1class =innerbox css> < blockquote> < pre> < code> .title {background：＃< b class =popup1style =color：＃FF0000;> value< / b> vertical-align：middle;}< / code> < / pre> < / blockquote>< / div>< br>< br>< br>< br>< br>< br>  

div>

解决方案

我考虑采用另一种方法来使你的生活更轻松使用Ace这是一个真棒解决方案来获得不同语言的代码编辑器。所有内置JavaScript。它很容易集成。

您可以在这里找到我刚刚创建的示例： https://dubaloop.io/dev/html_css_js_editor/

基本上，您加载用于ace的库：

 < script src =src-noconflict / ace.jstype =text / javascript charset =utf-8>< / script>然后为您的HTML，CSS，JavaScript编辑器创建一个pre容器：
  
 < pre class =editorid =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 repo： 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事件。现在我设置它在任何输入，当你敲入。另一个大问题，也许是你拥有的主要是你是如何通过jQuery访问iframe。你需要使用$（'selector'）。contents（）。find（'selector2'）。最后，另一个问题是您正在检索从代码包装器获取属性值的数据。你需要得到的是实际内容作为平面文本，以避免其他html内容。为了做到这一点，你需要使用.text（）（请检查更新的GetHtml（）和GetCss（）函数）。 
 
 
 
 
 
我希望你能从这里开始工作。仍然，我喜欢选项1：P 
 
 
 
我希望它有帮助。
 
Main Target :

To create a website that will have a live preview of an HTML/CSS code. 

More specifically :

The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.

Image of what I am trying to do :


So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.

Now, I have replaced the divs with textarea tags but the EDIT function does not work.

Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a 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>



解决方案
I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.

You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/

Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
  alert('works');   
}</pre>
You will be able to convert them into code editor by using the function: 
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip

Have a look to see if this would work for you. 

GitHub repo for ACE: https://github.com/ajaxorg/ace-builds

I hope it helps.

UPDATE:

I decided to update the response to replay to your last comment. A few things about it: 


First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor


I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.


Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html 
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions). 


I hope you can make it work from here. Still, I like option 1 :P

I hope it helps.

                        
这篇关于使用输入框替换textarea中的字符串（属性）部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！