TinyMce 使用初探
https://www.cnblogs.com/nkxyf/p/3883586.html
参考：http://www.tinymce.com/ 官网
http://www.tinymce.com/wiki.php wiki 尤其第二项Configuration尤为有用
http://blog.csdn.net/chenloveyue/article/details/7039913 相关配置文件中文注释
版本： TinyMce 4.X
1. 安装
下载解压缩即可
2. Demo
1 <!DOCTYPE HTML>
2 <html lang="en-US">
3
4 <head>
5 <script type="text/javascript" src="tinymce.min.js"></script>
6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
7 <script>
8 tinymce.init({
9 selector:"h1.editable#elm2", //elm2为ID 可将selector值理解为css中class、ID等，以此使用tinymce中样式（比如编辑框内文本显示样式、工具栏样式）--个人理解，不保证正确
10 inline:true, //为true时，编辑工具栏隐藏
11 toolbar:"undo redo",
12 menubar: false
13 });
14 tinymce.init({
15 selector:'textarea#elm1', //<textarea>中为编辑区域
16 theme: "modern", //主题
17 language: "zh_cn", //语言 ，可自行下载中文
18
19 height: 300,
20 plugins: [ //插件，可自行根据现实内容删除
21 "advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
22 "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
23 "save table contextmenu directionality emoticons paste textcolor"
24 ],
25 content_css: "css/content.css", //引用的外部CSS样式，可删除
26 toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l | print preview fullpage | forecolor backcolor", //工具栏，可根据需求删除
27 style_formats: [ //初始时提供的默认格式
28 {title: 'Bold text', inline: 'b'},
29 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
30 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
31 {title: 'Example 1', inline: 'span', classes: 'example1'},
32 {title: 'Example 2', inline: 'span', classes: 'example2'},
33 {title: 'Table styles'},
34 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
35 ]
36 });
37 </script>
38 </head>
39 <body>
40 <b>Title</b>
41 <br>
42 <div class="activityshow_box" style= "margin-top:40%;width: 100%;display:none;margin-let:15%;margin-right:15%;padding:0;margin:2px 0;">
43 </div>
44
45 <h1 class="editable" id="elm2">这是标题，编辑工具栏隐藏</h1>
46 <textarea id="elm1">文本内容哈</textarea> <!-- 编辑框 elm1为此部件ID-->
47 <input type="button" onclick= "doy()"/>
48
49 </body>
50 <script>
51 function doy(){
52 var tmp= tinymce.get('elm1').getContent(); //此函数可获得编辑框内容
53 var tmp2=tinymce.get('elm2').getContent();
54 $('textarea').hide()
55 $('.activityshow_box').show();
56 $('.activityshow_box').append(tmp);
57 tinymce.activeEditor.setContent("<p style='color:red;'>这只是个测试</p>"); //设置编辑框内容 Jquery.text('内容')方法也可以达到设置编辑框内容目的
58 alert(tmp);
59 alert(tmp2);
60 }
61 </script>
62 </html>
3. 读取编辑框内容、设定编辑框内容
参考： http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.setContent
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
4. 针对自定义部署tinymce （CSS、js脚本非同一文档）
强烈建议参考：http://www.tinymce.com/wiki.php/Configuration
1 tinymce.init({
2 selector:'textarea#elm1',
3 language: "zh_CN",
4 height: 400,
5 skin_url: "/Content/tinymce", //定义外部皮肤样式，原文件中skins-lightgray/下文档内容要照搬，包含CSS以及fonts/(fronts该文件名和内容不可缺少)
6 font_formats: "Andale Mono=andale mono,times;"+ //此处为初始默认字体样式，可不写
7 "Arial=arial,helvetica,sans-serif;"+
8 "Arial Black=arial black,avant garde;"+
9 "Book Antiqua=book antiqua,palatino;"+
10 "Comic Sans MS=comic sans ms,sans-serif;"+
11 "Courier New=courier new,courier;"+
12 "Georgia=georgia,palatino;"+
13 "Helvetica=helvetica;"+
14 "Impact=impact,chicago;"+
15 "Symbol=symbol;"+
16 "Tahoma=tahoma,arial,helvetica,sans-serif;"+
17 "Terminal=terminal,monaco;"+
18 "Times New Roman=times new roman,times;"+
19 "Trebuchet MS=trebuchet ms,geneva;"+
20 "Verdana=verdana,geneva;"+
21 "Webdings=webdings;"+
22 "Wingdings=wingdings,zapf dingbats",
//定义字体，可加入“黑体=黑体”+“幼圆=幼圆”。。。，将中文转换为Unicode编码，如“\u5b8b\u4f53=\u5b8b\u4f53;” http://blog.javawind.net/tools/native2ascii.jsp?action=transform
23 plugins: [
24 "advlist autolink lists print preview hr",
25 "searchreplace wordcount fullscreen insertdatetime ",
26 "save table contextmenu directionality paste textcolor"
27 ],
28 toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | print preview fullpage | forecolor backcolor",
29 style_formats: [
30 {title: 'Bold text', inline: 'b'},
31 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
32 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
33 {title: 'Example 1', inline: 'span', classes: 'example1'},
34 {title: 'Example 2', inline: 'span', classes: 'example2'},
35 {title: 'Table styles'},
36 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
37 ]
38 });
5. 未涉及图片上传等功能，但是可自行参考功能文档
6.预览功能其实是用<iframe>实现，src来源为src="data:text/html,....",省略号部分为整体网页HTML代码UTF8编码后内容，可F12查看tinymce预览功能显示的源码，不推荐不编码直接显示内容。
-------------------------------------------- 2015/03/25 新增 --------------------------------------------
7. 模板功能
参考：http://www.tinymce.com/wiki.php/Plugin:template
TinyMce 使用初探的更多相关文章
- TinyMCE在线编辑器使用方法初探
首先,下载TinyMCE包,地址:http://www.tinymce.com/ 然后将下载后的包解压,放置到一个文件夹下,创建一个html文件,并在其中书写如下代码: <!DOCTYPE ht ...
- JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）
开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...
- 初探领域驱动设计（2）Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- .NET文件并发与RabbitMQ（初探RabbitMQ）
本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...
- TinyMCE的使用（包括汉化及本地图片上传功能）
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- 微信公众号中ip白名单用谁的ip
https://segmentfault.com/q/1010000010201211 白名单怎么说 我该填写谁的 我的ip地址每天都变化的 服务器ip啊,为了防止未授权的代码盗用你的权限.写你ip是 ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 新手数据比赛中数据处理方法小结（python）
第一次参加,天池大数据竞赛(血糖预测),初赛排名1%.因为自己对python不熟悉,所以记录一下在比赛中用到的一些python方法的使用(比较基础细节,大佬绕道): 1.数据初探 data.info( ...
- flask + Python3 实现的的API自动化测试平台---- IAPTest接口测试平台（总结感悟篇）
前言: 在前进中去发现自己的不足,在学习中去丰富自己的能力,在放弃时想想自己最初的目的,在困难面前想想怎么踏过去.在不断成长中去磨炼自己. 正文: 时间轴 flask + Python3 实现的的AP ...
- springboot之fastjson
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifac ...
- python_变量
python中一切皆对象 什么是变量.变量名? --变量是存放数据的容器,变量名是区分容器的名字 例如 : a = 7,a就是变量的名字,叫a名字指向那个容器存放了数字 7 变量有什么形式? 变量 ...
- CentOS之7与6的区别
前言 centos7与6之间最大的差别就是初始化技术的不同,7采用的初始化技术是Systemd,并行的运行方式,除了这一点之外,服务启动.开机启动文件.网络命令方面等等,都说6有所不同.让我们先来了解 ...
- H3c交换机配置端口镜像详情
端口镜像 需要将G0/0/1口的全部流量镜像到G0/0/2口,即G0/0/1为源端口,G0/0/2为目的端口. 配置步骤 1.进入配置模式:system-view: 2.创建本地镜像组:mirrori ...
- C++复制、压缩文件夹
之前写过一篇用zlib库来压缩的,但zlib只能压缩文件,我需要压缩文件夹,要想压缩文件夹还得利用zlib库自己写代码,我是真的服了,一个开源库这么不好用. C++复制文件夹也是麻烦事,网上这篇文章: ...
- MySql-5.7.17-20解压缩版安装配置
MySql-5.7.XXX解压缩版安装配置 1.mysql-5.7.20是解压版免安装的,版本下载地址:http://dev.mysql.com/downloads/mysql/ 如下图 2.解压 ...