TinyMCE 插件

GreenCup

此示例包括大多數可用的TinyMCE插件，包括Tiny Cloud高級訂閱中可用的插件。

Javascript :

1. 
   
2. tinymce.init({
   
3.   selector: 'textarea#full-featured',
   
4.   plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker imagetools textpattern noneditable help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable',
   
5.   tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
   
6.   tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
   
7.   tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
   
8.   tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID',
   
9.   mobile: {
   
10.     plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker textpattern noneditable help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable'
    
11.   },
    
12.   menu: {
    
13.     tc: {
    
14.       title: 'TinyComments',
    
15.       items: 'addcomment showcomments deleteallconversations'
    
16.     }
    
17.   },
    
18.   menubar: 'file edit view insert format tools table tc help',
    
19.   toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
    
20.   autosave_ask_before_unload: true,
    
21.   autosave_interval: "30s",
    
22.   autosave_prefix: "{path}{query}-{id}-",
    
23.   autosave_restore_when_empty: false,
    
24.   autosave_retention: "2m",
    
25.   image_advtab: true,
    
26.   content_css: '//www.tiny.cloud/css/codepen.min.css',
    
27.   link_list: [
    
28.     { title: 'My page 1', value: 'http://www.tinymce.com' },
    
29.     { title: 'My page 2', value: 'http://www.moxiecode.com' }
    
30.   ],
    
31.   image_list: [
    
32.     { title: 'My page 1', value: 'http://www.tinymce.com' },
    
33.     { title: 'My page 2', value: 'http://www.moxiecode.com' }
    
34.   ],
    
35.   image_class_list: [
    
36.     { title: 'None', value: '' },
    
37.     { title: 'Some class', value: 'class-name' }
    
38.   ],
    
39.   importcss_append: true,
    
40.   templates: [
    
41.         { title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
    
42.     { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
    
43.     { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span>
    
44. <span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
    
45.   ],
    
46.   template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
    
47.   template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
    
48.   height: 600,
    
49.   image_caption: true,
    
50.   quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
    
51.   noneditable_noneditable_class: "mceNonEditable",
    
52.   toolbar_mode: 'sliding',
    
53.   spellchecker_whitelist: ['Ephox', 'Moxiecode'],
    
54.   tinycomments_mode: 'embedded',
    
55.   content_style: ".mymention{ color: gray; }",
    
56.   contextmenu: "link image imagetools table configurepermanentpen",
    
57.   a11y_advanced_options: true,
    
58.   /*
    
59.   The following settings require more configuration than shown here.
    
60.   For information on configuring the mentions plugin, see:
    
61.   https://www.tiny.cloud/docs/plugins/mentions/.
    
62.   */
    
63.   mentions_selector: '.mymention',
    
64.   mentions_fetch: mentions_fetch,
    
65.   mentions_menu_hover: mentions_menu_hover,
    
66.   mentions_menu_complete: mentions_menu_complete,
    
67.   mentions_select: mentions_select,
    
68. });
    
69. 
    

複製代碼

CSS :

1. 
   
2. 
   
3. textarea#mentions {
   
4.   height: 350px;
   
5. }
   
6. 
   
7. div.card,
   
8. .tox div.card {
   
9.   width: 240px;
   
10.   background: white;
    
11.   border: 1px solid #ccc;
    
12.   border-radius: 3px;
    
13.   box-shadow: 0 4px 8px 0 rgba(34, 47, 62, .1);
    
14.   padding: 8px;
    
15.   font-size: 14px;
    
16.   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    
17. }
    
18. 
    
19. div.card::after,
    
20. .tox div.card::after {
    
21.   content: "";
    
22.   clear: both;
    
23.   display: table;
    
24. }
    
25. 
    
26. div.card h1,
    
27. .tox div.card h1 {
    
28.   font-size: 14px;
    
29.   font-weight: bold;
    
30.   margin: 0 0 8px;
    
31.   padding: 0;
    
32.   line-height: normal;
    
33.   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    
34. }
    
35. 
    
36. div.card p,
    
37. .tox div.card p {
    
38.   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    
39. }
    
40. 
    
41. div.card img.avatar,
    
42. .tox div.card img.avatar {
    
43.   width: 48px;
    
44.   height: 48px;
    
45.   margin-right: 8px;
    
46.   float: left;
    
47. }
    
48. 
    

複製代碼

HTML :

1. 
   
2. <textarea id="full-featured"><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
   
3.   </p>
   
4.   <h2 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h2>
   
5.   <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.
   
6. Visit the <a href="https://www.tiny.cloud/pricing">pricing page</a> to learn more about our premium plugins.</h5>
   
7.   <p>Please try out the features provided in this full featured example.</p>
   
8. 
   
9.   <h2>Got questions or need help?</h2>
   
10.   <ul>
    
11.     <li>Our <a class="mceNonEditable" href="//www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    
12.     <li>Have a specific question? Visit the <a class="mceNonEditable" href="https://community.tiny.cloud/forum/">Community Forum</a>.</li>
    
13.     <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium subscriptions</a>.</li>
    
14.   </ul>
    
15. 
    
16.   <h2>A simple table to play with</h2>
    
17.   <table style="text-align: center;border-collapse: collapse; width: 100%;">
    
18.     <thead>
    
19.       <tr>
    
20.         <th>Product</th>
    
21.         <th>Cost</th>
    
22.         <th>Really?</th>
    
23.       </tr>
    
24.     </thead>
    
25.     <tbody>
    
26.       <tr>
    
27.         <td>TinyMCE Cloud</td>
    
28.         <td>Get started for free</td>
    
29.         <td>YES!</td>
    
30.       </tr>
    
31.       <tr>
    
32.         <td>Plupload</td>
    
33.         <td>Free</td>
    
34.         <td>YES!</td>
    
35.       </tr>
    
36.     </tbody>
    
37.   </table>
    
38. 
    
39.   <h2>Found a bug?</h2>
    
40.   <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
    
41. 
    
42.   <h2>Finally ...</h2>
    
43.   <p>Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
    
44.   <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
    
45. All the best from the TinyMCE team.</p>
    
46. </textarea>
    
47. 
    
48. 
    

複製代碼