主流页面编辑器比对:TinyMCE VS FCKeditor

Posted 林诺欧巴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了主流页面编辑器比对:TinyMCE VS FCKeditor相关的知识,希望对你有一定的参考价值。

 

 

  开发中先用的是 FCKeditor 编辑器,感觉页面展示的东西太繁琐,所以换了 TinyMCE 编辑器。 为了方便理解,本文不采用穿插比对

    

    先看 FCKeditor :

    1、jsp :结束标签不能贴着开始标签

  <fck:editor id="content" basePath="${ctx}/scripts/fckeditor/" skinPath="skins/office2003/">                                                 
   </fck:editor>

    

    2、js 取值、赋值

//取值 - id
var oEditor = FCKeditorAPI.GetInstance("content");  
var content = $.trim(oEditor.GetXhtml(true));

//赋值 - id
var oEditor = FCKeditorAPI.GetInstance("content") ;                          
oEditor.SetHTML("值") ;

     

    3、页面

 

    再看 TinyMCE:

    1、tinyMCE 在页面需要初始化

      tinymce.init({
           selector: "textarea",  //填充 textarea 标签
           upload_image_url: \'${ctx}/uploadTinyMcePic\', //配置的上传图片的路由(servlet 配置)
           height: 300,
           language:\'zh_CN\',
           plugins: [
             \'advlist autolink lists link  charmap print preview hr anchor pagebreak\',
             \'searchreplace wordcount visualblocks visualchars code fullscreen\',
             \'insertdatetime media nonbreaking save table contextmenu directionality\',
             \'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage fontselect\'
           ],
           toolbar1: \'undo redo | insert | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image\',
           toolbar2: \'print preview media uploadimage | removeformat fontselect forecolor backcolor fontsizeselect emoticons | codesample help\',
           image_advtab: true,
           templates: [
             { title: \'Test template 1\', content: \'Test 1\' },
             { title: \'Test template 2\', content: \'Test 2\' }
           ],
           menubar: false
       });

    PS:当页面有多个textarea 标签是,需要填充指定标签则 将 selector: "textarea" 改为:

mode : "exact",//用特定的模式
elements : "textareaEdit",//容器的id值,将来要在页面中替换的 textarea

 

    2、TinyMCE 取值、赋值:

//取值
var content = tinyMCE.activeEditor.getContent();

//赋值 - id
tinyMCE.get("content").setContent("值");

 

    3、页面

 

 

由上可知:

  FCKeditor:配置简单,但界面繁杂,取值赋值相对复杂。

  TinyMCE: 每个页面都要初始化相对复杂,但界面简洁,取值赋值相对简单。

以上是关于主流页面编辑器比对:TinyMCE VS FCKeditor的主要内容,如果未能解决你的问题,请参考以下文章

用mvc框架中页面 用的 Jquery,在使用dialog是 使用 TinyMce的 图片上传以及富文本编辑器,

tinymce 富文本编辑器 编写资料

如何滚动到tinymce编辑器的顶部?

ASP.net中的TinyMCE-如何提取HTML?

php 在Wordpress帖子编辑器页面添加第二个TinyMCE编辑器。第二个编辑器看起来和功能完全像原始的编辑器一样

在 wordpress tinymce 编辑器中更改简码外观