| 1 | <!DOCTYPE html> |
|---|
| 2 | |
|---|
| 3 | <html> |
|---|
| 4 | |
|---|
| 5 | <head> |
|---|
| 6 | <title>test1</title> |
|---|
| 7 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> |
|---|
| 8 | <script src="../../ckeditor.js"></script> |
|---|
| 9 | </head> |
|---|
| 10 | <body> |
|---|
| 11 | |
|---|
| 12 | <textarea id="editor"> |
|---|
| 13 | <div class="tagSpecialClass">{{birthYear}}</div> |
|---|
| 14 | <p>Some text.</p> |
|---|
| 15 | <p>And there's the widget</p> |
|---|
| 16 | <div class="tagSpecialClass">{{birthYear}}</div> |
|---|
| 17 | <p>Some text.</p> |
|---|
| 18 | <div class="tagSpecialClass">{{birthYear}}</div> |
|---|
| 19 | </textarea> |
|---|
| 20 | |
|---|
| 21 | <script> |
|---|
| 22 | // Some CSS for the widget to make it more visible. |
|---|
| 23 | CKEDITOR.addCss( '.tagSpecialClass { background: green; padding: 3px; color: #fff } ' ); |
|---|
| 24 | |
|---|
| 25 | CKEDITOR.replace( 'editor', { |
|---|
| 26 | // A clean-up in the toolbar to focus on essentials. |
|---|
| 27 | toolbarGroups: [ |
|---|
| 28 | { name: 'document', groups: [ 'mode' ] }, |
|---|
| 29 | { name: 'basicstyles' }, |
|---|
| 30 | { name: 'insert' } |
|---|
| 31 | ], |
|---|
| 32 | removeButtons: 'Image,Table', |
|---|
| 33 | extraPlugins: 'widget', |
|---|
| 34 | on: { |
|---|
| 35 | pluginsLoaded: function() { |
|---|
| 36 | var editor = this; |
|---|
| 37 | |
|---|
| 38 | // Define a new widget. This should be done in a separate plugin |
|---|
| 39 | // to keep things clear and maintainable. |
|---|
| 40 | editor.widgets.add( 'sampleWidget', { |
|---|
| 41 | // This will be inserted into the editor if the button is clicked. |
|---|
| 42 | template: '<div class="tagSpecialClass">23</div>', |
|---|
| 43 | |
|---|
| 44 | // A rule for ACF, which permits span.tagSpecialClass in this editor. |
|---|
| 45 | allowedContent: 'div(tagSpecialClass)', |
|---|
| 46 | |
|---|
| 47 | // When editor is initialized, this function will be called |
|---|
| 48 | // for every single element. If element matches, it will be |
|---|
| 49 | // upcasted as a "sampleWidget". |
|---|
| 50 | upcast: function( el ) { |
|---|
| 51 | return el.name == 'div' && el.hasClass( 'tagSpecialClass' ); |
|---|
| 52 | }, |
|---|
| 53 | |
|---|
| 54 | // This is what happens with existing widget, when |
|---|
| 55 | // editor data is returned (called editor.getData() or viewing source). |
|---|
| 56 | downcast: function( el ) { |
|---|
| 57 | el.setHtml( '{{birthYear}}' ); |
|---|
| 58 | }, |
|---|
| 59 | |
|---|
| 60 | // This could be done in upcast. But let's do it here |
|---|
| 61 | // to show that there's init function, which, unlike |
|---|
| 62 | // upcast, works on real DOM elements. |
|---|
| 63 | init: function() { |
|---|
| 64 | this.element.setHtml( '23' ); |
|---|
| 65 | } |
|---|
| 66 | } ); |
|---|
| 67 | |
|---|
| 68 | // Just a button to show that "sampleWidget" |
|---|
| 69 | // becomes a command. |
|---|
| 70 | editor.ui.addButton && editor.ui.addButton( 'SampleWidget', { |
|---|
| 71 | label: 'Some label', |
|---|
| 72 | command: 'sampleWidget', |
|---|
| 73 | toolbar: 'insert,0' |
|---|
| 74 | } ); |
|---|
| 75 | } |
|---|
| 76 | } |
|---|
| 77 | } ); |
|---|
| 78 | </script> |
|---|
| 79 | |
|---|
| 80 | |
|---|
| 81 | |
|---|
| 82 | </body> |
|---|
| 83 | </html> |
|---|
