Need help in previewing the Editor (Document)

**emmadi** · 21 Feb 2009, 8:39 PM

Hi
I am having a document like few textfields and a Editor and one Preview button
My functionality is If i press the preview button then i need the complete page preview
for that i designed a doc then onclick (preview) button then an window will be opened in that i want the preview but i am not getting the data from the editor

here are my attachments please check it

**walldorff** · 22 Feb 2009, 2:59 AM

Have you searched the forum on this?
In a quick search on "htmleditor getvalue" I harvested 94 hits.
Maybe you can narrow that down

Besides, without a scrap of code, who can tell what's going on in your app?

I really like to help you, but I still consider myself as a novice. Therefore I have to run your code (or fragment) in my own environment to see what's happening.

I suggest you do a forum search first.
Happy reading

**emmadi** · 22 Feb 2009, 5:54 AM

Thanks for the reply
ya but i am not using the HTML editor...if i use the HTML editor then i can retrieve the data easily but i am using the tinyMCE plugin may be that is my problem... i am very sorry i dint specified it in my first thread...

any idea please...

**walldorff** · 22 Feb 2009, 7:30 AM

No, it's my bad, I should have seen that

Maybe is inst.setHTML(textarea.getValue()); any option?

**emmadi** · 23 Feb 2009, 12:53 AM

thanks for the reply but no result it is not working

**emmadi** · 23 Feb 2009, 4:16 AM

Now i am able to collect the data from the editor and place it in side the second editor which is inside the window but i dont want this second editor as editable... i want this as readonly... and also i dont want toolbar for the second editor
This is my code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Areas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="">
    <link rel="stylesheet" type="text/css" href="lib/ext//resources/css/ext-all.css" />
    <style>
        body { padding: 10px; font-family: Arial; font-size: 12pt;}
        h1 { margin-bottom: 0.3em; }
        h2 { margin-top: 1em }
        ul { list-style: disc outside; padding-left: 1.5em; }
    </style>
    <script type="text/javascript" src="lib/ext/ext-base.js"></script>
    <script type="text/javascript" src="lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="lib/ext/ux/miframe.js"></script>
    <script type="text/javascript" src="lib/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="Ext.ux.TinyMCE.js"></script>
        
<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        skin : "o2k7",
        theme : "advanced",
        editor_selector : "mceEditor",
        //editor_deselector : "mceNoEditor",
        plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false,
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",
        width: 534 ,
        height: 380
    });
</script>

<script type="text/javascript">
     Ext.onReady(function(){
     Ext.QuickTips.init();

var preview = function(){
     var nm_1 = Ext.getCmp('nm').getValue();
     var pl_1 = Ext.getCmp('pl').getValue();
     var bio_1 = Ext.getCmp('richText').getValue();
    // alert(Ext.getCmp('richText').getValue());
     alert(bio_1);
      
     var form1 = new Ext.form.FormPanel({
      
        width: 800,
        bodyStyle:'padding:5px 5px 0',
        autoScroll:true,
        frame:true,
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Name',
            name: 'name1',
            id:'name1',
            value:nm_1,
            width:200,
            readOnly:true
            
        },{
            fieldLabel: 'Place',
            name: 'place',
            id:'place1',
            value:pl_1,
            width:200,
            readOnly:true
        },{
            xtype: 'tinymce',
                fieldLabel: "Rich text",
                id:'textarea1',
                name:'textarea1',
                width: 200,
                height: 200,
                value: bio_1,
                tinymceSettings: {
                    theme : "advanced",
                    plugins: " "//,
                    //theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                    //theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    //theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
                    //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    //theme_advanced_toolbar_location : "top",
                    //theme_advanced_toolbar_align : "left",
                    //theme_advanced_toolbar:false,
                    //theme_advanced_statusbar_location : "bottom",
                    //theme_advanced_resizing : false,
                    //extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                    //template_external_list_url : "example_template_list.js"
                    
                  }
            
           
        }
         
       ]
    });
    
  if(!win){
    var  win = new Ext.Window({
         el:'win',
        layout:'fit',
        width:400,
        height:400,
        closable: true,
        closeAction:'hide',
        minimizable:true,
        resizable:true,
        plain: true,
        items: [form1]
        }); 
        
     }
     win.show();
    };


 var form = new Ext.form.FormPanel({
        width: 800,
        //height:500,
        bodyStyle:'padding:5px 5px 0',
        autoScroll:true,
        frame:true,
        defaultType: 'textfield',
        
        items: [{
            fieldLabel: 'Name',
            name: 'nm',
            id:'nm',
            width:200,
            value: 'Jack',
            readOnly:true
            },{
            fieldLabel: 'Place',
            name: 'pl',
            id:'pl',           
            width:200,
            value: 'India',
            readOnly:true
           },{
            xtype: 'tinymce',
                fieldLabel: "Rich text",
                id: "richText",
                name: "richText",
                width: 600,
                height: 400,
                tinymceSettings: {
                    theme : "advanced",
                    plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : false,
                    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                    template_external_list_url : "example_template_list.js"
                  }
             }
       ],
        buttonAlign :'center',
        buttons: [{
        text:'PreView',
        handler:preview
      }]
    });
     form.render(document.body);  
     });
      
      
     
    </script>
  
</head>
<body>
<!--<script type="text/javascript" src="js/examples.js"></script>-->
<h2>Editor</h2>
<div id="win" class="x-hidden"></div>

</body>
</html>

please check it and give me some idea

Thread: Need help in previewing the Editor (Document)

Thread Tools

Search Thread

Display

Need help in previewing the Editor (Document)

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News