I'm using tinymce text editor in my project it's working properly in the main window but when i try to load bootstrap modal the simple textarea appears and there's no Tinymce's option. Here's my site and login info: hmodelschool.co.nf, email: admin@example.com pass: 1234 In the news section you'll see the tinymce option comes properly. but when i try to edit with bootstrap modal tinymce's option doesn't come. wht to do. Here my code i'm using. in include.top.php i'm loading tinymce from cdn.
<!--tinymce text editor-->
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({
selector: 'textarea',
height: 300,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor
pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu
directionality',
'emoticons template paste textcolor colorpicker textpattern
imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic |
alignleft aligncenter alignright alignjustify | bullist numlist
outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
});</script>
in main page news.php i'm calling it with:
<div class="form-group">
<label class="col-sm-3 control-label">
<?php echo get_phrase('news');?></label> <div class="col-sm-5">
<div class="box closable-chat-box"> <div class="box-content padded">
<div class="chat-message-box"> <textarea name="news" id="ttt"
rows="5" placeholder="<?php echo get_phrase('add_news');?>"
class="form-control"></textarea> </div>
</div>
</div>
</div>
</div>
and also in modal_edit_news.php i'm calling it with:
<div class="form-group">
<label class="col-sm-3 control-label">
<?php echo get_phrase('news');?></label> <div class="col-sm-5">
<div class="box closable-chat-box"> <div class="box-content padded">
<div class="chat-message-box"> <textarea name="news" id="ttt"
rows="5" placeholder="<?php echo get_phrase('add_news');?>"
class="form-control"></textarea> </div>
</div>
</div>
</div>
</div>
And the tinymce doesn't just work on bootstrap modal. Any help would be greatly appreciated.
I had encountered a similar issue when loading a modal over an AJAX request. The workaround is to initialize the TinyMCE editor on loading the modal.
$('#myModal').on('shown.bs.modal', function () {
tinymce.init({
selector: 'textarea',
height: 300,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor
pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu
directionality',
'emoticons template paste textcolor colorpicker textpattern
imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic |
alignleft aligncenter alignright alignjustify | bullist numlist
outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.