Посмотрите на jsfiddle для полной функциональности: https://jsfiddle.net/ndxy1pqt/ Есть проблемы с песочницей iframe Stack и TinyMCE, поэтому встроенная демонстрация не редактируется, но показывает кнопку запуска модальной функции Bootstrap.
В основном это просто добавление плагина и использование editor.addButton для добавления кнопки, которая запускает Bootstrap. Вы захотите более подробно узнать о Bootstrap плагинах, чтобы получить такие вещи, как получение правильных координат для создания таких вещей, как встроенные всплывающие подсказки или тому подобное. Я бы go посмотрел несколько плагинов TinyMCE с пользовательскими панелями инструментов для получения дополнительной информации.
tinymce.PluginManager.add('myPlugin', function (editor, url) {
editor.addButton('launchModal', {
text: 'My Bootstrap Modal',
onclick: function () {
$('#myModal').modal('show');
$('#modal-button').on('click',function(){
editor.setContent('set content');
editor.selection.setNode(editor.dom.create('img', {src: 'some.gif', title: 'some title'}));
});
}
});
});
tinymce.init({
selector: '#text-box',
plugins: 'myPlugin',
menubar: 'myPlugin',
toolbar: "launchModal",
templates: [
{ title: 'Template 1', description: 'Description of template 1', content: '<p>alma</p><p>korte</p>' },
{ title: 'Template 2', description: 'Description of template 2', content: 'development.html' }
],
height: 300
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<body>
<textarea id="text-box"></textarea>
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button id="modal-button">button
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>