Code:
<!DOCTYPE html>
<html>
<head>
<title>Ext.ux.TinyMCE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="">
<link rel="stylesheet" type="text/css" href="lib/ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
body { padding: 10px; font-family: Arial; font-size: 12pt;}
h1 { margin-bottom: 0.3em; }
h2 { margin-top: 1em }
</style>
<script type="text/javascript" src="lib/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/ext-3.4.0/adapter/jquery/ext-jquery-adapter.js" ></script>
<script type="text/javascript" src="lib/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="lib/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="Ext.ux.TinyMCE.min.js"></script>
<script type="text/javascript">
// You have to init TinyMCE manually if you plan to render Ext.ux.TinyMCE in the Ext.onReady handler.
Ext.ux.TinyMCE.initTinyMCE();
Ext.onReady(function() {
var tinymceSettings = {
theme : "advanced",
relative_urls : false,
plugins : "autolink,advhr,advimage,advlink,advlist,contextmenu,iespell,layer,"
+"lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,searchreplace,spellchecker,style"
+",table,template,visualchars,xhtmlxtras",
theme_advanced_buttons1 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,bold"
+ ",italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,"
+ "|,bullist,numlist,outdent,indent,blockquote,sub,sup,|,insertlayer,styleprops",
theme_advanced_buttons2 : "undo,redo,cut,copy,paste,pastetext,pasteword,|,link,unlink,anchor,image,media"
+",|,advhr,nonbreaking,|,search,replace,visualaid,spellchecker,|,removeformat,print,preview",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_path : true,
theme_advanced_resizing : false,
theme_advanced_resize_horizontal : false,
theme_advanced_source_editor_height: 350,
table_default_border:0,
table_inline_editing : false,
spellchecker_languages : "+English=en",
constrain_menus: true,
visual: true,
apply_source_formatting : true,
convert_fonts_to_spans : true,
convert_newlines_to_brs : true,
element_format: 'xhtml',
fix_list_elements : true,
inline_styles : true,
verify_html: true,
gecko_spellcheck : true,
};
var frm = new Ext.form.FormPanel({
autoHeight: true,
border: true,
style: 'padding:10px;',
autoScroll: false,
layout:'fit',
width: 772,
frame: false,
title: 'Editor',
items: [
{
xtype: "tinymce",
hideLabel: true,
width: 750,
height: 380,
border: false,
frame: false,
tinymceSettings: tinymceSettings,
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
}
]
});
var accordion = new Ext.Panel({
layout: 'accordion',
title: 'test',
closable: true,
defaults: {collapsed:false},
items: [frm]
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
width: 245,
autoScroll: 'auto',
split: true,
collapsible: true,
layout: {
type: 'accordion',
animate: true
},
items: [{
title: 'Navigation',
html: '<p>Some navigation stuff in here.</p>',
border: false
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false
}]
},{
xtype:'panel',
region: 'center',
items:
new Ext.TabPanel({
border: false,
activeTab: 0,
tabMargin: 20,
items: [accordion]
})
}]
});
});
</script>
</head>
<body>
</body>
</html>
Originally Posted by sraghavachari
Reply With Quote
