fastadmin集成kindeditor编辑器解决段后距问题--全网唯一

本文链接：https://blog.csdn.net/sccd2009/article/details/144396622

背景

由于项目的需求使用fastadmin推荐的编辑器kindeditor，使用过程中发现没有段后距这个bug。查询搜索了所有的网上来源，都没有解决方案。鉴宇客户非常需要该功能，奋战几天写端代码实现了该功能。

插件实现

KindEditor.plugin('paragraph', function(K) {
    var self = this, name = 'paragraph', lang = self.lang(name + '.');

    self.clickToolbar(name, function() {
        const iframe = document.querySelector("iframe").contentDocument;

        var curVal = '', commonNode = self.cmd.commonNode({'*' : '.line-height'});
        if (commonNode) {
            curVal = commonNode.css('margin-bottom');
        }
        var menu = self.createMenu({
            name : name,
            width : 150
        });
        K.each(lang.paragaph, function(i, row) {
            K.each(row, function(key, val) {
                menu.addItem({
                    title : val,
                    checked : curVal === key + 'px',
                    click : function() {
                        // wrapTextNodes(iframe.body)
                        self.cmd.toggle('<span style="margin-bottom:' + key + 'px;display: block"></span>', {
                            span : '.margin-bottom=' + key
                        });
                        const words = iframe.getSelection().toString()
                        if (iframe.getSelection().rangeCount > 1) {
                            var range = iframe.getSelection().getRangeAt(0);
                            var selectedElement = range.commonAncestorContainer;
                            if (selectedElement.nodeType === Node.TEXT_NODE) {
                                selectedElement = selectedElement.parentNode;
                            }
                            const tag = iframe.body.querySelectorAll("p");
                            const wordsList = words.split("\n\n");
                            let choseCount = 0;

                            for (const el of Array.from(tag)) {
                                let hasChose = false;
                                for (const text of wordsList) {
                                    if (el.textContent === text) hasChose = true;
                                }
                                choseCount += hasChose ? 1 : 0;
                                if (hasChose === true) {
                                    el.style.marginBottom = curVal + 'px';
                                    el.classList.add('selectedMenuItem'); // 添加选中效果
                                } else {
                                    el.classList.remove('selectedMenuItem'); // 移除选中效果
                                }
                            }
                        } else {
                            let parentNode
                            let html = []
                            const copyNodes = [...Array.from(iframe.body.childNodes)]

                            iframe.body.innerHTML = ''
                          copyNodes.forEach(el => {
                               if (!parentNode) parentNode = el.parentNode
                               if (el.nodeType === 3) {
                                   const span = document.createElement('span')
                                   span.innerText = el.textContent
                                   span.style.display='block'
                                   span.style.marginBottom = val
                                   console.log(iframe.body, span)
                                  iframe.body.appendChild(span)
                                   // el.parentNode.replaceChild(span, node)
                               }else {
                                   el.style.display = 'block'
                                   el.style.marginBottom = val
                                  iframe.body.appendChild(el)
                               }
                           })


                        }
                        self.updateState();
                        self.addBookmark();
                        self.hideMenu();
                    }
                });
            });
        });
    });
});