tinyeditor in jquery ui dialog
Hello.
This is my preocupation, i want to use tinyeditor plugin in jquery ui dialog
Here are code
1- index.php
Where am i making wrong ?Code:--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="theme/css-style/africafreelanceStyle.css"/> <!-- Style de la page --> <style> .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.1em; } .require{color: red; font-weight: bold; } /* css pagination*/ /*body{ width: 800px; margin: 0 auto; padding: 0; }*/ #loading{ display: none; width: 7%; height: 7.5%; position: absolute; top: 10px; left: 10px; margin-top:10px; background: url('theme/background/loading.gif') no-repeat;} #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; cursor: default; } #container .data ul li{ list-style: none; font-family: verdana; margin: 1px 0 5px 0; color: #000; font-size: 13px; padding-top: 0; } #container .pagination{ width: 500px; height: 25px; } #container .pagination ul li{ list-style: none; float: left; border: 1px solid #006699; padding: 2px 6px 2px 6px; margin: 0 3px 0 3px; font-family: arial; font-size: 14px; color: #006699; font-weight: bold; background-color: #f2f2f2; } #container .pagination ul li:hover{ color: #fff; background-color: #006699; cursor: pointer;} #go_btn{ background-color:#f2f2f2; border:1px solid #006699; color:#cc0000; padding:2px 3px 2px 3px; cursor:pointer; position:absolute; margin-top:-1px;} .total{ float:right; font-family:arial; color:#999; font-size: 13px; padding:2px 1px 2px 1px;} </style> <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> <script type="text/javascript" src="librairie/tinyeditor/tiny.editor.js"></script> <script type="text/javascript" src="librairie/uploadify/jquery.uploadify-3.1.min.js"></script> <script type="text/javascript" src="librairie/jquery-ui-1.10.2/ui/jquery-ui.js"></script> <script type="text/javascript" src="scripts/mes_fonctions.js"></script> <script type="text/javascript" src="scripts/mes_scripts.js"></script> <script> $(function() { $("#dialog-message").dialog({ autoOpen: false, modal: true, show: "blind", hide: "explode", height: 190, width: 300, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); $("#mes_destinataires").dialog({ autoOpen: false, modal: true, show: "blind", hide: "explode", height: 510, width: 530, buttons: { "Terminer": function() { fill_fields(tab_idUser, tab_loginUser); $( this ).dialog( "close" ); }, "Annuler": function() { $( this ).dialog( "close" ); } } }); $("#dialog-form").dialog({ autoOpen: true, modal: true, show: "blind", hide: "explode", height: 630, width: 670, buttons: { "Envoyer": function() { // ajouter actions à effectuer pour validation // puis re-initialisation sendMessage(); }, "Annuler": function() { $( this ).dialog( "close" ); } }, close: function() { // retour vers la fenetre précedente return false; } }); initTiny(); }); </script> <title>Envoie message privé</title> </head> <body> <div id="dialog-form" title="Ecrire un message privé"> <p class="validateTips"></p> <!-- <h2>Envoie de messages privés</h2>--> <form id="form-sendMP" method="post" action="patrol-unit/action_MP.php"> <fieldset> <label for="destinataire_msg">Destinataire <span class="require">*</span>:</label> <input type="text" name="destinataire_msg" id="destinataire_msg" value="" placeholder="cliquez sur bouton de droite SVP..." readonly="readonly" class="text ui-widget-content ui-corner-all" /> <input id="ajouter_destinataire_msg" name="ajouter_destinataire_msg" type="image" img src="theme/background/Aouter-icone.jpg" width="25" height="25" title="Ajouter un destinataire" onclick="affiche_choix_destinataire();" /> <br/> <label for="titre_msg">Sujet <span class="require">*</span>:</label> <input type="text" name="titre_msg" id="titre_msg" value="entrez l'objet de votre message ici" onfocus="if(this.value == 'entrez l\'objet de votre message ici') {this.value = '';}" onblur="if(this.value == ''){this.value = 'entrez l\'objet de votre message ici';}" class="text ui-widget-content ui-corner-all" /><br/> <label for="etiquette_msg">Etiquette :</label> <select name="etiquette_msg" id="etiquette_msg" class="text ui-widget-content ui-corner-all"> <option value="important" selected="selected">Important</option> <option value="travail">Travail</option> <option value="a faire">A réaliser</option> <option value="en attente">En attente</option> </select><br/> <div id="some_file_queue"></div> <input type="file" id="p_jointe" name="p_jointe" /> <a style="display: inline-block; width: 150px; padding-bottom: 5px; color: salmon; " href="javascript:$('#p_jointe').uploadify('upload','*')">Uploader les PJ</a><br> <textarea name="contenu_msg" id="tinyeditor" style="width: 400px; height: 200px"></textarea> <input type="hidden" name="id_expediteur" id="id_expediteur" value="1"/> <input type="hidden" name="id_destinataire" id="id_destinataire" value=""/> </fieldset> <span style="display: inline-block; width: 98%; margin:2% 1% 2% 1%; padding: .1%; text-align: center;"><strong><u>NB</u>:</strong> Les champs marqués d'un (<span class="require">*</span>) sont obligatoires</span><br/> </form> </div> <div id="dialog-message"> <p></p> </div> <!-- boite de chargement des contacts --> <div id="mes_destinataires" title="Selectionnez les destinataires" style="font-size:14px;color:#cc0000;font-weight:normal; "> <div id="loading"></div> <div id="container"> </div> </div> </body> </html> 2- jquery configuation /* * To change this template, choose Tools | Templates * and open the template in the editor. */ $(document).ready(function() { var editor = new TINY.editor.edit('editor', { id: 'tinyeditor', width: 530, height: 158, cssclass: 'tinyeditor', controlclass: 'tinyeditor-control', rowclass: 'tinyeditor-header', dividerclass: 'tinyeditor-divider', controls: ['bold', 'italic', 'underline', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'link', 'unlink'], footer: true, fonts: ['Verdana','Arial','Georgia','Trebuchet MS'], xhtml: true, cssfile: 'custom.css', bodyid: 'editor', footerclass: 'tinyeditor-footer', toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'}, resize: {cssclass: 'resize'} }); });
CSS Codes
Reply With Quote
Bookmarks