1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
/* bender-tags: editor,unit */
/* bender-ckeditor-plugins: wysiwygarea,removeformat */
bender.editor = {
config: {
autoParagraph: false,
allowedContent: true
}
};
bender.test(
{
'test remove format always fire editor#selectionChange': function() {
var ed = this.editor, bot = this.editorBot;
bot.setHtmlWithSelection( '[<p style="text-align:right">foo</p>]' );
ed.once( 'selectionChange', function() {
assert.isTrue( true, '"selectionChange" event always fired after remove format.' );
} );
ed.execCommand( 'removeFormat' );
},
'test remove format inside nested editable': function() {
var editor = this.editor,
bot = this.editorBot;
bot.setHtmlWithSelection( '<p>foo</p><div contenteditable="false"><p contenteditable="true">[<b>foo</b> bar]</p></div>' );
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( '<p>foo</p><div contenteditable="false"><p contenteditable="true">foo bar</p></div>', bot.getData() );
var nestedE = editor.document.findOne( 'p[contenteditable=true]' ),
sel = editor.getSelection();
assert.areSame( nestedE, sel.getCommonAncestor(), 'Selection should not leak from nested editable' );
},
'test remove format outside the contenteditable=false': function() {
// Strong outside the non-editable should be removed.
var bot = this.editorBot;
bot.setHtmlWithSelection( '<p><strong>[<span contenteditable="false">foo</span>]</strong></p>' );
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( '<p><span contenteditable="false">foo</span></p>', bot.getData() );
},
'test remove format outside of multiple contenteditable=false': function() {
// Now remove formatting from range with two non-editables separated with a text node.
var bot = this.editorBot;
bot.setHtmlWithSelection( '<p><strong>[<span contenteditable="false">foo</span>x<span contenteditable="false">foo</span>]</strong></p>' );
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( '<p><span contenteditable="false">foo</span>x<span contenteditable="false">foo</span></p>', bot.getData() );
},
'test remove format won\'t strip contenteditable formatting': function() {
var bot = this.editorBot;
// For the time being our goal is not to remove styles from editables nested within non-editables.
// So in the following sample, formatting should not be removed.
bot.setHtmlWithSelection( '<p>' +
'<strong>' +
'[before' +
'<span contenteditable="false">' +
'<em>non-editable strong</em>' +
'<span contenteditable="true">' +
'<em>editable strong</em>' +
'</span>' +
'</span>' +
'after]' +
'</strong>' +
'</p>' );
var expected = '<p>' +
'before' +
'<span contenteditable="false">' +
'<em>non-editable strong</em>' +
'<span contenteditable="true">' +
'<em>editable strong</em>' +
'</span>' +
'</span>' +
'after' +
'</p>';
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( expected, bot.getData(), 'Formatting was not removed' );
},
'test remove format selection in non-editable': function() {
var bot = this.editorBot;
bot.setHtmlWithSelection( '<p>' +
'<strong>[before</strong>' +
'<span contenteditable="false">' +
'<em>noneditable strong</em>' +
'</span>]' +
'<i>after</i>' +
'</p>' );
var expected = '<p>' +
'before' +
'<span contenteditable="false">' +
'<em>noneditable strong</em>' +
'</span>' +
'<i>after</i>' +
'</p>';
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( expected, bot.getData() );
},
'test remove format selection in nested editable': function() {
var bot = this.editorBot;
bender.tools.selection.setWithHtml( this.editor, '<h1><em>fo{o</em></h1>' +
'<div contenteditable="false">' +
'<div contenteditable="true">' +
'<em>bar</em>' +
'</div>' +
'</div>' +
'<p><em>}baz</em></p>' );
var expected = '<h1><em>fo</em>o</h1>' +
'<div contenteditable="false">' +
'<div contenteditable="true">' +
'<em>bar</em>' +
'</div>' +
'</div>' +
'<p><em>baz</em></p>';
bot.editor.execCommand( 'removeFormat' );
var data = bot.getData();
bender.assert.isInnerHtmlMatching( expected, data );
},
'test editor#addRemoveFormatFilter': function() {
bender.editorBot.create( {
name: 'test_editor2',
config: { allowedContent: true }
}, function( bot ) {
bot.setHtmlWithSelection( '[<p><span style="color:red">foo</span> <b>bar</b></p>]' );
bot.editor.addRemoveFormatFilter( function( element ) {
return !element.is( 'b' ); // Don't remove 'b' elements.
} );
bot.editor.execCommand( 'removeFormat' );
assert.areEqual( '<p>foo <b>bar</b></p>', bot.getData() );
} );
}
} );
|
