王骏的博客
编程、网络技术点滴...

公告

逐渐将VC知识库的博客迁移到这里!

随笔分类

随笔档案

相册

最新评论

阅读排行榜

评论排行榜

程序员博客   首页  新随笔  订阅  管理  登录 
 
王骏的博客 阅读(2733) 评论(11)

来源:http://blog.roodo.com/jaceju/archives/3274703.html

JavaScript 小陷阱 (8) - TinyMCE 的处理
这两天在使用 TinyMCE (版本 2.x) 上遇到了几个小问题,这边记一下以供备忘。

jQuery Form (with AJAX) and TinyMCE
目前在页面上如果有表单要采用 AJAX 送出资料时,我采用的是 jQuery 的 Form plugin (with AJAX) 这个官方 plugin 。

Form plugin 使用 AJAX 来 Submit 的用法如下:

$('myForm').submit(function () {
    $(this).ajaxSubmit();
    return false; // 这行很重要
});可是当表单中有 TinyMCE 时,我发现接收的 PHP 程式一直收不到 TinyMCE 所转换出来的 textarea 内容。

大致追了一下 TinyMCE 的原始码,发现它其实先置换 form 的 submit 方法,在 submit 前先把 iframe 的内容复製到 textarea 中:

tinyMCE.formSubmit(this, true);而 formSubmit 方法的第二个参数是指要不要呼叫原来的 submit 。瞭解这个关係以后,我就把原来的 submit 改造了一下:

$('myForm').submit(function () {
    // 让 TinyMCE 和与 Form plugin 一起运作的关键
    tinyMCE.formSubmit(this, false);
    $(this).ajaxSubmit();
    return false;
});我先透过 TinyMCE 的 formSubmit 把值复製到 textarea 裡,不过不直接 submit ,而是改由后面的 ajaxSubmit 来完成送出表单的工作。

案例一结束。

Dynamic Textarea Content with TinyMCE
有时候我会需要在前端动态更新 Textarea 的内容,在 jQuery 下有个简单的方法:

$('textarea.mceEditor').val('<p>Updated html content.</p>');这样就能对 class 為 mceEditor 的 textarea 做内容的更新;不过很可惜,这个更新并不会立刻反应到 TinyMCE 的介面上。

怎麼办呢?还好 TinyMCE 有提供 updateContent 这个方法,我只要在更新完 textarea 的内容后加上:

// 每个有用到 TinyMCE 的 textarea 都要更新
$('textarea.mceEditor').each(updateTinyMCE);

var updateTinyMCE = function () {
    // 注意,因為 TinyMCE 一定要使用 id
    // 所以 textarea 一定要设定 id 属性
    tinyMCE.updateContent(this.id);
};这样就能结束案例二了。

註:以上只是概念程式,实务上要配合现有的架构做相关的调整。


评论列表
outletnczyk
  tQ*b5   i+dZj   "vokl   hj!K -    ?%b\x
outletjkogc
  am;.i   77pq#   JqIIL   G#RN5   XB7?[
outletlkitu
  2hUgv   "pZ=j   ^<l!f    - mhX -    #gYLC
outletxpoby
  `L.da   HAlFo   /qd;E   MdKVt   Tf:?!
outletxbfth
  krqol   =OP\.   iV+K2   `=A>D   4se09
outletvurek
  [9'"K   tv/Wo   ,DMSB   VW#9T   &Z= - O

发表评论
切换编辑模式