最近项目中用到了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. Android: 背景图片平铺要这么干

    <?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="htt ...

  2. 阿里云提出的漏洞（Phpcms V9某处逻辑问题导致getshell漏洞解决方法）的问题

    最近从阿里云云盾检测流出来的,相比使用阿里云服务器的朋友已经收到漏洞提醒:Phpcms V9某处逻辑问题导致getshell漏洞解决方法,这个漏洞怎么办呢?CMSYOU在这里找到针对性解决办法分享给大 ...

  3. 带有logo的二维码

    摘要: 前面介绍了使用javascript生成二维码,但是这样并不能满足我们的需求,我们有时也会看到带有logo的二维码,本文就介绍如何生成带有logo的二维码. 简介: 主要使用了svg的文本和图像 ...

  4. iOS 开发，工程中混合使用 ARC 和非ARC(转)

    [前提知识] ARC:Automatic Reference Counting,自动引用计数 在开发 iOS 3 以及之前的版本的项目时我们要自己负责使用引用计数来管理内存,比如要手动 retain. ...

  5. vs2012修复问题

    多装了一个.net framework4.5.1结果vs不能拥,借用了下面这个工具将vs2012从注册表中删除了 就能重装了 http://www.auslogics.com/en/software/ ...

  6. iOS 解决UIScrollView布局问题（布局受statusBar和NavigationBar影响）

    iOS APP中有一个非常好用的功能,那就是当我们在滚动一个UIScrollView滚动了很远很远的时候,假如我们想让UIScrollView回到顶部,我们绝大多数人的做法就是慢慢慢慢的滚动UIScr ...

  7. Mac 使用 launchctl 定时运行程序(转载)

    摘要: 在linux下可以用crontab来定时执行任务,在mac下可以用launchctl来定时执行任务. 在linux下可以用crontab来定时执行任务,在MAC下可以用launchctl来定时 ...

  8. iOS开发--提交应用Your binary is not optimized for iPhone 5

    ERROR ITMS-: "Your binary is not optimized for iPhone 5 - New iPhone apps and app updates submi ...

  9. Nginx（十）-- 进程模型及工作原理

    1.nginx进程模型 Nginx是一个master和worker的模型.master主要用来管理worker进程,master就比作老板,worker就是打工仔,master指挥worker来做事情 ...

  10. 【LeetCode OJ】Longest Substring Without Repeating Characters

    题目链接:https://leetcode.com/problems/longest-substring-without-repeating-characters/ 题目:Given a string ...