Question

我正在为我的网站创建一个自定义的所见即所得编辑器。我现在正在使用TinyMCE，但不需要所有选项（我知道，我可以删除一些选项/按钮，但这也只是为了学习javascript）。

<select class="heading">
    <option value="p">Paragraph</option>
    <option value="H1">Heading 1</option>
    <option value="H2">Heading 2</option>
    <option value="H3">Heading 3</option>
</select>
<div class="content" contenteditable="true"></div>

在按下ENTER键之后，我使用以下代码将p元素包裹在句子/块周围。

<script>
$('.content').on('keypress', function(e){
    if(e.keyCode == 13){
        document.execCommand('formatBlock', false, '<p>');
    };
});
</script>

我还可以选择以下选项：h1，h2和h3。

<script>
$('.heading').on('change', function(e){
    e.preventDefault();
    // I use formatBlock instead of heading for chrome support
    document.execCommand('formatBlock', false, '<'+this.value+'>');
    $('.content').focus();
});
</script>

问题是：当我键入一些文本并选择文本并选择h1时，它可以工作。但是，当我按ENTER键时，文本周围的h1标记将被删除，并被p标记代替（因为第一个功能）。

我该如何解决？

execcommand在ENTER之后删除formatBlock

0 个答案: