Question

我想将img元素的行为应用于另一个内联元素：单击它时，它应该被选中。

具体来说，我想要一个空的q或span标签，当用户点击它时，他应该能够添加一些属性。我编写了一个类似于链接按钮的插件，但它不适用于空元素，因为它们从未被选中。所有这一切的原因是我想用保存的属性生成的脚注替换服务器上的这些元素。

我发现img元素是如何完成的，来自tinymce / jscripts / tiny_mce_src.js：

        // Workaround for bug, http://bugs.webkit.org/show_bug.cgi?id=12250
        // WebKit can't even do simple things like selecting an image
        // This also fixes so it's possible to select mceItemAnchors
        if (tinymce.isWebKit) {
            t.onClick.add(function(ed, e) {
                e = e.target;

                // Needs tobe the setBaseAndExtend or it will fail to select floated images
                if (e.nodeName == 'IMG' || (e.nodeName == 'A' && dom.hasClass(e, 'mceItemAnchor'))) {
                    t.selection.getSel().setBaseAndExtent(e, 0, e, 1);
                    t.nodeChanged();
                }
            });
        }

但是当我尝试复制并调整它时，我遇到了问题，因为e.target已经是周围的段落元素，而不是我点击的空q元素（我用CSS的样式设置了：在伪类之前）。至少在WebKit上就是这样。在Firefox中，当使用双击而不是单击时，它实际上是有效的。

感谢您的帮助。

Answer 1

我终于搞定了！谢谢Thariama的帮助:) 注意：重要的是q元素的样式为display: inline-block;，否则你永远无法选择它。

//makes an empty q.citation tag selectable
ed.onClick.add(function(ed, e) {
    e = e.target;
    var dom = tinyMCE.activeEditor.dom;
    if (e.nodeName == 'Q' && dom.hasClass(e, 'citation') ) {
        ed.selection.select(e);

        //add class 'selected' for styling
        dom.addClass(e, 'selected');
        ed.onNodeChange.add(function(ed, cm, n) {
            //remove class 'selected'
            dom.removeClass(e, 'selected');
        });
    }
});

单击时在TinyMCE中选择空元素

1 个答案: