最近项目中用到了javascript富文本编辑器，从网上找开源控件，发现很多可选，参考下面文章，列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html 。

　　通过对比，最终选择TinyMCE，界面比较美观，使用和操作也简单，下面做一个记录。

　　TinyMCE是一个开源，纯JavaScript HTML WYSIWYG编辑器。它能够把HTML TEXTAREA或其它HTML标签转换成Rich编辑器。TinyMCE非常易于集成到其它内容管理系统中。可以通过外观/主题和插件来定制满足自己需求的编辑器。提供汉化语言包。多浏览器支持：Mozilla、MSIE、FireFox、Opera和Safari。此外你还可以很方便地使用Ajax来保存和加载内容。

　　效果图：

　　

　　下载地址：

　　http://www.tinymce.com/download/download.php

　　demo地址：

　　http://www.tinymce.com/tryit/full.php

ps:

　　在源文件包中没有demo中可直接显示效果的html页面，只有脚本库和样式等，需要用户自行创建html页面，tinymce的使用方法很简单，相信看过了下面几个例子马上就可以着手使用了！

eg1.快速启动

菜单条

　　

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

---------------------------------------------------------------------

继续正题...

　

代码

<DOCTYPE html>

<html>

<head>　　

　　<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

　　<script type="text/javascript" src="tinymce.min.js"></script>

　　<script type="text/javascript">

　　　　tinymce.init({

    　　　　selector: "textarea"

　　　　});

　　</script>

</head>

<body>

　　<form method="post" action="somepage">

    　　<textarea name="content" style="width:100%"></textarea>

　　</form>

</body>

</html>

eg2.Full featured

菜单条

　　

代码

<DOCTYPE html>

<html>

<head>

　　<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

　　<script type="text/javascript" src="tinymce.min.js"></script>

　　<script type="text/javascript">

　　　　tinymce.init({

    　　　　selector: "textarea",

    　　　　theme: "modern",

    　　　　plugins: [

        　　　　"advlist autolink lists link image charmap print preview hr anchor pagebreak",

        　　　　"searchreplace wordcount visualblocks visualchars code fullscreen",

        　　　　"insertdatetime media nonbreaking save table contextmenu directionality",

        　　　　"emoticons template paste textcolor moxiemanager"

    　　　　],

    　　　　toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",

    　　　　toolbar2: "print preview media | forecolor backcolor emoticons",

    　　　　image_advtab: true,

    　　　　templates: [

        　　　　{title: 'Test template 1', content: 'Test 1'},

        　　　　{title: 'Test template 2', content: 'Test 2'}

    　　　　]

　　　　});

　　</script>

</head>

<body>　　

<form method="post" action="somepage">

    <textarea name="content" style="width:100%"></textarea>

</form>

</body>

</html>

ps: 在init方法中配置参数，来确定编辑器的功能！

店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

富文本编辑器TinyMCE的更多相关文章

  1. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  2. 富文本编辑器 tinymce 的安装与使用

    百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...

  3. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  4. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  5. 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件wordpaster

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  6. 富文本编辑器TInyMCE,本地图片上传（Image Upload）

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  7. Java开发之富文本编辑器TinyMCE

    一.题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就 ...

  8. 富文本编辑器Tinymce的示例和配置

    Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...

  9. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

随机推荐

  1. 对转换公式为LaTeX代码要注意什么

    mathtype是一款专业的数学公式编辑工具,理科生专用的工具.mathtype公式编辑器能够帮助用户在各种文档中插入复杂的数学公式和符号.可以轻松的将数学公式转换成LaTex代码,但是转换LaTeX ...

  2. in语句导致查询很慢

    1.表A,表B,表C.其中A中的主键是B的外键,一对多的关系:B的主键是C的外键,一对多的关系.最终想查出所有符合条件的C. 原因:开发人员将A表数据先查出来,放到list中,然后用list作为in的 ...

  3. Visual Code 调用Chrome 浏览HTML

    Code 使用快捷键:Ctrl+Shit+B 然后再Task.json,替换以下: { "version": "0.1.0", "command&qu ...

  4. Get started with ros -- 1

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ 一.Introduction: 机器人操作系统(ROS)是使机器人系统的不同部分能够发 ...

  5. highcharts图表中级入门：非histock图表的highcharts图表如何让图表产生滚动条

    最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来.这 ...

  6. 在oracle配置mysql数据库的dblink

    本文介绍如何在oracle配置mysql数据库的dblink:虽然dblink使用很占资源:俗称“性能杀手”.但有些场景不得不使用它.例如公司使用数据库是oracle:可能其他部门或者CP合作公司使用 ...

  7. postgres外部表之-oracle_fdw

    1. 安装Oracle客户端工具 编译安装oracle_fdw之前,需要安装Oracle的客户端程序:步骤略 下载地址:http://www.oracle.com/technetwork/databa ...

  8. HttpClient（四）-- 使用代理IP 和 超时设置

    1.代理IP的用处: 在爬取网页的时候,有的目标站点有反爬虫机制,对于频繁访问站点以及规则性访问站点的行为,会采集屏蔽IP措施.这时候,就可以使用代理IP,屏蔽一个就换一个IP. 2.代理IP分类: ...

  9. java serialize 浅谈

    对象的串行化(Serialization) 一.串行化的概念和目的 1.什么是串行化 对象的寿命通常随着生成该对象的程序的终止而终止.有时候,可能需要将对象的状态保存下来,在需要时再将对象恢复.我们把 ...

  10. Unity Animation需要Inspector右键打开Debug模式，然后勾选Legacy，最后再Inspector右键打开Normal