Rich text editor and source editor, transfer content of each to the other using javascript

Question

So, I have a rich text editor, that lets me write html into a div.

<div id="editor" contenteditable="true">
            @Html.Raw(Model.Text)
        </div>
    </div>
    <div class="tab-pane" id="source">
        <div class="textarea" id="editSource" contenteditable="true">
            @Model.Text
        </div>
    </div>

I have a bootstrav nav-tabs that separate these two modes, I wanted to use javascript to set the content of the other editor div when swapping modes. here are the tabs and the javascript I'm writing.

function editorClick() {
        $('#editor').innerHTML = $('#editSource').innerHTML;
    };

    function sourceClick() {
        $('#editSource').innerHTML = $('#editor').html();
    };
</script>

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#edit" data-toggle="tab" onclick="editorClick();">Editor</a></li>
    <li class="nav-item"><a class="nav-link" href="#source" data-toggle="tab" onclick="sourceClick();">Source</a></li>
</ul>

I'm not concerned about the logic yet as I haven't been able to test it. the javascript functions don't change the content of the other editors. so something is wrong.

`innerHTML` its a pure javascript not a jquery .. in jquery `$('#editor').html($('#editSource').html());` in pure javascript `$('#editor')[0].innerHTML = $('#editSource')[0].innerHTML;` OR you need to use `document.getElementById('editSource').innerHTML` — Mohamed-Yousef, Mar 01 '19 at 22:27
hmm cool that first bit worked, but I'd need to do something like the @Html.Raw() for the editor, is that possible from jQuery or javascript? — inifus, Mar 01 '19 at 22:33
You mean you want the actual HTML rather than just the rendered text? jQuery's [`.html()`](http://api.jquery.com/html/) should provide that. See [How to switch to raw HTML in contenteditable for in place editing?](https://stackoverflow.com/a/26601707/924299). — showdev, Mar 01 '19 at 22:36
The `@Html.Raw()` is processed on server-side... I think it's ASP.. (while unsure) And JavaScript/jQuery is on client-side. Read [this](https://softwareengineering.stackexchange.com/questions/171203/what-are-the-differences-between-server-side-and-client-side-programming). — Louys Patrice Bessette, Mar 01 '19 at 22:37
for editor I need the rendered stuff, for source I need the html text — inifus, Mar 01 '19 at 22:37

score 0 · Accepted Answer · answered Mar 01 '19 at 23:53

with some assistance in the comments, thank you guys! I managed to get it working.

    function editorClick() {
        $('#editor').html($('#editSource').text());
    };

    function sourceClick() {
        $('#editSource').text($('#editor').html());
    };

Thanks for the help!

Rich text editor and source editor, transfer content of each to the other using javascript

1 Answers1