PDA

Voir la version complète : [PHP] Créer un WYSIWYG dans l'AdminCP


Allan
25/11/2007, 20h51
Créer un WYSIWYG dans l'AdminCP
____________




Bon alors voila, un tit tuto pr ajouter un editeur WYSIWYG dans votre admincp, je verrai demain pour le poster en public si vous pensez que ca peut etre interessant !

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~

Mettez le fichier functions_editor_acp.php (n'oubliez pas de le renommer, pas le courage de faire un zip maintenant ! )dans votre dossier includes


Creez 2 nouveaux templates avec ce contenu

editor_clientscreen_news_acp (vous pouvez le renomer mais n'oubliez pas de le modifier aussi dans ce cas la dans l'appel des templates de votre page PHP et dans le fichier functions_editor_acp.php )
<!-- EDITOR SCRIPTS -->
<script type="text/javascript" src="../clientscript/vbulletin_textedit.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
var fontoptions = new Array($vBeditJs[font_options_array]);
var sizeoptions = new Array($vBeditJs[size_options_array]);
var smilieoptions = new Array(); smilieoptions = { $vBeditJs[smilie_options_array] };
var istyles = new Array(); istyles = { $vBeditJs[istyle_array] };
var smiliewindow_x = 240;
var smiliewindow_y = 280;
var ignorequotechars = $vboptions[ignorequotechars];
// vB Phrases
vbphrase["wysiwyg_please_wait"] = "$vbphrase[wysiwyg_please_wait]";
vbphrase["wysiwyg_initialized"] = "$vbphrase[wysiwyg_initialized]";
vbphrase["wysiwyg_command_invalid"] = "$vbphrase[wysiwyg_command_invalid]";
vbphrase["moz_must_select_text"] = "$vbphrase[moz_must_select_text]";
vbphrase["moz_edit_config_file"] = "$vbphrase[moz_edit_config_file]";
vbphrase["enter_tag_option"] = "$vbphrase[enter_tag_option]";
vbphrase["must_select_text_to_use"] = "$vbphrase[must_select_text_to_use]";
vbphrase["browser_is_safari_no_wysiwyg"] = "$vbphrase[browser_is_safari_no_wysiwyg]";
vbphrase["enter_option_x_tag"] = "$vbphrase[enter_option_x_tag]";
vbphrase["enter_text_to_be_formatted"] = "$vbphrase[enter_text_to_be_formatted]";
vbphrase["enter_link_text"] = "$vbphrase[enter_link_text]";
vbphrase["enter_list_type"] = "$vbphrase[enter_list_type]";
vbphrase["enter_list_item"] = "$vbphrase[enter_list_item]";
vbphrase["must_enter_subject"] = "$vbphrase[must_enter_subject]";
vbphrase["message_too_short"] = "$vbphrase[message_too_short]";
vbphrase["enter_link_url"] = "$vbphrase[enter_link_url]";
vbphrase["enter_image_url"] = "$vbphrase[enter_image_url]";
vbphrase["enter_email_link"] = "$vbphrase[enter_email_link]";
vbphrase["complete_image_verification"] = "$vbphrase[complete_image_verification]";
vbphrase["iespell_not_installed"] = "$vbphrase[iespell_not_installed]";
vbphrase["click_quick_reply_icon"] = "$vbphrase[click_quick_reply_icon]";
vbphrase["insert_all"] = "$vbphrase[insert_all]";
//-->
</script>
<!-- END EDITOR SCRIPTS -->
<!-- EDITOR STYLES -->
<link rel="stylesheet" type="text/css" href="../clientscript/vbulletin_editor.css" />
<style type="text/css">
<!--
.vBulletin_editor {
background: {$istyles[pi_button_normal][0]};
padding: $stylevar[cellpadding]px;
}
.imagebutton {
background: {$istyles[pi_button_normal][0]};
color: {$istyles[pi_button_normal][1]};
padding: {$istyles[pi_button_normal][2]};
border: {$istyles[pi_button_normal][3]};
}
.ocolor, .ofont, .osize, .osmilie, .osyscoloar, .smilietitle {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border: {$istyles[pi_menu_normal][3]};
}
.popup_pickbutton {
border: {$istyles[pi_menu_normal][3]};
}
.popup_feedback {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border-right: {$istyles[pi_menu_normal][3]};
}
.popupwindow {
background: {$istyles[pi_menu_normal][0]};
}
#fontOut, #sizeOut, .popup_feedback div {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
}
.alt_pickbutton {
border-left: 1px solid {$istyles[pi_button_normal][0]};
}
.popup_feedback input, .popup_feedback div
{
border: 0px solid;
padding: 0px 2px 0px 2px;
cursor: default;
font: 11px tahoma;
overflow: hidden;
}
-->
</style>
<!-- END EDITOR STYLES -->editor_toolbar_on_news_acp (idem que precedent si vous voulez modifier le nom)
$vBeditTemplate[clientscript]
<div id="$editorid" class="vBulletin_editor">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_controls" class="controlbar" colspan="2">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><img src="../$stylevar[imgdir_editor]/removeformat.gif" width="21" height="20" alt="$vbphrase[remove_text_formatting]" /></div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="../$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
<td><div class="imagebutton" id="{$editorid}_popup_fontsize" title="$vbphrase[sizes]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_size_out" style="width:25px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="../$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_color_out"><img src="../$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
<td class="alt_pickbutton"><img src="../$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>

<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_cut"><img src="../$stylevar[imgdir_editor]/cut.gif" width="21" height="20" alt="$vbphrase[cut]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_copy"><img src="../$stylevar[imgdir_editor]/copy.gif" width="21" height="20" alt="$vbphrase[copy]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_paste"><img src="../$stylevar[imgdir_editor]/paste.gif" width="21" height="20" alt="$vbphrase[paste]" /></div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_undo"><img src="../$stylevar[imgdir_editor]/undo.gif" width="21" height="20" alt="$vbphrase[undo]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_redo"><img src="../$stylevar[imgdir_editor]/redo.gif" width="21" height="20" alt="$vbphrase[redo]" /></div></td>
<td width="100%">&nbsp;</td>
<if condition="is_browser('ie') AND !is_browser('mac')">
<td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="../$stylevar[imgdir_editor]/spelling.gif" width="21" height="20" alt="$vbphrase[check_spelling]" /></div></td>
</if>
<td>
<div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><img src="../$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" /></div>
<div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><img src="../$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" /></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="../$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="../$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="../$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" /></div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="../$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="../$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="../$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="../$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="../$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="../$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
</if>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertorderedlist"><img src="../$stylevar[imgdir_editor]/insertorderedlist.gif" width="21" height="20" alt="$vbphrase[ordered_list]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertunorderedlist"><img src="../$stylevar[imgdir_editor]/insertunorderedlist.gif" width="21" height="20" alt="$vbphrase[unordered_list]" /></div></td>
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="../$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="../$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="../$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="../$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
</if>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="../$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_unlink"><img src="../$stylevar[imgdir_editor]/unlink.gif" width="21" height="20" alt="$vbphrase[remove_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_email"><img src="../$stylevar[imgdir_editor]/email.gif" width="21" height="20" alt="$vbphrase[insert_email_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="../$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="../$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" /></div></td>
<td><img src="../$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><img src="../$stylevar[imgdir_editor]/code.gif" width="21" height="20" alt="$vbphrase[wrap_code_tags]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_html"><img src="../$stylevar[imgdir_editor]/html.gif" width="21" height="20" alt="$vbphrase[wrap_html_tags]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="../$stylevar[imgdir_editor]/php.gif" width="21" height="20" alt="$vbphrase[wrap_php_tags]" /></div></td>
</if>
$vBeditTemplate[extrabuttons]
</tr>
</table>

</td>
</tr>
<tr valign="top">
<td class="controlbar"><textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea></td>
<td class="controlbar">$smiliebox</td>
</tr>
</table>
</div>
<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />
<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie');
//-->
</script>Rajouter ce bout de code dans la partie de la page PHP qui vous interesse :

// #################### PRE-CACHE TEMPLATES AND DATA ######################
$phrasegroups = array('posting');
$specialtemplates = array('bbcodecache');
$globaltemplates = array(
// message stuff 3.5
'editor_toolbar_on_news_acp',
'editor_smilie',
// message area for wysiwyg / non wysiwyg
'editor_clientscript_news_acp',
'editor_toolbar_off',
// javascript menu builders
'editor_jsoptions_font',
'editor_jsoptions_size',
// smiliebox templates
'editor_smiliebox',
'editor_smiliebox_category',
'editor_smiliebox_row',
'editor_smiliebox_straggler'
);
// ########################## REQUIRE BACK-END ############################
require_once(DIR . '/includes/functions_editor_news_acp.php');
$style = $db->query_first_slave("
SELECT *
FROM " . TABLE_PREFIX . "style
WHERE (styleid = " . $vbulletin->userinfo['styleid'] . ")
OR styleid = " . $vbulletin->options['styleid'] . "
ORDER BY styleid " . iif($vbulletin->userinfo['styleid'] > $vbulletin->options['styleid'], 'DESC', 'ASC') . "
LIMIT 1
");
define('STYLEID', $style['styleid']);
// now get all the templates we have specified
cache_templates($globaltemplates, $style['templatelist']);
unset($globaltemplates);
// ################################################## ###########################
// get style variables
$stylevar = fetch_stylevars($style, $vbulletin->userinfo);
$editorid = construct_edit_toolbar(
'',
0,
'',
false,
false,
false
); Faites bien gaffe de bien changer vos fonctions si elles sont deja placées plus haut (genre $phrasegroups = array(...) sinon il va vous retourner une erreur )

Ensuite il faut afficher la bloc wysiwyg (dans un formulaire hein ;) sinon ca ne sert pas a grand chose ! ), idealement comme ca :

print_label_row($vbphrase['news_comments'], $messagearea);Au traitement du formulaire, il vous faut declarer votre variable message du type STRING, comme ceci donc :

'message' => TYPE_STRet de lui faire subir le traitement adequat avant de l'enregistrer dans la BD


require_once(DIR . '/includes/functions_wysiwyg.php');

$mess=convert_wysiwyg_html_to_bbcode($vbulletin->GPC['message'], 1);
$mess= convert_urlencoded_unicode($mess);
$mess= htmlspecialchars_uni($mess);
pour enfin l'enregistrer dans la BD, mais la attention enregistrez bien cette variable


$db->escape_string($vbulletin->GPC['message'])
Bon je ne sais pas pq il ne faut pas enregistrer $mess, je viens de me rendre compte de ca, et apparement si on change, ca ne marche pas donc bon, defois faut pas chercher a comprendre, et comme il commence a se faire tres tard ... byby