最近项目中用到了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. CorelDRAW中关于锁定与解锁对象的操作

    在编辑复制的图形时,有时为了避免对象受到操作的影响,可以使用“锁定与解锁对象”功能键对已经编辑好的对象进行锁定.被锁定的对象将不能进行任何编辑操作,本教程将详解CorelDRAW中关于锁定与解锁对象的 ...

  2. Js页面刷新前提示-jquery页面刷新事件

    //原理很简单,就是在body的onbeforeunload事件绑定函数,代码如下: document.body.onbeforeunload = function (event) { var c = ...

  3. 8 -- 深入使用Spring -- 3...1 Resource实现类FileSystemResource

    8.3.1 Resource实现类------FileSystemResource:访问文件系统的资源的实现类 3.访问文件系统资源 Spring提供的FileSystemResource类用于访问文 ...

  4. centos 上不了网了

    昨天还用的好好的,今天就上不了网了,郁闷,不过,正好是一次学习linux网络配置的好机会,这会已经把它折腾好了,此文就是在linux下面的浏览器中写的! 先检查一下虚拟机中的网络设置是否正常,由于我的 ...

  5. tomcat运行模式APR安装

    centos6.2下,Tomcat运行模式apr安装过程,如下: 一.安装apr [root@vmT227-m5 /]# cd /usr/local/ [root@vmT227-m5 local]# ...

  6. 【Cesium】物体显示

    viewer.zoomTo(entity1); viewer.zoomTo(viewer.entities); viewer.camera.flyTo({ destination: Cesium.Ca ...

  7. django学习笔记:AdminSite界面配置

    (一)重定义字段顺序: 修改对应应用目录下的admin.py class PollAdmin(admin.ModelAdmin):     fields = ['pub_date', 'questio ...

  8. Selenium 基本用法

    如下,使用 Selenium 打开淘宝首页并获取页面源代码: from selenium import webdriver browser = webdriver.Chrome() # 声明一个浏览器 ...

  9. Ubuntu输入法切换问题

    不知道改了个什么东西,Ubuntu 15.04 中Ctrl+Space不能切换输入法了,因此不能输入英文,shell就更是没法工作,在设置里面找了好久,“文本输入”/“语言支持”/“键盘”里面都没找到 ...

  10. 《Mysql 入门很简单》（读后感②）

    接上篇~ 1.UNIX时间戳函数: UNIX_TIMESTAMP()函数以UNIX时间戳的形式返回当前时间: UNIX_TIMESTAMP(d)函数将时间d以UNIX时间戳的形式返回: FROM_UN ...