主流页面编辑器比对: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: 每个页面都要初始化相对复杂,但界面简洁,取值赋值相对简单。

时间: 2024-10-05 06:43:49

主流页面编辑器比对:TinyMCE VS FCKeditor的相关文章

JSP 实用程序之简易页面编辑器

完整源码下载:http://pan.baidu.com/s/1bpkHNnp(百度云提供) 需求:提供一页面,放置"帮助"."版权"文字内容,特点:静态页面,无须读数据库,只是应付字眼上频繁的修改:没有复杂的交互,无须 JavaScript:没有图片,不需要文件上传. 给出的方案:提供一页面和简易的后台管理,功能单一,只是编辑页面(只是修改字体.大小.粗体.斜体等的功能). 实现思路:纯 JSP 展示,管理界面用 HTTP Basic 登入,通过一个 JS 写成 H

这些优秀的主流代码编辑器,你用过多少款?

这些年来,编写代码本身已经成为一种艺术.现在,有大量的编程语言可供开发者选择使用,从汇编语言到 Ruby 和 Python.尽管对于给定的项目有许多编程语言可供选择,但有一件事是亘古不变的,每个开发者都需要一个代码编辑器来写代码. 一个好的代码编辑器不仅仅是一个简单的文本编辑工具,这是发生奇迹的地方,开发者编写的代码会转化为更大的项目的可用组件.鉴于这一重要性,难怪开发者会对与他们日夜共处的代码编辑器如此挑剔.每个开发者都希望拥有一个快速.易于使用且功能均衡的代码编辑器. 每个代码编辑器都会声称

最新主流 Markdown 编辑器推荐

Markdown ,2004年由 John Gruberis 设计和开发,是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,以下将介绍目前比较流行的一些 Markdown 编辑器(排名不分先后) 目录 - MarkdownPad - BookPad - 小书匠 - Typora - Visual Studio Code - Marxico - Sublime Text 3 - Mou - Atom - Smark - Haroopad - Cut

在vue中使用tinymce富文本编辑器,解决tinymce在dialog对话框中层级太低的问题

1.安装 npm install tinymce -S 2.把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面,如下图 3.tinymce默认是英文界面,还需要下载一个中文语言包zh_CN.js https://www.tiny.cloud/get-tiny/language-packages/ 在tinymce文件夹下新建langs文件夹,将下载好的语言包放到langs文件夹下面如图  4.在main.js中引入tinymce  5

页面编辑器传值到C#后台检测到有潜在危险的 Request.Form 值

这种错误一般出现在使用富文本编辑工具,或者其他需要向服务器提交脚本的时候.这主要是由于新版的.NetFramework的安全机制决定的.新.NetFramework4.0及4.5(3.5没试过)中都不允许直接向服务器提交脚本代码. 解决方法: 1.在web.config中加入如下配置 在httpRuntime节点添加requestValidationMode="2.0" <httpRuntime targetFramework="4.5" requestVal

vue的可视化页面编辑器

https://github.com/jaweii/Vue-Layout https://github.com/L-Chris/vue-design https://github.com/fireyy/vue-page-designer https://github.com/OXOYO/X-Page-Editor-Vue https://github.com/fireyy/vue-page-designer https://github.com/lkiarest/page-designer 基于

(转)FCKeditor文本编辑器的使用方法

FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务. 它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.ASP.ColdFusion .PHP.Jsp.Active-FoxPro.Lasso.Perl.ython 等编程环境. 官方网站 http://www.fckeditor.net/ 官方文档 http://wiki.fckeditor.net/ 下载地址 http://www.fckeditor.

如何在相同的页面设置多个tinymce编辑器

如何在相同的页面设置多个tinymce编辑器 This example shows how to setup multiple editors on the same page and with different configs. 用于多功能文本框,之前同页面只能用一个tinymce编辑器,百度谷歌没结果,所以整理下代码,以供参考: <script type="text/javascript" src="./tiny_mce/tiny_mce.js">

Elementor编辑器 2018年最流行的WordPress页面构建插件

Elementor是一款非常现代的页面编辑器,作为2018年最流行的免费页面编辑插件,它改变了WordPress建站的方式,让我们可以无需代码便能自己构建网页 在本文中,我们将详细介绍Elementor及其使用方法,以帮助大家决定是否应该使用Elementor作为默认的WordPress页面构建工具 Elementor免费下载 为什么推荐使用Elementor 我曾经使用过很多款编辑器,其中,Elementor是非常优秀的一款 现代.简洁的编辑方式 免费版已经很好用 Elementor支持中文,