Page 1 sur 1

[phpBB 3.0.x] Personnaliser l'éditeur de rédaction

Posté : sam. 22 oct. 2011 23:34
par Dakin Quelia
» Personnaliser l'éditeur de rédaction

A l'aide de cette documentation, vous pourrez personnaliser l'éditeur de phpBB qui est des plus basiques. Cela le rendra plus vivant.

Avant d'entamer les modifications, il est bon de faire une sauvegarde de vos fichiers.

Tout d'abord, télécharger le pack ci-dessous et mettez-le dans le dossier de votre forum.
special_editor.zip
(16.59 Kio) Téléchargé 265 fois
» Ajout d'une feuille de style

J'ai prévu une feuille de style pour l'éditeur personnalisé afin d'éviter à devoir éditer trop de fichiers. Tout ce qui doit être ajouté/modifié concernant l'éditeur passera par cette feuille.

Ouvrez le fichier « styles/{VOTRE_THEME}/theme/stylesheet.css ».

A la fin du fichier, ajoutez:

Code : Tout sélectionner

@import url("editor.css");
» Modifications template

Afin de rendre l'éditeur plus agréable et éviter certains petits soucis (comme la palette), il faut suivre ce qui suit.

Ouvrez le fichier « styles/{VOTRE_THEME}/template/posting_editor.html ».

Cherchez:

Code : Tout sélectionner

	<!-- INCLUDE posting_buttons.html -->
Remplacez par:

Code : Tout sélectionner

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/editor.js"></script>
	<!-- IF S_BBCODE_ALLOWED -->
	<div id="colour_palette" style="display: none;">
		<dl style="clear: left;">
			<dt><label>{L_FONT_COLOR}:</label></dt>
			<dd>
			<script type="text/javascript">
			// <![CDATA[
				function change_palette()
				{
					dE('colour_palette');
					e = document.getElementById('colour_palette');
					
					if (e.style.display == 'block')
					{
						document.getElementById('bbpalette').value = '';
					}
					else
					{
						document.getElementById('bbpalette').value = '';
					}
				}

				colorPalette('h', 15, 10);
			// ]]>
			</script>
			</dd>
		</dl>
	</div>
	<!-- ENDIF -->
	<div class="editorMain">
		<!-- INCLUDE posting_buttons.html -->
		<textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> tabindex="4">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
	</div>
Cherchez:

Code : Tout sélectionner

	<div id="smiley-box">
Remplacez par:

Code : Tout sélectionner

	<div id="smiley-box" style="float: right;">
Cherchez et supprimez:

Code : Tout sélectionner

	<div id="message-box">
		<textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
	</div>
» Rafraîchissement et résultat

N'oubliez pas de rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général).

Cela donnera:
02.png