javascript - 富文本编辑器和源代码编辑器，使用 javascript 相互传输内容

Question

所以，我有一个富文本编辑器，它可以让我将 html 写入 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>

我有一个将这两种模式分开的引导导航选项卡，我想在交换模式时使用 javascript 来设置其他编辑器 div 的内容。这是标签和我正在编写的javascript。

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>

我还不关心逻辑，因为我无法测试它。javascript 函数不会更改其他编辑器的内容。所以出了点问题。

标签： javascriptjquery

Answer 1

在评论中得到一些帮助，谢谢你们！我设法让它工作。

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

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

谢谢您的帮助！