Question

我正在尝试在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问题，我首先从文档中错过了范围函数与我正在开发的Google Chrome不兼容/对

仍然对解决方案感兴趣：）

提前致谢，

Answer 1

您可以查看附加包中的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>

Aloha编辑器 - 获取突出显示的文本并替换为html代码

1 个答案: