Ticket #13778: mytest.html

File mytest.html, 2.8 KB (added by Jakub Ś, 4 years ago)
Line 
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.
23CKEDITOR.addCss( '.tagSpecialClass { background: green; padding: 3px; color: #fff } ' );
24
25CKEDITOR.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>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy