bootstrap-wysihtml5-rails custom button

Question

В моем проекте мы используем редактор bootstrap-wysihtml для редактирования расширенного текста. я инициализировать редактор, используя следующий код,

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

мне нужно добавить пользовательскую кнопку в редакторе, который работает аналогично insertLink, но позволит пользователю вводить только текст для ссылки и ссылка будет вставлена по заявке для пользователя.

Любая помощь очень ценится.

Answer 1

Так как я не мог понять, прямой способ, я сделал следующее, чтобы сделать это,

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

Если кто-нибудь знает лучший способ сделать, дайте мне знать ...

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