jquery - bootstrap-wysihtml5-rails 自定义按钮

Question

在我的项目中，我们使用bootstrap-wysihtml编辑器进行富文本编辑。我使用以下代码初始化编辑器，

$(document).ready(function(){
   $('#messageText').wysihtml5();
})

我需要向编辑器添加一个自定义按钮，其工作方式类似于insertLink，但允许用户仅输入链接的文本，并且该链接将由应用程序为用户插入。

非常感谢任何帮助。

Answer 1

我在创建 wysihtml5 元素后解决了添加按钮

function create_btn(title,icon,function_run){
   btn = '<li>'
   btn += '<a class="btn" data-wysihtml5-command="insertImage" title="'+title+'" onclick="'+function_run+'" unselectable="on">'
   btn += '<i class="'+icon+'"></i> '+title+'</a></li>'
}

$("#myTextArea").wysihtml5(); // Run the  wysihtml5

myButton = create_btn('Say  Hello','icon-glass',"alert('Hello World')"); // Generate the button HTML

$("#estoy-wysihtml5-toolbar").append(myButton) // Append the button

Answer 2

由于我无法弄清楚直接的方法，我做了以下事情来完成它，

1. 初始化编辑器后，将自定义按钮附加到 wysihtml 编辑器按钮列表。
2. 单击上面的按钮触发一个模式弹出表单，该表单收集来自用户的超链接文本。
3. 在保存模态表单时，将触发另一个 javascript 函数，该函数收集用户的输入并生成系统生成的 URL 令牌并插入到富文本编辑器中。

我遇到的挑战之一是，需要在当前光标位置插入 html，我本可以使用 javascript 函数来实现它，但我更喜欢以下方法，到目前为止效果很好:)

var editorElement = $('#messageText');
editorElement.wysihtml5();

var wysihtml5Editor = editorElement.data("wysihtml5").editor;
html = '<a href="URL_TOKEN" target="_blank" rel="nofollow">'+ <USERS INPUT TEXT> +'</a>';
wysihtml5Editor.composer.commands.exec("insertHTML", html);

如果有人知道更好的方法，请告诉我...