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