2016-01-21 178 views
3

我在前端设置了编辑器并出现问题,在这种情况下如何初始化tinymce初始化Tinymce的问题

我的代码:

<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'); 
      } 
     }); 
     }); 

} 

最终,编辑器被加载,但里面空空如也。我该如何解决它?

转载于此:http://codepen.io/anon/pen/PZEEwG

回答

2

这很容易做到。在初始化tinymce之前,确保tinymce源元素包含所需的内容。 另一种选择是在初始化后设置tinymce内容。

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()); 
     }); 
    } 
    }); 

.... 
} 

更新:在提交做到:

$('form.tinymce').on('submit', function() { 
    // Calls the save method on all editor instances in the collection. This can be useful when a form is to be submitted. 
    tinyMCE.triggerSave(); 

    .... 
}); 
+0

现在在编辑器中的HTML代码,但在textarea的发送形式向服务器时发送的形式执行主编之前空 –

+0

。 triggerSave();这将更新tinymce源元素与编辑内容 – Thariama

+0

sry,更正了我的答案 – Thariama