Question

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

初始化编辑器

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

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

非常感谢任何帮助。

Answer 1

由于我无法想出一个直接的方法，我做了以下工作来完成它，

初始化编辑器后，将自定义按钮附加到wysihtml编辑器按钮列表。
点击上面的按钮，触发一个模态弹出窗体，收集用户的超链接文本。
在保存模态表单时，将触发另一个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);

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

Answer 2

我解决了在创建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

bootstrap-wysihtml5-rails自定义按钮

2 个答案: