Replace parts of string (attributes) in textarea using input boxes

Question

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>

Answer 1

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.