javascript - Problems with initialize Tinymce -
i set editor on frontend , have problem, how initialize tinymce
in case.
my code:
<head> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> </head> <body> <a class=pageedit>Редактировать</a> <div id="textwidget" class="textwidget"> lorem ipsum dolor sit amet, consectetur adipisicing elit. obcaecati esse enim facilis quam magnam nihil excepturi ipsa, maxime ducimus sapiente, repudiandae facere mollitia, velit quia dolore doloribus molestiae odit fuga? </div> </body> /*jquery*/ $(document).ready(function() { $('a.pageedit').on('click', function() { $('#textwidget').wrap('<form class="tinymce"><textarea class="tiny" name="page"></textarea></form>'); $(this).unbind('click'); settimeout(function() { tinit(); },100); }); }); function tinit() { tinymce.init({ selector:'textarea.tiny', height: 600, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code' ], toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', }); $('form.tinymce').submit(function() { return false; }); $('form.tinymce').on('submit', function() { var page = $(this).serialize(); $.ajax({ type:'post', url: 'publish.php', data: page, success: function(data) { alert(data); document.location.href = ''; }, error: function() { alert('error'); } }); }); }
in end, editor loaded, empty inside. how can solve it?
is reproduced here: http://codepen.io/anon/pen/pzeewg
this can done. make sure tinymce source element contains desired content before initializing tinymce. other option set tinymce content after initialization.
tinymce.init({ selector:'textarea.tiny', height: 600, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code' ], toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', setup : function(ed) { ed.on('init', function(evt) { ed.setcontent($('#textwidget').html()); }); } }); .... }
update: on submit do:
$('form.tinymce').on('submit', function() { // calls save method on editor instances in collection. can useful when form submitted. tinymce.triggersave(); .... });
Comments
Post a Comment