Ckeditor - 将多个子元素添加到列表元素

Question

在 CKeditor 中是否可以将多个子元素添加到列表元素？

例如

 - Heading

   Paragraph
 - Heading2

   Paragraph2

背景故事- 我创建了一种样式，让用户可以对订单列表进行样式设置。这种风格的一部分是在每个列表项元素中都有一个标题和一个 paragrpah。

问题- 当添加标题元素并按 Enter 时，为了能够添加段落，而是添加了一个新的列表项。如果按下 shift+enter/shift+enter 按钮组合，则创建一个新列表而不创建新列表项，但光标仍保留在标题元素内，因此无法以这种方式添加任何段落。

有没有办法解决这个问题？

Answer 1

我找到了一种通过覆盖 CKEditor 中的按键事件来解决问题的方法。当一个键被按下时，它会检查：

1. 按下的是 Enter 键；
2. 光标在列表中；
3. 光标所在节点不为空；
4. 光标位于节点末尾。

如果是这样的话

1. 在当前节点之后添加一个段落。
2. 将光标移到其中。

代码：

CKEDITOR.on(
    'instanceReady',
    function(ev) {
        var editorInstance = CKEDITOR.instances[ev.editor.name];
        var editorWindow = editorInstance.window.$;
        var editorDocument = $editor_instance.document.$;
        var editorBody = editorDocument.body;

        /***
         * Fix the editor not letting you add sub elements to lists
         */
        editorInstance.on( 'key', function( event ) {
            // Get the HTML event
            var e = event.data;
            // If the enter key was pressed
            if(e.keyCode == 13) { 
                // Find which element the cursor is in
                var selection = editorWindow.getSelection();
                var cursorElem = $(selection.anchorNode);
                // Only override the default behaviour if we're in a list element, and the user has typed something
                if(cursorElem.closest('li').length && cursorElem.text().trim().length) {
                    // get the current cursor position
                    var range = editorWindow.getSelection().getRangeAt(0)
                    // create range to find how many characters are after the cursor
                    var postRange = editorDocument.createRange();
                    postRange.selectNodeContents(cursorElem[0]);
                    postRange.setStart(range.endContainer, range.endOffset);
                    var nextText = postRange.cloneContents();
                    var isAtEnd = nextText.textContent.length === 0;
                    // Only override if we're at the end of the list element
                    if(isAtEnd) {
                        // cancel the default event
                        event.cancel();
                        // get the element to add the new paragraph after
                        var after = cursorElem;
                        // if the cursor is in a TEXT not instead of an actual HTML node then get the parent HTML code
                        if(cursorElem[0].nodeType == Node.TEXT_NODE) {
                            after = cursorElem.parent();
                        }
                        // Add the new paragraph
                        after.after('<p></p>');
                        var newParagraph = after.next();

                        // set selection to the new paragraph
                        var range = editorDocument.createRange();
                        range.setStart(newParagraph[0], 0);
                        selection.removeAllRanges();
                        selection.addRange(range);
                    }
                }
            } 
        });

    }
);

显示新段落所需的 CSS：

p {
    min-height: 1em;
}

附：感谢这个答案展示了如何检查光标是否在元素的末尾 Contenteditable DIV - how can I determine if the cursor is at the start or end of the content