1

我正在尝试在 Aloha 中设置一个自定义操作，添加一个按钮，将选定的文本包含在一个 span 类中。

示例：您选择了“示例词”

它会改变它

<span>example word</span>

我的问题是目前我无法从 Aloha 中获取选定的文本，更不用说重新插入它了。

从文档中，这些行一直没有返回：

var range;
if ( Aloha.getSelection().rangeCount > 0 ) {
range = Aloha.getSelection().getRangeAt( 0 );
}

完整代码：

    var redHighlight = "";
    Aloha.require(['ui/ui', 'ui/button'], function(Ui, Button) {
        var redButton = Ui.adopt("redButton", Button, {
            tooltip: 'Label',//gives inner text
            click: function(){
              var range;
              if ( Aloha.getSelection().rangeCount > 0 ) {
                  range = Aloha.getSelection().getRangeAt( 0 );
              }
              console.log(range); //returns nothing
            }
        });
    });

    Aloha.settings.toolbar = {
        tabs: [
         {
            label: 'Urgent',
            components: [ 'redButton' ],
         }
        ],
        exclude: [ 'strong', 'emphasis', 'strikethrough' ]
    };

编辑 1： 我带着这个问题进入了 Aloha 论坛，从 mod 我得到在输出中重新插入 html 可能会导致一些 DOM 问题，我首先从文档中错过了范围函数与我的谷歌 Chrome 不兼容的问题m 正在/为。

不过仍然对解决方案感兴趣:)

提前致谢，

4

1 回答 1

2

您可以查看额外包中的 wai-lang 插件等插件。Aloha Editor 中有一个实用程序对象，可帮助您将选定的文本包装到 DOM 对象中。

var range = Aloha.Selection.getRangeObject();
if (range.isCollapsed()) {
            GENTICS.Utils.Dom.extendToWord(range);
}
if (!range.isCollapsed()) {
    GENTICS.Utils.Dom.addMarkup(range,
        jQuery('<span class="myspecialspan"></span>'), false);
}
range.select();

除了相应地更改选择之外，它还将处理 DOM 拆分，例如，当您不只选择文本但您的选择还包含无法包装到跨度中的块元素时，跨度将被拆分：

<h1>{Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3}</h1>

其中 { 标记选择的开始和 } 结束，将导致

<h1>{<span class="myspecialspan">Heading 1</span></h1>
<h1><span class="myspecialspan">Heading 2</span></h1>
<h1><span class="myspecialspan">Heading 3</span>}</h1>
于 2012-09-30T14:07:13.590 回答