module("tinymce.Formatter - Apply", { setupModule: function() { document.getElementById('view').innerHTML = '
'; QUnit.stop(); tinymce.init({ selector: "#elm1", external_plugins: { noneditable: '../../../../tests/qunit/editor/external-plugins/noneditable/plugin.min.js' }, // WP add_unload_trigger: false, skin: false, indent: false, extended_valid_elements: 'b[id|style|title],i[id|style|title],span[id|class|style|title|contenteditable],font[face|size]', forced_root_block: '', convert_fonts_to_spans: false, disable_nodechange: true, entities: 'raw', valid_styles: { '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,float,margin,margin-top,margin-right,margin-bottom,margin-left,display' }, init_instance_callback: function(ed) { window.editor = ed; if (inlineEditor) { QUnit.start(); } } }); tinymce.init({ selector: "#elm2", inline: true, add_unload_trigger: false, skin: false, indent: false, convert_fonts_to_spans: false, disable_nodechange: true, entities: 'raw', valid_styles: { '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,float,margin,margin-top,margin-right,margin-bottom,margin-left,display' }, init_instance_callback: function(ed) { window.inlineEditor = ed; if (editor) { QUnit.start(); } } }); } }); function getContent() { return editor.getContent().toLowerCase().replace(/[\r]+/g, ''); } test('apply inline to a list', function() { editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '1234
5678
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
5678
', 'selection of a list'); }); test('Toggle OFF - Inline element on selected text', function() { // Toggle OFF - Inline element on selected text editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '1234
'); }); test('Toggle OFF - Inline element on partially selected text', function() { // Toggle OFF - Inline element on partially selected text editor.formatter.register('format', { inline: 'b', toggle: 0 }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[0].firstChild, 2); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '1234
'); }); test('Toggle OFF - Inline element on partially selected text in start/end elements', function() { // Toggle OFF - Inline element on partially selected text in start/end elements editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '1234
1234
'; //'1234
1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[1].firstChild, 3); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '1234
1234
'); }); test('Toggle ON - NO inline element on selected text', function() { // Inline element on selected text editor.formatter.register('format', { inline: 'b', toggle: true }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element on selected text'); editor.formatter.toggle('format'); equal(getContent(), '1234
', 'Toggle ON - NO inline element on selected text'); }); test('Selection spanning from within format to outside format with toggle off', function() { editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 2); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '1234
', 'Extend formating if start of selection is already formatted'); }); test('Inline element on partially selected text', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element on partially selected text'); editor.formatter.toggle('format'); equal(getContent(), '1234
', 'Toggle ON - NO inline element on partially selected text'); }); test('Inline element on partially selected text in start/end elements', function() { // Inline element on partially selected text in start/end elements editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[1].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
1234
'); }); test('Inline element on selected element', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element on selected element'); }); test('Inline element on multiple selected elements', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
1234
', 'Inline element on multiple selected elements'); }); test('Inline element on multiple selected elements with various childnodes', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '123456789
123456789
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '123456789
123456789
', 'Inline element on multiple selected elements with various childnodes'); }); test('Inline element with attributes', function() { editor.formatter.register('format', { inline: 'b', attributes: { title: 'value1', id: 'value2' } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with attributes'); }); test('Inline element with styles', function() { editor.formatter.register('format', { inline: 'b', styles: { color: '#ff0000', fontSize: '10px' } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with styles'); }); test('Inline element with attributes and styles', function() { editor.formatter.register('format', { inline: 'b', attributes: { title: 'value1', id: 'value2' }, styles: { color: '#ff0000', fontSize: '10px' } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with attributes and styles'); }); test('Inline element with wrapable parents', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = 'x1234y
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'x1234y
', 'Inline element with wrapable parents'); }); test('Inline element with redundant child', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with redundant child'); }); test('Inline element with redundant parent', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with redundant parent'); }); test('Inline element with redundant child of similar type 1', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }]); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with redundant child of similar type 1'); }); test('Inline element with redundant child of similar type 2', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with redundant child of similar type 2'); }); test('Inline element with redundant children of similar types', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = 'a12345678b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a12345678b
', 'Inline element with redundant children of similar types'); }); test('Inline element with redundant parent 1', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }]); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with redundant parent 1'); }); test('Inline element with redundant parent 2', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with redundant parent 2'); }); test('Inline element with redundant parents of similar types', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with redundant parents of similar types'); }); test('Inline element merged with parent and child', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = 'a123456b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 1); rng.setEnd(editor.dom.select('b')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a123456b
', 'Inline element merged with parent and child'); }); test('Inline element merged with child 1', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element merged with child 1'); }); test('Inline element merged with child 2', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element merged with child 2'); }); test('Inline element merged with child 3', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element merged with child 3'); }); test('Inline element merged with child 3', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' }, merge: true }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element merged with child 3'); }); test('Inline element merged with child 4', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#00ff00' } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element merged with child 4'); }); test('Inline element with attributes merged with child 1', function() { editor.formatter.register('format', { inline: 'font', attributes: { face: 'arial' }, merge: true }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element with attributes merged with child 1'); }); test('Inline element with attributes merged with child 2', function() { editor.formatter.register('format', { inline: 'font', attributes: { size: '7' } }); editor.getBody().innerHTML = 'a1234b
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a1234b
', 'Inline element with attributes merged with child 2'); }); test('Inline element merged with left sibling', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '12345678
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].lastChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '12345678
', 'Inline element merged with left sibling'); }); test('Inline element merged with right sibling', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '12345678
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '12345678
', 'Inline element merged with right sibling'); }); test('Inline element merged with left and right siblings', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '123456
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].childNodes[1], 0); rng.setEnd(editor.dom.select('p')[0].childNodes[1], 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '123456
', 'Inline element merged with left and right siblings'); }); test('Don\'t merge siblings with whitespace between 1', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = 'a b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].lastChild, 1); rng.setEnd(editor.dom.select('p')[0].lastChild, 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a b
', 'Don\'t merge siblings with whitespace between 1'); }); test('Don\'t merge siblings with whitespace between 1', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = 'a b
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'a b
', 'Don\'t merge siblings with whitespace between 2'); }); test('Inline element not merged in exact mode', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#00ff00' }, exact: true }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element not merged in exact mode'); }); test('Inline element merged in exact mode', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#ff0000' }, exact: true }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Inline element merged in exact mode'); }); test('Deep left branch', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234text1text2
5678
9012
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('ins')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[2].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234text1text2
5678
9012
', 'Deep left branch'); }); test('Deep right branch', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '9012
5678
1234text1text2
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[3].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '9012
5678
1234text1text2
', 'Deep right branch'); }); test('Full element text selection on two elements with a table in the middle', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '1234
123 |
5678
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
123 |
5678
', 'Full element text selection on two elements with a table in the middle'); }); test('Inline element on selected text with variables', function() { editor.formatter.register('format', { inline: 'b', styles: { color: '%color' }, attributes: { title: '%title' } }, { color: '#ff0000', title: 'title' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format', { color: '#ff0000', title: 'title' }); equal(getContent(), '1234
', 'Inline element on selected text'); }); test('Remove redundant children', function() { editor.formatter.register('format', { inline: 'span', styles: { fontFamily: 'arial' } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Remove redundant children'); }); test('Inline element on selected text with function values', function() { editor.formatter.register('format', { inline: 'b', styles: { color: function(vars) { return vars.color + '00ff'; } }, attributes: { title: function(vars) { return vars.title + '2'; } } }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format', { color: '#ff', title: 'title' }); equal(getContent(), '1234
', 'Inline element on selected text with function values'); }); test('Block element on selected text', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
5678
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
5678
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
5678
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('h1')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '', 'Block element wrapper 1'); }); test('Block element wrapper 2', function() { editor.formatter.register('format', { block: 'blockquote', wrapper: 1 }); editor.getBody().innerHTML = '1234
5678
', 'Block element wrapper 2'); }); test('Block element wrapper 3', function() { editor.formatter.register('format', { block: 'blockquote', wrapper: 1 }); editor.getBody().innerHTML = '1234
', 'Block element wrapper 3'); }); test('Apply format on single element that matches a selector 1', function() { editor.formatter.register('format', { selector: 'p', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '1234
1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Apply format on single element that matches a selector'); }); test('Apply format on single element parent that matches a selector 2', function() { editor.formatter.register('format', { selector: 'div', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '1234
test
1234
1234
test
1234
1234
1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
1234
', 'Apply format on multiple elements that matches a selector'); }); test('Apply format on top of existing selector element', function() { editor.formatter.register('format', { selector: 'p', attributes: { title: 'test2' }, styles: { 'color': '#00ff00' }, classes: 'a b c' }); editor.getBody().innerHTML = '1234
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '1234
', 'Apply format on top of existing selector element'); }); test('Format on single li that matches a selector', function() { editor.formatter.register('format', { inline: 'span', selector: 'li', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = 'test1 test2 test3 test4 test5 test6
'); rng.setStart(editor.dom.select('strong')[0].firstChild, 6); rng.setEnd(editor.dom.select('strong')[0].firstChild, 11); editor.focus(); editor.selection.setRng(rng); editor.execCommand('Italic'); equal(editor.getContent(), 'test1 test2 test3 test4 test5 test6
', 'Selected text should be bold.'); }); test('Apply color format to links as well', function() { editor.setContent('123abc456
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 3); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', styles: { color: '#FF0000' }, links: true }); editor.formatter.apply('format'); equal( editor.getContent(), '123abc456
', 'Link should have it\'s own color.' ); }); test('Color on link element', function() { editor.setContent('123abc456
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[0].lastChild, 3); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', styles: { color: '#FF0000' }, links: true }); editor.formatter.apply('format'); equal( editor.getContent(), '123abc456
', 'Link should have it\'s own color.' ); }); test("Applying formats in lists", function() { editor.setContent('test
'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), 'test
', 'Coloring an underlined text should result in a colored underline'); }); test('Underline colors 2', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('test
'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), 'test
', 'Underlining colored text should result in a colored underline'); }); test('Underline colors 3', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('This is some example text
'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), 'This is some example text
', 'Underlining colored and underlined text should result in a colored underline'); }); test('Underline colors 4', function() { editor.formatter.register('format', { inline: 'span', styles: { 'color': '#ff0000' } }); editor.setContent('yellowredyellow
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[1].firstChild, 6); rng.setEnd(editor.dom.select('span')[1].firstChild, 9); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), 'yellowredyellow
', 'Coloring an colored underdlined text should result in newly colored underline' ); }); test('Underline colors 5', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('This is some example text
This is some example text
This is some example text
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('strong')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[4].lastChild, 5); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(editor.getContent(), 'This is some example text
This is some example text
This is some example text
', 'Colored elements should be underlined when selection is across multiple paragraphs'); }); test('Underline colors 6', function() { editor.formatter.register('format', { inline: 'span', exact: true, styles: { 'color': '#ff0000' } }); editor.setContent('This is some text.
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 8); rng.setEnd(editor.dom.select('span')[0].firstChild, 12); editor.selection.setRng(rng); editor.formatter.apply('format'); editor.formatter.remove('format'); equal(editor.getContent(), 'This is some text.
', 'Children nodes that are underlined should be removed if their parent nodes are underlined'); }); test('Underline colors 7', function() { editor.formatter.register('format', { inline: 'span', exact: true, styles: { 'color': '#ff0000' } }); editor.setContent('This is some text.
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[1].firstChild, 0); rng.setEnd(editor.dom.select('span')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.remove('format'); equal(editor.getContent(), 'This is some text.
', 'Children nodes that are underlined should be removed if their parent nodes are underlined'); }); test('Caret format inside single block word', function() { editor.setContent('abc
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 2, 'p', 2); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
'); }); test('Caret format inside first block word', function() { editor.setContent('abc 123
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 2, 'p', 2); editor.formatter.apply('format'); equal(editor.getContent(), 'abc 123
'); }); test('Caret format inside last block word', function() { editor.setContent('abc 123
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 5, 'p', 5); editor.formatter.apply('format'); equal(editor.getContent(), 'abc 123
'); }); test('Caret format inside middle block word', function() { editor.setContent('abc 123 456
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 5, 'p', 5); editor.formatter.apply('format'); equal(editor.getContent(), 'abc 123 456
'); }); test('Caret format on word separated by non breaking space', function() { editor.setContent('one two
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), 'one\u00a0two
'); }); test('Caret format inside single inline wrapped word', function() { editor.setContent('abc 123 456
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('em', 1, 'em', 1); editor.formatter.apply('format'); equal(editor.getContent(), 'abc 123 456
'); }); test('Caret format inside word before similar format', function() { editor.setContent('abc 123 456
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), 'abc 123 456
'); }); test('Caret format inside last inline wrapped word', function() { editor.setContent('abc abc 123 456
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('em', 5, 'em', 5); editor.formatter.apply('format'); equal(editor.getContent(), 'abc abc 123 456
'); }); test('Caret format before text', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type('b'); equal(editor.getContent(), 'ba
'); }); test('Caret format after text', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); Utils.type('b'); equal(editor.getContent(), 'ab
'); }); test('Caret format and no key press', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); equal(editor.getContent(), 'a
'); }); test('Caret format and arrow left', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type({ keyCode: 37 }); equal(editor.getContent(), 'a
'); }); test('Caret format and arrow right', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type({ keyCode: 39 }); equal(editor.getContent(), 'a
'); }); test('Caret format and backspace', function() { var rng; if (tinymce.isOpera) { ok(true, "Skip Opera since faking backspace doesn't work."); return; } editor.formatter.register('format', { inline: 'b' }); editor.setContent('abc
'); rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 3); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); Utils.type('\b'); equal(editor.getContent(), 'ab
'); }); test('Caret format on word in li with word in parent li before it', function() { editor.setContent('a
'); editor.formatter.register('format', { inline: 'span', selector: '*', classes: 'test' }); Utils.setSelection('p', 0, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), 'a
'); }); test('format inline on contentEditable: false block', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('abc
def
'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
def
', 'Text is not bold'); }); test('format block on contentEditable: false block', function() { editor.formatter.register('format', { block: 'h1' }); editor.setContent('abc
def
'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
def
', 'P is not h1'); }); test('contentEditable: false on start and contentEditable: true on end', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('abc
def
ghi
'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(3)', 3); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
def
ghi
', 'Text in last paragraph is bold'); }); test('contentEditable: true on start and contentEditable: false on end', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('abc
def
'); Utils.setSelection('p:nth-child(1)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
def
', 'Text in first paragraph is bold'); }); test('contentEditable: true inside contentEditable: false', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('abc
def
'); Utils.setSelection('span', 0, 'span', 3); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
def
', 'Text is bold'); }); test('Del element wrapping blocks', function() { editor.setContent('a
'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { block: 'del', wrapper: true }); editor.formatter.apply('format'); equal(getContent(), 'a
a
'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { block: 'del' }); editor.formatter.apply('format'); equal(getContent(), 'a
'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { inline: 'del' }); editor.formatter.apply('format'); equal(getContent(), 'a
a |
a |
ab
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', attributes: { id: 'id' } }); editor.formatter.apply('format'); equal(Utils.normalizeHtml(editor.getBody().innerHTML), 'ab
'); }); test('Bug #5134 - TinyMCE removes formatting tags in the getContent', function() { editor.setContent(''); editor.formatter.register('format', { inline: 'strong', toggle: false }); editor.formatter.apply('format'); equal(getContent(), '', 'empty TinyMCE'); editor.selection.setContent('a'); equal(getContent(), 'a', 'bold text inside TinyMCE'); }); test('Bug #5134 - TinyMCE removes formatting tags in the getContent - typing', function() { editor.setContent(''); editor.formatter.register('format', { inline: 'strong', toggle: false }); editor.formatter.apply('format'); equal(getContent(), '', 'empty TinyMCE'); Utils.type('a'); equal(getContent(), 'a', 'bold text inside TinyMCE'); }); test('Bug #5453 - TD contents with BR gets wrapped in block format', function() { editor.setContent('abc 123 |
abc123 |
abc
'); Utils.setSelection('p', 2, 'p', 3); editor.formatter.apply('format'); Utils.setSelection('p', 1, 'p', 2); editor.formatter.apply('format'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), 'abc
'); }); test('Bug #6518 - Apply div blocks to inline editor paragraph', function() { inlineEditor.setContent('a
b
'); inlineEditor.selection.select(inlineEditor.getBody().firstChild, true); inlineEditor.selection.collapse(true); inlineEditor.formatter.register('format', { block: 'div' }); inlineEditor.formatter.apply('format'); equal(inlineEditor.getContent(), 'b
'); }); asyncTest('Bug #7412 - valid_styles affects the Bold and Italic buttons, although it shouldn\'t', function() { tinymce.remove(); document.getElementById('view').innerHTML = ''; tinymce.init({ selector: "#elm1", add_unload_trigger: false, valid_styles: { span: 'color,background-color,font-size,text-decoration,padding-left' }, init_instance_callback: function(ed) { window.editor = ed; QUnit.start(); editor.getBody().innerHTML = '1 1234 1
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0], 0); rng.setEnd(editor.dom.select('span')[0], 1); editor.selection.setRng(rng); editor.formatter.toggle('bold'); equal(getContent(), '1 1234 1
'); } }); });