Results 1 to 6 of 6

Thread: Need help in previewing the Editor (Document)

  1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    127

    Default Need help in previewing the Editor (Document)

    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
    Attached Images Attached Images

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    165

    Cool

    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
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    127

    Default

    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...

  4. #4
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    165

    Cool

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

    Maybe is inst.setHTML(textarea.getValue()); any option?
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  5. #5
    Ext User
    Join Date
    Sep 2008
    Posts
    127

    Default

    thanks for the reply but no result it is not working

  6. #6
    Ext User
    Join Date
    Sep 2008
    Posts
    127

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •