| Current Path : /var/www/html/mmishra/mybp1/js/tinymce/tests/ |
| Current File : /var/www/html/mmishra/mybp1/js/tinymce/tests/basic.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic editor functionality tests</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="qunit/runner.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script>
var editor;
QUnit.config.autostart = false;
module("Basic functionality", {
autostart: false
});
test('commands - xhtmlTextStyles', function() {
var c;
expect(19);
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('Bold');
equals(editor.getContent(), "<p><strong>test 123</strong></p>");
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('Italic');
equals(editor.getContent(), "<p><em>test 123</em></p>");
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('Underline');
equals(editor.getContent(), '<p><span style="text-decoration: underline;">test 123</span></p>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('Strikethrough');
equals(editor.getContent(), '<p><span style="text-decoration: line-through;">test 123</span></p>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('FontName',false,'Arial');
equals(editor.getContent(), '<p><span style="font-family: ' + fontFace('Arial') + ';">test 123</span></p>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('FontSize',false,'7');
equals(editor.getContent(), '<p><span style="font-size: xx-large;">test 123</span></p>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('ForeColor', false, '#FF0000');
equals(editor.getContent(), '<p><span style="color: #ff0000;">test 123</span></p>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('HiliteColor', false, '#FF0000');
equals(editor.getContent(), '<p><span style="background-color: #ff0000;">test 123</span></p>');
editor.setContent('<p><span style="text-decoration: underline;">test 123</span></p>');
equals(editor.getContent(), '<p><span style="text-decoration: underline;">test 123</span></p>');
editor.setContent('<p><span style="text-decoration: line-through;">test 123</span></p>');
equals(editor.getContent(), '<p><span style="text-decoration: line-through;">test 123</span></p>');
editor.setContent('<p><span style="font-family: Arial;">test 123</span></p>');
equals(editor.getContent(), '<p><span style="font-family: Arial;">test 123</span></p>');
editor.setContent('<p><span style="font-size: xx-large;">test 123</span></p>');
equals(editor.getContent(), '<p><span style="font-size: xx-large;">test 123</span></p>');
editor.setContent('<p><u>test 123</u></p>');
equals(editor.getContent(), '<p><span style="text-decoration: underline;">test 123</span></p>');
editor.setContent('<p><strike>test 123</strike></p>');
equals(editor.getContent(), '<p><span style="text-decoration: line-through;">test 123</span></p>');
editor.setContent('<p><font face="Arial">test 123</font></p>');
equals(editor.getContent(), '<p><span style="font-family: ' + fontFace('Arial') + ';">test 123</span></p>');
editor.setContent('<p><font size="7">test 123</font></p>');
equals(editor.getContent(), '<p><span style="font-size: xx-large;">test 123</span></p>');
editor.setContent('<p><font face="Arial" size="7">test 123</font></p>');
equals(editor.getContent(), '<p><span style="font-size: xx-large; font-family: ' + fontFace('Arial') + ';">test 123</span></p>');
editor.setContent('<font style="background-color: #ff0000" color="#ff0000">test</font><font face="Arial">test</font>');
equals(editor.getContent(), '<p><span style="color: #ff0000; background-color: #ff0000;">test</span><span style="font-family: ' + fontFace('Arial') + ';">test</span></p>');
editor.setContent('<p><font face="Arial" style="color: #ff0000">test 123</font></p>');
equals(editor.getContent(), '<p><span style="color: #ff0000; font-family: ' + fontFace('Arial') + ';">test 123</span></p>');
});
test('commands - alignInline', function() {
expect(7);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('JustifyLeft');
equals(editor.getContent(), '<p style="text-align: left;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('JustifyCenter');
equals(editor.getContent(), '<p style="text-align: center;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('JustifyRight');
equals(editor.getContent(), '<p style="text-align: right;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('JustifyFull');
equals(editor.getContent(), '<p style="text-align: justify;">test 123</p>');
editor.setContent('<img src="../media/logo.jpg" />');
editor.selection.select(editor.dom.select('img')[0]);
editor.execCommand('JustifyLeft');
equals(editor.getContent(), '<p><img style="float: left;" src="../media/logo.jpg" alt="" /></p>');
editor.setContent('<img src="../media/logo.jpg" />');
editor.selection.select(editor.dom.select('img')[0]);
editor.execCommand('JustifyCenter');
equals(editor.getContent(), '<p><img style="margin-right: auto; margin-left: auto; display: block;" src="../media/logo.jpg" alt="" /></p>');
editor.setContent('<img src="../media/logo.jpg" />');
editor.selection.select(editor.dom.select('img')[0]);
editor.execCommand('JustifyRight');
equals(editor.getContent(), '<p><img style="float: right;" src="../media/logo.jpg" alt="" /></p>');
});
test('commands - blockquote', function() {
expect(2);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('mceBlockQuote');
equals(editor.getContent().replace(/\s+/g, ''), '<blockquote><p>test123</p></blockquote>');
editor.setContent('<p>test 123</p><p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('mceBlockQuote');
equals(editor.getContent().replace(/\s+/g, ''), '<blockquote><p>test123</p><p>test123</p></blockquote>');
});
test('commands - blocks', function() {
expect(9);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h1');
equals(editor.getContent(), '<h1>test 123</h1>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h2');
equals(editor.getContent(), '<h2>test 123</h2>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h3');
equals(editor.getContent(), '<h3>test 123</h3>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h4');
equals(editor.getContent(), '<h4>test 123</h4>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h5');
equals(editor.getContent(), '<h5>test 123</h5>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'h6');
equals(editor.getContent(), '<h6>test 123</h6>');
editor.execCommand('SelectAll');
try {
editor.execCommand('FormatBlock', false, 'div');
} catch (ex) {
//t.log('Failed: ' + ex.message);
}
equals(editor.getContent(), '<div>test 123</div>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'address');
equals(editor.getContent(), '<address>test 123</address>');
editor.execCommand('SelectAll');
editor.execCommand('FormatBlock', false, 'pre');
equals(editor.getContent(), '<pre>test 123</pre>');
});
test('commands - link', function() {
expect(4);
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.execCommand('mceInsertLink', false, 'test');
equals(editor.getContent(), '<p><a href="test">test 123</a></p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('mceInsertLink', false, 'http://www.site.com');
equals(editor.getContent(), '<p><a href="http://www.site.com">test 123</a></p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('mceInsertLink', false, '"&<>');
equals(editor.getContent(), '<p><a href=""&<>">test 123</a></p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('mceInsertLink', false, {href : '"&<>', 'class' : 'test'});
equals(editor.getContent(), '<p><a class="test" href=""&<>">test 123</a></p>');
});
test('commands - unlink', function() {
expect(1);
editor.setContent('<p><a href="test">test</a> <a href="test">123</a></p>');
editor.execCommand('SelectAll');
editor.execCommand('unlink');
equals(editor.getContent(), '<p>test 123</p>');
});
test('commands - subscriptSuperscript', function() {
expect(4);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('subscript');
equals(editor.getContent(), '<p><sub>test 123</sub></p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('superscript');
equals(editor.getContent(), '<p><sup>test 123</sup></p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('subscript');
editor.execCommand('subscript');
equals(editor.getContent(), '<p>test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('superscript');
editor.execCommand('superscript');
equals(editor.getContent(), '<p>test 123</p>');
});
test('commands - insertHR', function() {
var v;
expect(1);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('InsertHorizontalRule');
equals(trimContent(editor.getContent()), '<hr />');
});
test('commands - indentOutdent', function() {
expect(4);
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('Indent');
equals(editor.getContent(), '<p style="padding-left: 30px;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('Indent');
editor.execCommand('Indent');
equals(editor.getContent(), '<p style="padding-left: 60px;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('Indent');
editor.execCommand('Indent');
editor.execCommand('Outdent');
equals(editor.getContent(), '<p style="padding-left: 30px;">test 123</p>');
editor.setContent('<p>test 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('Outdent');
equals(editor.getContent(), '<p>test 123</p>');
});
test('commands - removeFormat', function() {
var t = this;
expect(3);
editor.setContent('<p><span>test</span> <strong>123</strong> <a href="123">123</a> 123</p>');
editor.execCommand('SelectAll');
editor.execCommand('RemoveFormat');
equals(editor.getContent(), '<p>test 123 <a href="123">123</a> 123</p>');
editor.setContent('<p><span><span>test</span> <strong>123</strong> <a href="123">123</a> 123</span></p>');
editor.execCommand('SelectAll');
editor.execCommand('RemoveFormat');
equals(editor.getContent(), '<p>test 123 <a href="123">123</a> 123</p>');
editor.setContent('<p><span>test<span id="x">test <strong>123</strong></span><a href="123">123</a> 123</span></p>');
editor.selection.select(editor.dom.get('x'));
editor.execCommand('RemoveFormat');
equals(editor.getContent(), '<p><span>test</span><span id="x">test 123</span><span><a href="123">123</a> 123</span></p>');
});
test('commands - customCommands', function() {
var t = this;
expect(1);
editor.execCommand('mceSetContent', false, '<p>test 123 abc</p>');
equals(editor.getContent(), '<p>test 123 abc</p>');
/* editor.setContent('<p>test <span>1<span>2</span>3</span> abc</p>');
editor.selection.select(editor.dom.select('span')[0], 1);
editor.execCommand('mceReplaceContent', false, '<p>test <span>aaa1<span>2</span>3bbb</span></p>');
equals(editor.getContent(), '<div>aaatest 123bbb</div>');
editor.setContent('test 123');
editor.execCommand('SelectAll');
editor.selection.collapse(1);
editor.execCommand('mceInsertContent', false, 'abc');
equals(editor.getContent(), '<p>test 123 abc</p>');*/
});
test('internals - forcedBlocks', function() {
expect(4);
editor.setContent('<p></p><p> </p><p /><p id="x"></p><p id="y"> </p><p id="z" />');
equals(editor.getContent(), '<p> </p><p> </p><p> </p><p id="x"> </p><p id="y"> </p><p id="z"> </p>');
editor.setContent('test <strong>test2</strong> <em>test3</em>');
equals(editor.getContent(), '<p>test <strong>test2</strong> <em>test3</em></p>');
editor.setContent('<p>test</p>test <strong>test2</strong> <em>test3</em>');
equals(editor.getContent(), '<p>test</p><p>test <strong>test2</strong> <em>test3</em></p>');
editor.setContent('<p>test 1</p>test <strong>test2</strong> <em>test3</em><p>test 2</p>test');
equals(editor.getContent(), '<p>test 1</p><p>test <strong>test2</strong> <em>test3</em></p><p>test 2</p><p>test</p>');
});
test('internals - explorerBugs', function() {
expect(2);
// Don't run real test on non IE browsers
if (!tinymce.isIE) {
ok(1);
ok(1);
return;
}
editor.setContent('<p><span><ul><li>Item 1</li></ul></span></p>');
equals(editor.getContent(), '<p><span><ul><li>Item 1</li></ul></span></p>');
editor.setContent('<p class="test">test1</p><p><div>test2</div></p><p class="test">test3</p>');
equals(editor.getContent(), tinymce.isIE ? '<p class="test">test1</p><p><div>test2</div></p><p class="test">test3</p>' : '<p class="test">test1</p><p> </p><div>test2</div><p> </p><p class="test">test3</p>');
});
test('urls - relativeURLs', function() {
expect(5);
editor.settings.relative_urls = true;
editor.documentBaseURI = new tinymce.util.URI('http://www.site.com/dirA/dirB/dirC/');
editor.setContent('<a href="test.html">test</a>');
equals(editor.getContent(), '<p><a href="test.html">test</a></p>');
editor.setContent('<a href="../test.html">test</a>');
equals(editor.getContent(), '<p><a href="../test.html">test</a></p>');
editor.setContent('<a href="test/test.html">test</a>');
equals(editor.getContent(), '<p><a href="test/test.html">test</a></p>');
editor.setContent('<a href="/test.html">test</a>');
equals(editor.getContent(), '<p><a href="../../../test.html">test</a></p>');
editor.setContent('<a href="http://www.somesite.com/test/file.htm">test</a>');
equals(editor.getContent(), '<p><a href="http://www.somesite.com/test/file.htm">test</a></p>');
});
test('urls - absoluteURLs', function() {
expect(8);
editor.settings.relative_urls = false;
editor.settings.remove_script_host = true;
editor.documentBaseURI = new tinymce.util.URI('http://www.site.com/dirA/dirB/dirC/');
editor.setContent('<a href="test.html">test</a>');
equals(editor.getContent(), '<p><a href="/dirA/dirB/dirC/test.html">test</a></p>');
editor.setContent('<a href="../test.html">test</a>');
equals(editor.getContent(), '<p><a href="/dirA/dirB/test.html">test</a></p>');
editor.setContent('<a href="test/test.html">test</a>');
equals(editor.getContent(), '<p><a href="/dirA/dirB/dirC/test/test.html">test</a></p>');
editor.setContent('<a href="http://www.somesite.com/test/file.htm">test</a>');
equals(editor.getContent(), '<p><a href="http://www.somesite.com/test/file.htm">test</a></p>');
editor.settings.relative_urls = false;
editor.settings.remove_script_host = false;
editor.setContent('<a href="test.html">test</a>');
equals(editor.getContent(), '<p><a href="http://www.site.com/dirA/dirB/dirC/test.html">test</a></p>');
editor.setContent('<a href="../test.html">test</a>');
equals(editor.getContent(), '<p><a href="http://www.site.com/dirA/dirB/test.html">test</a></p>');
editor.setContent('<a href="test/test.html">test</a>');
equals(editor.getContent(), '<p><a href="http://www.site.com/dirA/dirB/dirC/test/test.html">test</a></p>');
editor.setContent('<a href="http://www.somesite.com/test/file.htm">test</a>');
equals(editor.getContent(), '<p><a href="http://www.somesite.com/test/file.htm">test</a></p>');
});
test('editor_methods - getParam', function() {
expect(5);
editor.settings.test = 'a,b,c';
equals(editor.getParam('test', '', 'hash')['c'], 'c');
editor.settings.test = 'a';
equals(editor.getParam('test', '', 'hash')['a'], 'a');
editor.settings.test = 'a=b';
equals(editor.getParam('test', '', 'hash')['a'], 'b');
editor.settings.test = 'a=b;c=d,e';
equals(editor.getParam('test', '', 'hash')['c'], 'd,e');
editor.settings.test = 'a=b,c=d';
equals(editor.getParam('test', '', 'hash')['c'], 'd');
});
test('WebKit Serialization range bug', function() {
expect(1);
if (tinymce.isIE) {
ok(true, "Skip IE");
} else {
// Note that if we create the P with this invalid content directly, Chrome cleans it up differently to other browsers so we don't
// wind up testing the serialization functionality we were aiming for and the test fails.
var p = editor.dom.create('p', {}, '123<table><tbody><tr><td>X</td></tr></tbody></table>456');
editor.dom.replace(p, editor.getBody().firstChild);
equals(editor.getContent(), '<p>123</p><table><tbody><tr><td>X</td></tr></tbody></table><p>456</p>');
}
});
tinyMCE.init({
mode : "exact",
elements : "elm1",
theme : "advanced",
add_unload_trigger : false,
theme_advanced_styles : 'test1=test1;test2=test2',
valid_styles : {
'*' : 'text-align,padding-left,color,font-size,font-family,background-color,font-weight,font-style,text-decoration,float,margin,margin-top,margin-right,margin-bottom,margin-left,display'
},
apply_source_formatting : 0,
init_instance_callback : function(ed) {
editor = ed;
ed.onNodeChange.addToTop(function() {
return false;
});
QUnit.start();
}
});
</script>
</head>
<body>
<h1 id="qunit-header">Basic editor functionality tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="content">
<textarea id="elm1" name="elm1"></textarea>
<div>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
</div>
</div>
</body>
</html>