TinyMce 使用初探

Easter79
• 阅读 517

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

TinyMce 使用初探

TinyMce 使用初探

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>

TinyMce 使用初探

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

TinyMce 使用初探

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 });

TinyMce 使用初探

5. 未涉及图片上传等功能,但是可自行参考功能文档

6.预览功能其实是用