CodeMirror not indenting code

Question

I am having some problems getting CodeMirror to indent the code at the beginning of a new line.

I have a text area, and when I hit save, the code that is saved to the DB is something like:

<meta charset=\"utf-8\">\r\n\t\t\t<title></title>\r\n\r\n<div class=\"wra ... etc

But when I read that out and do in the code behind in asp.net, ViewCode.Text = dbModel.ViewCode ... i.e. try to assign that string to the textarea which will then be 'converted' into the code mirror editor with relevant js on the page, the indent at the start of new lines is lost. If I indent half way along a line however, those render.

Also, if there is a new line return and then a blank row and then more text, the blank row gets lost when read back out to the text area.

Note: the textarea is runat server to fill the value from the database. I have tried with divs and literals but can't get it working.

So how can I save something like:

<div>
   <b>
       test
   </b>
</div>

and not get it back like

<div>
<b>
test
</b>
</div>

I presume I have to encode it on save but I swear I have tried all encoding methods and now work! lol

Any pointers would be appreciated.

Cheers

Robin

Update/Solution

I have come back to put this in, in case some one stumbles across this post.

Basically I could not still not get the following to play nicely on the particular page in question. I.e.

Code behind

ViewCode.Value = dbModel.ViewCode

where

dbModel.ViewCode  
//  --> is comes from db as e.g.: 
// <meta charset=\"utf-8\">\r\n\t\t\t<title></title>\r\n\r\n<div class=\"wra ... etc

JS (at end of page)

<script>

 var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("ViewCode"), {
        lineNumbers: true
    });

</script>

What I did get working however, is if you put the same JS code on the page, however, do NOT fill the text area from the code behind. Then I just make a simple ajax call to a page method to get the data (on page load).

$.ajax({
            url: '/WidgetMaint.aspx/GetFileHTML',
            type: 'Get',
            contentType: 'application/json',
            data: { tempid: id },
            success: function(result) {
                myCodeMirror.setValue(result.d);
            }
        });

The save and everything else works perfectly because the textarea is still run at server, so can still get its value 'on save', as code mirror takes care of this.

I am fairly sure that there is something else in the pipeline which is stuffing around with the text and 'formatting' it different before code mirror can get to it in time in the first attempt I was doing. However, with the ajax call the problem goes away because the browser/framework/whatever does not have any opportunity to access the string the DB returns. It is feed straight to the instance of code mirror which deals with it.

So in case you are having a similar problem, might be easier to change approach....

Cheers

Robin

Note: accepted answer by Eliran as it gave me this idea, and upvoted Marjin, because that comment proved it code mirror can handle indents...

Answer 1

I would advice you to drop that textarea and keep a live instance of CodeMirror on the page. That way you can assign the response directly to that instance using the CodeMirror API.

Take a look at doc.setValue(content: string) in particular, that should get you on the right track.