bootstrap-wysihtml5-rails custom button

Question

In my project, we are using bootstrap-wysihtml editor for rich text editing. I initialize the editor using following code,

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

I need to add a custom button to the editor, which works similar to insertLink, but would allow user to enter only text for the link and the link will be inserted by application for the user.

Any help is highly appreciated.

Answer 1

Since I could not figure out a straight forward way, I did the following to get it done,

1. After initializing the editor, appended a custom button to the wysihtml editor button list.
2. Triggered a modal pop up form on click of the above button, which collection the hyperlink text from user.
3. On save of the modal form, another javascript function will be triggered, which collects the user's input and generate the system generated URL token and inserts in to the rich text editor.

One of the challenge I come across was, need to insert the html at the current cursor position, I could have used a javascript function to achieve it, but I preferred the following and it works great so far :)

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);

If anyone knows a better way of doing, let me know...

Answer 2

I resolved add the button after creating the wysihtml5 element

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