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
11 <!DOCTYPE HTML> 2 2 <html lang="en-US"> 3 3 4 4 <head> 5 5 <script type="text/javascript" src="tinymce.min.js"></script> 6 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 7 7 <script> 8 8 tinymce.init({ 9 9 selector:"h1.editable#elm2", //elm2为ID 可将selector值理解为css中class、ID等，以此使用tinymce中样式（比如编辑框内文本显示样式、工具栏样式）--个人理解，不保证正确 1010 inline:true, //为true时，编辑工具栏隐藏 1111 toolbar:"undo redo", 1212 menubar: false 1313 }); 1414 tinymce.init({ 1515 selector:'textarea#elm1', //<textarea>中为编辑区域 1616 theme: "modern", //主题 1717 language: "zh_cn", //语言 ，可自行下载中文 1818 1919 height: 300, 2020 plugins: [ //插件，可自行根据现实内容删除 2121 "advlist autolink lists charmap print preview hr anchor pagebreak spellchecker", 2222 "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking", 2323 "save table contextmenu directionality emoticons paste textcolor" 2424 ], 2525 content_css: "css/content.css", //引用的外部CSS样式，可删除 2626 toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l | print preview fullpage | forecolor backcolor", //工具栏，可根据需求删除 2727 style_formats: [ //初始时提供的默认格式 2828 {title: 'Bold text', inline: 'b'}, 2929 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 3030 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 3131 {title: 'Example 1', inline: 'span', classes: 'example1'}, 3232 {title: 'Example 2', inline: 'span', classes: 'example2'}, 3333 {title: 'Table styles'}, 3434 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 3535 ] 3636 }); 3737 </script> 3838 </head> 3939 <body> 4040 <b>Title</b> 4141 <br> 4242 <div class="activityshow_box" style= "margin-top:40%;width: 100%;display:none;margin-let:15%;margin-right:15%;padding:0;margin:2px 0;"> 4343 </div> 4444 4545 <h1 class="editable" id="elm2">这是标题，编辑工具栏隐藏</h1> 4646 <textarea id="elm1">文本内容哈</textarea> <!-- 编辑框 elm1为此部件ID--> 4747 <input type="button" onclick= "doy()"/> 4848 4949 </body> 5050 <script> 5151 function doy(){ 5252 var tmp= tinymce.get('elm1').getContent(); //此函数可获得编辑框内容 5353 var tmp2=tinymce.get('elm2').getContent(); 5454 $('textarea').hide() 5555 $('.activityshow_box').show(); 5656 $('.activityshow_box').append(tmp); 5757 tinymce.activeEditor.setContent("<p style='color:red;'>这只是个测试</p>"); //设置编辑框内容 Jquery.text('内容')方法也可以达到设置编辑框内容目的 5858 alert(tmp); 5959 alert(tmp2); 6060 } 6161 </script> 6262 </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
11 tinymce.init({ 2 2 selector:'textarea#elm1', 3 3 language: "zh_CN", 4 4 height: 400, 5 5 skin_url: "/Content/tinymce", //定义外部皮肤样式，原文件中skins-lightgray/下文档内容要照搬，包含CSS以及fonts/(fronts该文件名和内容不可缺少) 6 6 font_formats: "Andale Mono=andale mono,times;"+ //此处为初始默认字体样式，可不写 7 7 "Arial=arial,helvetica,sans-serif;"+ 8 8 "Arial Black=arial black,avant garde;"+ 9 9 "Book Antiqua=book antiqua,palatino;"+ 1010 "Comic Sans MS=comic sans ms,sans-serif;"+ 1111 "Courier New=courier new,courier;"+ 1212 "Georgia=georgia,palatino;"+ 1313 "Helvetica=helvetica;"+ 1414 "Impact=impact,chicago;"+ 1515 "Symbol=symbol;"+ 1616 "Tahoma=tahoma,arial,helvetica,sans-serif;"+ 1717 "Terminal=terminal,monaco;"+ 1818 "Times New Roman=times new roman,times;"+ 1919 "Trebuchet MS=trebuchet ms,geneva;"+ 2020 "Verdana=verdana,geneva;"+ 2121 "Webdings=webdings;"+ 2222 "Wingdings=wingdings,zapf dingbats", //定义字体，可加入“黑体=黑体”+“幼圆=幼圆”。。。，将中文转换为Unicode编码，如“\u5b8b\u4f53=\u5b8b\u4f53;” http://blog.javawind.net/tools/native2ascii.jsp?action=transform 2323 plugins: [ 2424 "advlist autolink lists print preview hr", 2525 "searchreplace wordcount fullscreen insertdatetime ", 2626 "save table contextmenu directionality paste textcolor" 2727 ], 2828 toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | print preview fullpage | forecolor backcolor", 2929 style_formats: [ 3030 {title: 'Bold text', inline: 'b'}, 3131 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 3232 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 3333 {title: 'Example 1', inline: 'span', classes: 'example1'}, 3434 {title: 'Example 2', inline: 'span', classes: 'example2'}, 3535 {title: 'Table styles'}, 3636 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 3737 ] 3838 });
5. 未涉及图片上传等功能，但是可自行参考功能文档
6.预览功能其实是用<iframe>实现，src来源为src="data:text/html,....",省略号部分为整体网页HTML代码UTF8编码后内容，可F12查看tinymce预览功能显示的源码，不推荐不编码直接显示内容。
-------------------------------------------- 2015/03/25 新增 --------------------------------------------
7. 模板功能