分类

最近发布

公告

  • 星博客移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

关于TinyMCE不同步HTML内容的问题

我在自己的博客系统中使用了这个TinyMCE富文本编辑器,很久之前,我便遇到了TinyMCE并不自动同步HTML内容到textarea控件的问题。曾经有所解决,并且成功了,再没管这事。现在我又遇到了这个问题,查了几个文档,都建议表单submit之前,执行一下tinymce.triggerSave(),这个没问题,解决了我的问题!但是令我疑惑的是另一个地方能够自动同步。

我现在把问题描述一下。

我对TinyMCE的配置如下:

var PLUGINS = [
    "image", "code", "emoticons", "pagebreak", "table",
    "advlist", "autolink", "lists", "link", "imagetools", "textcolor",
    "help", "codeeditor", "codesample", "wordcount", "fullscreen",
    "quote"
];
var TOOLBARS = [
    "image", "code", "emoticons", "pagebreak", "forecolor",
    "backcolor", "numlist", "bullist", "fullscreen"
];
var STYLE = [
    'pre.code { border: 1px solid #eee; border-left-width: 3px; padding: 5px;}',
    'blockquote { background: #F3F5F9; padding: 15px 25px; border-left: none; margin: 0; }',
    'body { color: #666; }',
    'h3, h4 { border-bottom: 1px dashed #ddd; color: initial; }',
    'h3:before { content: \'#\'; color: #888; font-size: .86em; }',
    'h4:before { content: \'##\'; color: #888; font-size: .86em; }'
];
tinymce.init({
    selector: '#richTextInput',
    plugins: PLUGINS.join(' '),
    toolbar: TOOLBARS.join(' '),
    width: '100%',
    height : 450,
    entity_encoding : "raw",
    images_upload_url: '/xxx/postAcceptor.php',
    images_upload_base_path: '',
    images_upload_credentials: true,
    content_style: STYLE.join(' ')
});

这个配置我应用于两个地方,一个是文档内容编辑、另一个是单页面内容编辑。

首先看一下文档内容编辑的HTML代码:

<form id="postForm" method="POST">
 <div style="width: 86.7%; margin: 0 auto;">
  <h5>为XXX编写内容</h5>
  <textarea id="richTextInput" name="content">{{HTML}}</textarea>
  <div style="margin: 1.9em 0;">
   <button class="waves-effect waves-light btn" type="submit">保存</button>
   <button class="waves-effect waves-light btn grey" type="button">取消</button>
  </div>
 </div>
</form>

对此表单的提交用到jQuery.fn.serialize、jQuery.ajax两个方法。

再来看看单页面内容编辑的HTML代码:

<form id="Form" method="POST">
 <!--上面还有其它字段-->
 <fieldset><legend>内容</legend>
  <div class="row">
   <div class="input-field col s12">
    <textarea id="richTextInput" name="content">{{HTML}}</textarea>
   </div>
  </div>
 </fieldset>
 <!--下面还有其它字段、保存按钮等-->
</form>

看看,也就是表单结构和字段数量稍有不同而已,结果是上边的情况可以在提交前自动同步HTML,而后者不能。

这个里面应该还有些道道,我现在不清楚。

目前的解决办法就是用 triggerSave 手动同步一下。

发布于 2018年07月22日 17:09
阅读 32 可以 3