View Full Version : tinyeditor in jquery ui dialog

04-16-2013, 10:42 AM
This is my preocupation, i want to use tinyeditor plugin in jquery ui dialog
Here are code
1- index.php

<!DOCTYPE html>
<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 -->
.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;}

<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>
$(function() {
autoOpen: false,
modal: true,
show: "blind",
hide: "explode",
height: 190,
width: 300,
buttons: {
Ok: function() {
$( this ).dialog( "close" );

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" );


autoOpen: true,
modal: true,
show: "blind",
hide: "explode",
height: 630,
width: 670,
buttons: {
"Envoyer": function() {
// ajouter actions à effectuer pour validation
// puis re-initialisation

"Annuler": function() {
$( this ).dialog( "close" );

close: function() {
// retour vers la fenetre précedente
return false;

<title>Envoie message privé</title>

<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">
<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();" />
<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>
<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=""/>

<span style="display: inline-block; width: 98%; margin:2% 1% 2% 1%; padding: .1%; text-align: center;"><strong><u>NB</u>:</strong>&nbsp;Les champs marqués d'un (<span class="require">*</span>) sont obligatoires</span><br/>

<div id="dialog-message">

<!-- 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">


2- jquery configuation
* To change this template, choose Tools | Templates
* and open the template in the editor.


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'}

Where am i making wrong ?

04-16-2013, 11:04 AM
Have you contacted the developer directly?: http://www.scriptiny.com/2010/02/javascript-wysiwyg-editor/