是否可以让 TinyMCE 弹出窗口进入 Bootstrap 模式?不是实际的编辑器本身,而是链接或代码的弹出窗口。如果是这样,你怎么做?
问问题
487 次
2 回答
0
在这里,我创建了一个示例https://jsbin.com/sevowetifi/1/edit?html,output
将textarea
或目标元素放入.modal-body
您的模态中
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
<textarea>Next, use our Get Started docs to setup Tiny!</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
于 2020-04-09T16:30:40.400 回答
0
查看 jsfiddle 的完整功能: https ://jsfiddle.net/ndxy1pqt/ Stack 的 iframe 沙箱和 TinyMCE 存在问题,因此嵌入式演示不可编辑,但它显示了启动 Bootstrap 模式功能的按钮。
它基本上只需要添加一个插件,并使用editor.addButton
添加一个启动 Bootstrap 的按钮。您将需要查看有关 Bootstrap 插件的更多详细信息,以执行诸如获取正确坐标以创建嵌入式工具提示等内容之类的操作。我会去看一些带有自定义工具栏的 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>
于 2020-04-10T21:26:10.010 回答