最近项目中用到了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. jquery easyui datagrid实现单行的上移下移，以及保存移动的结果

    1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...

  2. redis sentinels哨兵集群环境配置

    # Redis configuration file example. # # Note that in order to read the configuration file, Redis mus ...

  3. Android跑指定包Monkey脚本

    Android跑指定包Monkey脚本 adb shell monkey –p com.android.mms --throttle 1000 -v -v -v -s 1 --ignore-secur ...

  4. DB索引、索引覆盖、索引优化

    ###########索引########### @see   http://mp.weixin.qq.com/s/4W4iVOZHdMglk0F_Ikao7A 聚集索引(clustered inde ...

  5. Elastic-Job原理分析（version:2.1.4）

    当当的Elastic-Job开源出了两种分布式Job的解决方案:1. elastic-job-lite,这是一个无中心节点的调度: Elastic-Job-Lite定位为轻量级无中心化解决方案,使用j ...

  6. html+jquery制作网页地图

    http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...

  7. 【django】Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

    问题描述:启动django服务时出现“Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试.”的错误 问题原因:8000端口被占用了 解决办法:默认启动的 ...

  8. ubuntu 上安装vnc server

    Ubuntu下设置VNCServer   Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作 ...

  9. Maven构建Web项目

    1. Maven的作用: [清理项目]→[编译项目]→[测试项目]→[生成测试报告]→[打包项目]→[部署项目] 2. 安装maven maven对JDK版本有要求,所以要设置好JDK的环境变量. M ...

  10. Spring系列之访问数据库

    一.概述 Spring的数据访问层是以统一的数据访问异常层体系为核心,结合JDBC API的最佳实践和统一集成各种ORM方案,完成Java平台的数据访问. 二.JDBC API的最佳实践 Spring ...