开发中先用的是 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的更多相关文章

  1. 最新主流 Markdown 编辑器推荐

    Markdown ,2004年由 John Gruberis 设计和开发,是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,以下将介绍目前比较流行的一 ...

  2. 移动端H5页面编辑器开发实战--原理结构篇

    很久前的写的文章了,转载下发到这里 原文地址: https://blog.csdn.net/tech_meizu/article/details/52288797

  3. 移动端H5页面编辑器开发实战--经验技巧篇

    很久前的写的文章了,转载下发到这里 原本地址: https://blog.csdn.net/tech_meizu/article/details/52484775

  4. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  5. FCKeditor文本编辑器的使用方法

    FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务. 它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.A ...

  6. 在线富文本编辑器FckEditor配置(.Net Framework 3.5)

    进入FCKeditor文件夹,编辑 fckconfig.js 文件.1.上传设置  .  var _FileBrowserLanguage         = 'php' ;         // a ...

  7. Flask博客开发——Tinymce编辑器

    之前Flask博客的文本编辑器比较简陋,这里为博客添加个优雅易用的Tinymce文本编辑器. 1.项目中添加Tinymce 下载好Tinymce包以及语言包,并添加到项目中.添加到项目的方法,参考了这 ...

  8. FCKeditor编辑器第一次点击总是报错(上传图片) 之后就好了

    错误:   Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. FCKeditor编辑器第一次点击总是报错(上 ...

  9. asp.net文本编辑器FCKeditor使用方法详解

    文本编辑器的使用: 1.FCKeditor的官方网站是:http://www.fckeditor.net/download  目前最新的FCKeditor.Net_2.6.9版本. 请在此页下载:ht ...

随机推荐

  1. guoshiyv 数据结构与算法2-1 线性链式存储

    线性链式存储:   包含两部分:1.存储的单个元素 2.指针,指向下一个的地址 typedef struct() { ElementType Data; struct Node *Next; }Lis ...

  2. View Components as Tag Helpers,离在线模板编辑又进一步

    在asp.net core mvc中增加了ViewComponent(视图组件)的概念,视图组件有点类似部分视图,但是比部分视图功能更加强大,它更有点像一个控制器. 使用方法 1,定义类派生自View ...

  3. python制作pdf电子书

    python制作pdf电子书 准备 制作电子书使用的是python的pdfkit这个库,pdfkit是 wkhtmltopdf 的Python封装包,因此在安装这个之前要安装wkhtmltopdf 安 ...

  4. 百度地图 js api 实现 line 居中显示

    项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...

  5. sqlserver isnull判断

    --在新增或编辑的时候设置默认值或加isnull判断 Sql isnull函数 ISNULL(columName, 0)<>35 或 ISNULL(columName, '')<&g ...

  6. System.Runtime.Serialization.SerializationException”类型的未经处理的异常在 System.Runtime.Serialization.dll 中发生

    异常信息: “System.Runtime.Serialization.SerializationException”类型的未经处理的异常在 System.Runtime.Serialization. ...

  7. 【LeetCode】309. Best Time to Buy and Sell Stock with Cooldown

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  8. pouchdb-find( pouchdb查询扩展插件 ,便于查询)

    pouchdb-find pouchdb-find 环境搭建 下载lib bower install pouchdb-find 引入js <script src="pouchdb.js ...

  9. 弹出浮层css+JQuery

    先来张效果图: HTML代码如下: <body> <div class="bg" id="bg" style="display: n ...

  10. 从.src.rpm包中提取出完整的源码的方法

    1 什么是完整的源码 就是说,最初始的源码加上打了所有的patch后的源码,即最新的源码. 2 过程 2.1 从.src.rpm中提取完整的rpm工程文件 2.1.1 rpm to cpio rpm2 ...