TinyMCE 4 w/ Twitter Bootstrap
Pepperweb tests
HTML
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!--
Problem inserting/editing links (<a href>) in the text in TinyMCE 4, in combination with Twitter Bootstrap modal popup.
Chrome/Firefox: Can't insert/edit the Url in the pop-up
IE9/10: Can edit the Url, but doesn't save changes
-->
<!-- Default modal example from: http://twitter.github.io/bootstrap/javascript.html#modals -->
<!-- Button to trigger twitter bootstrap modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch TinyMCE in bootstrap modal</a>
<!-- Modal itself -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form>
<table align='center'>
<tr>
<td>
Image Title
</td>
<td>
<input type='text' id='imagetitle'>
</td>
</tr>
<tr>
<td>
Content Type
</td>
<td>
<select name='newstype' id='newsty'>
<option value='' selected> Select type </option>
<option value='Resources'> Resources </option>
<option value='news and Update'> News and updates </option>
...
CSS
body { margin: 20px 0; }
JavaScript
tinymce.init({
selector: "textarea",
width: '100%',
height: 270,
plugins: [ "anchor link" ],
statusbar: false,
menubar: true,
toolbar: "link anchor | alignleft aligncenter alignright alignjustify",
rel_list: [ { title: 'Lightbox', value: 'lightbox' } ]
});