Question

我在前端设置编辑器并遇到问题，在这种情况下如何初始化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

Answer 1

这很容易做到。在初始化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();

    ....
});

初始化Tinymce的问题

1 个答案: