最近项目中用到了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. (IRCNN)Learning Deep CNN Denoiser Prior for Image Restoration-Kai Zhang

    学习深度CNN去噪先验用于图像恢复(Learning Deep CNN Denoiser Prior for Image Restoration)-Kai Zhang 代码:https://githu ...

  2. Spring3+mybatis3在多数据源情况下找不到数据库驱动的问题

    解决问题的过程如下: 1.遇到问题和一般的解决方法和下面这个帖子的一样: http://www.oschina.net/question/188964_32305 2.我在按照1的做法配置了以后,依然 ...

  3. 临时解决Apache服务器假死的参数配置

    <IfModule mpm_prefork_module> StartServers MinSpareServers MaxSpareServers MaxClients MaxReque ...

  4. 更改mysql的加密方式和密码策略

    -- 修改密码为用不过期 mysql> ALTER USER 'root'@'%' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER; Query O ...

  5. eclipse 生成webservice 客户端

    一.eclipse 自动生成的web客户端代码 调用客户端

  6. selenium chrome登陆手机 pc淘宝

    接口登录淘宝,困难度极高,没有人已经实现过. 淘宝登录selenium 手机版  pc版. 由于每天需要使用ip代理大批量的异地登录淘宝帐号,这种情况必然会出现淘宝滑动验证码,使用ActionChai ...

  7. SPOJ QTREE5 lct

    题目链接 对于每一个节点,记录这个节点所在链的信息: ls:(链的上端点)距离链内部近期的白点距离 rs:(链的下端点)距离链内部近期的白点距离 注意以上都是实边 虚边的信息用一个set维护. set ...

  8. 线程同步 –AutoResetEvent和ManualResetEvent

    上一篇介绍了通过lock关键字和Monitor类型进行线程同步,本篇中就介绍一下通过同步句柄进行线程同步. 在Windows系统中,可以使用内核对象进行线程同步,内核对象由系统创建并维护.内核对象为内 ...

  9. jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  10. Maven发布war包到Tomcat

    一.修改Tomcat下配置文件tomcat-users.xml,然后启动 <role rolename="manager-gui"/> <role rolenam ...