forced_root_block option in TinyMCE

问题:

I am trying to implement a custom WYSIWYG editor using a contenteditable <div>.

One of the major issues I am facing is the inconsistent way browsers handle ENTER keystroke (linebreaks). Chrome inserts <div>, Firefox inserts <br> and IE inserts <p>. I was taking a look at TinyMCE and it has a configuration option called forced_root_block. Setting forced_root_block to div actually works across all major browser. Does someone know how forced_root_block option in TinyMCE is able to achieve it across browsers ?

回答1:

In the tinymce source (/tiny_mce/classs/dom/DomParser.js) you will find the following:

rootBlockName = "forced_root_block" in args ? args.forced_root_block : settings.forced_root_block;

        whiteSpaceElements = schema.getWhiteSpaceElements();
        startWhiteSpaceRegExp = /^[ \t\r\n]+/;
        endWhiteSpaceRegExp = /[ \t\r\n]+$/;
        allWhiteSpaceRegExp = /[ \t\r\n]+/g;

        function addRootBlocks() {
            var node = rootNode.firstChild, next, rootBlockNode;

            while (node) {
                next = node.next;

                if (node.type == 3 || (node.type == 1 && node.name !== 'p' && !blockElements[node.name] && !node.attr('data-mce-type'))) {
                    if (!rootBlockNode) {
                        // Create a new root block element
                        rootBlockNode = createNode(rootBlockName, 1);
                        rootNode.insert(rootBlockNode, node);
                        rootBlockNode.append(node);
                    } else
                        rootBlockNode.append(node);
                } else {
                    rootBlockNode = null;
                }

                node = next;
            };
        };

This obviously takes care of creating root block elements. I am 99% sure that tinymce handles the 'ENTER' keystroke itself and stops the propagation/ default browser command.