[PhpBB2] [Toutes versions] Activer la prévisualisation directe

Salut Stéphane,

pour activer cette fonction,il va falloir modifier quelque peu le script (enfin du style)

On va supprimer le min-height de 18px :

Code:

<div class="postbody"style="min-height:18px;"></div>

Concernant la hauteur de la fenêtre de prévisualisation,elle sera donc presque inexsistante car vide par défaut.
Il faut la laisser ainsi car sinon, la fenêtre de prévisualisation sautera a l'insertion de Smileys.

Le script modifié:

Code:

$(function() {

                    'SyncEditor Version v0.6 :copyright:️2016';
                    'Developed by Ace 1';
                    'All rights reserved.';
               
                    var lang = {
                          preview: 'Prévisualisation', // ALL VERSIONS
                          subject: 'Sujet', // PHPBB2
                          appearance: 'Voici comment votre message apparaîtra une fois soumis' // PUNBB
                        },
                        select_code = false,
                        preview_button_on = false;
               
                    if ((/\/t\d+/.test(window.location.href) || /\/(post|privmsg|(post\?(f|t|p)=\d+&mode=(newtopic|reply|quote|editpost)))/.test(window.location.href)) && $.sceditor) {
               
                        if ($.sceditor) {
                            var preview,
               
                                version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : '',
               
                                simplePreview = [
                                  '<br /><table class="forumline preview" width="100%" border="0" cellspacing="0" cellpadding="0"style="background-color:transparent;"><tbody><tr><th class="thHead" height="25">' + lang.preview + '</th></tr><tr><td class="row1"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td><div class="postbody"></div></td></tr></tbody></table></td></tr><tr><td class="spaceRow" height="1"style="border:none;"></td></tr></tbody></table><br clear="all">',
                                    '<div id="preview" class="post row2"><div class="h3">' + lang.preview + '</div><div class="content" style="min-height:18px;"></div></div>',
                                    '<div class="main-head clearfix preview"><p class="h2">' + lang.preview + '</p></div><div class="main-content topic" style="text-align: left;"><div class="post"><div class="postmain" style="margin-left: 0;"><div class="posthead"><h2>' + lang.appearance + '.</h2></div><div class="postbody"><div class="post-entry"><div class="entry-content"></div></div></div></div></div></div>',
                                    '<div id="preview" class="post borderwrap" style="background-color: #e4e6e9"><div class="maintitle clearfix"><h3>' + lang.preview + '</h3></div><div class="post-entry row1"style="min-height:18px;"></div></div>',
                                    '<div id="preview" class="content-block post"><div class="title">' + lang.preview + '</div><div class="post-inner"><div class="postbody"><div class="content"></div></div></div></div>'
                                ][version],
               
                                createSimplePreview = function() {
                                    version == 0 // PHPBB2
                                        ? $('form[id="quick_reply"]').before(simplePreview)
                                        : (
                                          version == 1 || version == 4 // PHPBB3 && EDGE
                                            ? $('#quick_reply').after(simplePreview)
                                            : (
                                              version == 2 // PUNBB
                                                ? $('#quick_reply').before(simplePreview)
                                                : (
                                                  version == 3 // INVISION
                                                    ? $('#qpost').after(simplePreview)
                                                    : ''
                                                )
                                            )
                                        )
                                },
               
                                advancedPreview = [
                                  '<table class="forumline preview" width="100%" border="0" cellspacing="0" cellpadding="0"style="background-color:transparent;"><tbody><tr><th class="thHead" height="25">' + lang.preview + '</th></tr><tr><td class="row1"><span class="postdetails"><img src="https://2img.net/i/fa/empty.gif" alt="Post" title="Post" border="0">' + lang.subject + ': <img src="https://2img.net/i/fa/empty.gif" alt="" border="0"><span style="user-select: none !important; color: transparent !important; text-shadow: none !important; background: none !important;"><3</span></span></td></tr><tr><td class="row1"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td><div class="postbody"style="min-height:18px;"></div></td></tr></tbody></table></td></tr><tr><td class="spaceRow" height="1"style="border:none;"><img src="https://2img.net/i/fa/empty.gif" height="1" width="1" alt=""></td></tr></tbody></table><br clear="all">',
                                    '<div id="preview" class="post row2"><div class="inner"><span class="corners-top"><span></span></span><div class="postbody"><div class="h3">' + lang.preview + '</div><div class="content"style="min-height:18px;"></div></div><span class="corners-bottom"><span></span></span></div></div>',
                                    '<div class="main-head clearfix preview"><p class="h2">' + lang.preview + '</p></div><div class="main-content topic"><div class="post"><div class="postmain"><div class="posthead"><h2>' + lang.appearance + '.</h2></div><div class="postbody"><div class="user"><h4 class="user-ident"><span class="username">' + _userdata.username + '</span></h4></div><div class="post-entry"><div class="entry-content"></div></div></div></div></div></div>',
                                    '<div id="preview" class="post borderwrap"><div class="maintitle clearfix"><h3>' + lang.preview + '</h3></div><div class="postbody"><div class="post-entry row1"style="min-height:18px;"></div></div></div>',
                                    simplePreview + '<hr>'
                                ][version],
               
                                createAdvancedPreview = function() {
                                    version == 0 // PHPBB2
                                        ? $('form[action="/post"]').before(advancedPreview)
                                        : (
                                          version == 1 || version == 4 // PHPBB3 && EDGE
                                            ? $('h1.page-title').after(advancedPreview)
                                            : (
                                              version == 2 // PUNBB
                                                ? $('form.frm-form').prepend(advancedPreview)
                                                : (
                                                  version == 3 // INVISION
                                                    ? $('ul#navstrip').after(advancedPreview)
                                                    : ''
                                                )
                                            )
                                        )
                                },
               
                                actualContainer = [
                                    '.preview .row1 table .postbody',
                                    '#preview .content',
                                    /* form.frm-form */ '.preview .entry-content',
                                    '#preview .post-entry',
                                    '#preview .content'
                                ][version],
                           
                                removeandreplaceCurrent = function() {
                                  preview = actualContainer.split(/\s/).shift();
                                  $(preview).remove();
                                  createAdvancedPreview();
                             
                                  if (version == 4) $(preview).next().remove();
                                };
               
                            if ( version == 0 && document.forms.post.subject ) {
                                document.forms.post.subject.oninput = function() {
                                    var v = this.value;
                                    $('span.postdetails').eq(0).contents().filter(function() {return this.nodeType == 3})[0].textContent = 'Sujet: ' + (v == 'undefined' ? '' : v);
                                };
                            }
               
                         
                     
                            /(\/t\d+)|privmsg/.test(window.location.href)
                                ? createSimplePreview()
                                : (
                                  /\/post\?(f|t|p)=\d+&mode=(newtopic|reply|quote|editpost)/.test(window.location.href)
                                      ? createAdvancedPreview()
                                      : removeandreplaceCurrent()
                                )
                        }
               
                        $('#text_editor_textarea').ready(function() {
                          if (_userdata.user_desktop) return false;
                            var instance = $('#text_editor_textarea').sceditor('instance'),
                                sceditorContent, previewContent,
               
                                convert = function() {
                                    sceditorContent = instance.val();
                                    previewContent = instance.fromBBCode(sceditorContent, false);
                                    $(actualContainer).html(previewContent);
                         
                                    // Quote Parsing
                                    if (/\[quote.*\]/i.test(sceditorContent) && /\[\/quote\]/i.test(sceditorContent)) {
                                      if (version == 0) {
                                          $(actualContainer)[0].innerHTML = $(actualContainer)[0].innerHTML
                                            .replace(/\<blockquote\>/g, '<dl class="codebox">')
                                            .replace(/\<\/blockquote\>/g, '</dl>')
                                            .replace(/\<cite\>/g, '<dt><span class="genmed"><b><a href="#" rel="nofollow">')
                                            .replace(/\<\/cite\>/g, '</a> a écrit:</b></span></dt>');
               
                                          $('dl.codebox > dt', actualContainer).each(function() {
                                              $(this).parent().contents().filter(function() {
                                                  return this.tagName != 'DT' && this.className != 'code'
                                              }).wrapAll('<dd class="quote" />');
                                          });
               
                                          $('dl.codebox', actualContainer).each(function() {
                                              $(this).parent().contents().filter(function() {
                                                  return this.className != 'codebox'
                                              }).wrapAll('<span class="postbody" />');
                                          });
                                      } else {
                                          $('blockquote', actualContainer).wrapInner('<div />');
                                          $('blockquote cite', actualContainer).wrapInner('<a href="#" rel="nofollow" />');
                                          $('blockquote cite', actualContainer).append(' a écrit:');
                                      }
                                    }
                               
                                    // Code Parsing
                                    if (/\[code\]/i.test(sceditorContent) && /\[\/code\]/i.test(sceditorContent)) {
                                      var codeTitle = 'Code:' + (select_code ? selection : '');
                                      $('code', actualContainer).wrap('<dl class="codebox" />');
               
                                      $('.codebox code', actualContainer).before('<dt>' + (version == 0 ? '<span class="genmed"><b>' + codeTitle + '</b></span>' : codeTitle) + '</dt>').wrap('<dd' + (version == 0 ? ' class="code"' : '') + ' />');
                                      $('dd.code', actualContainer).wrapInner('<div class="cont_code" />');
                                      if ($('div.cont_code', actualContainer)[0]) ($('div.cont_code', actualContainer)[0].firstChild).contents().unwrap('code');
                                    }
               
                                    // Spoiler
                                    if (/\[spoiler.*\]/i.test(sceditorContent) && /\[\/spoiler\]/i.test(sceditorContent)) {
                                      $.sceditor.plugins.bbcode.bbcode.set('spoiler', {
                                          tags: {
                                              'div': {
                                                  'class': ['spoiler']
                                              }
                                          },
                                          format: '[spoiler]{0}[/spoiler]',
                                          html: function(token, attrs, content) {
                                              var a = attrs.defaultattr,
                                                  c = content;
                                              if (a == undefined || a == '' || a == '"' || a == '\'') a = 'Spoiler';
                                              if (a && (a.charAt(0) == '"' || a.charAt(0) == '\'')) a = a.replace(/("|')/, '');
               
                                            c = (version == 0 ? '<dt style="cursor: pointer;">' + a + ':</dt><dd class="spoiler_closed">&nbsp;</dd><dd><div class="spoiler_content hidden">' + c + '</div></dd>' : '<dt style="cursor: pointer;">' + a + ':</dt><dd><div class="spoiler_content">' + c + '</div></dd>');
               
                                              return '<dl class="codebox spoiler">' + c + '</dl>';
                                          }
                                      });
                                    }
               
                                    // Smilies
                                    var s, s2, re;
               
                                    for (s in smileys) {
                                        if ($(actualContainer).html() && $(actualContainer).html().indexOf(s) != -1) {
                                            /\W/.test(s.replace(/:/g, '')) ? s2 = s.replace(/(.{1})/g, '\\$1') : s2 = s;
                                            re = new RegExp(s2, 'gi');
                                            $(actualContainer).html($(actualContainer).html().replace(re, '<img src="' + smileys[s] + '" class="smiley" />'));
                                        }
                                    }
                               
                                    // Headings For PHPBB2 && PunBB
                                    if (version == 0 || version == 2) {
                                        $.sceditor.plugins.bbcode.bbcode.set('h2', {tags: { 'h2': null }, format: '[h2]{0}[/h2]',html: '<h2 class="post-content">{0}</h2>'});
                                        $.sceditor.plugins.bbcode.bbcode.set('h3', {tags: { 'h3': null }, format: '[h3]{0}[/h3]',html: '<h3 class="post-content">{0}</h3>'});
                                        $.sceditor.plugins.bbcode.bbcode.set('h4', {tags: { 'h4': null }, format: '[h4]{0}[/h4]',html: '<h4 class="post-content">{0}</h4>'});
                                    }
               
                                    // Scroll
                                    if (/\[scroll.*\]/i.test(sceditorContent) && /\[\/scroll\]/i.test(sceditorContent)) {
                                      $.sceditor.plugins.bbcode.bbcode.set('scroll', {
                                          tags: {
                                              'marquee': null
                                          },
                                          format: '[scroll]{0}[/scroll]',
                                          html: function(token, attrs, content) {
                                              var c = content;
                                              c = '<marquee>' + c + '</marquee>';
               
                                              return '<span>' + c + '</span>';
                                          }
                                      });
                                    }
                                    // Updown
                                    if (/\[updown.*\]/i.test(sceditorContent) && /\[\/updown\]/i.test(sceditorContent)) {
                                      $.sceditor.plugins.bbcode.bbcode.set('updown', {
                                          tags: {
                                              'marquee': {
                                                  'direction': null
                                              }
                                          },
                                          format: '[updown]{0}[/updown]',
                                          html: function(token, attrs, content) {
                                              var c = content;
                                              c = '<marquee direction="up" scrollamount="1" style="height: 60px;">' + c + '</marquee>';
               
                                              return '<span>' + c + '</span>';
                                          }
                                      });
                                    }
                                };
               
                            /\/(post|privmsg|(post\?(f|t|p)=\d+&mode=(newtopic|reply|quote|editpost)))/.test(window.location.href) ? convert() : '';
               
                            instance.bind('focus blur keydown keyup nodechanged', function() { convert(); });
               
                            $('.sceditor-button').not('.sceditor-button-source').click(function() {
                                convert();
                                $('.sceditor-dropdown div').find('.button', '.sceditor-fontsize-option', 'sceditor-header-option').on('click', function() {
                                // $('.sceditor-dropdown div input.button').add('.sceditor-header-picker *').add('.sceditor-dropdown a.sceditor-fontsize-option').add('.sceditor-dropdown a.sceditor-fontsize-option > *').on('click', function() {
                                    convert()
                                });
                                $('.sceditor-color-option').click(function() { setTimeout(convert, 100) });
                                // $('.smiley-element > img').click(function() { setTimeout(convert, 100) });
                            });
               
                        });
                   
                        /* Preview Option -- Coming Soon
                        var toggle_preview_html = '<label>Toggle Preview <input type="checkbox" id="preview-content"><span class="checkbox-toggle"></span></label>';
                     
                        $('#preview').find('.tHead, .h3, .h2, h3, .title').first().append(toggle_preview_html);
                        if (!localStorage.previewHTML || localStorage.previewHTML != 'true') {
                          // localStorage.previewHTML == 'false' || undefined
                          $('#preview').find('.tHead, .h3, .h2, h3, .title').first().next().remove();
                        } else {
                          $('#preview').find('.tHead, .h3, .h2, h3, .title')first().addClass('on');
                          $('input#preview-content').prop('checked', true);
                        }
                     
                        $('#preview-content').click(function() {
                          var h = $(this).parent('label').parent(),
                              c = $(actualContainer);
                       
                          c[0] ? c.remove() : h.after('<div class="content" style="min-height: inherit"></div>');
                          localStorage.previewHTML = c[0] ? false : true;
                          h.toggleClass('on');
                        });
                     
                        if (!$('[name="preview-content-styles"]')[0]) $('head').append('<style type="text/css" name="preview-content-styles">#preview .h3{color:red}#preview .h3.on{color:#0F0}#preview .h3 label{font-size:.9em;line-height:20px;font-weight:400;text-transform:none;position:relative;margin:0 10px}#preview .h3 label:before{position:absolute;content:"";background-color:#80A5C2;width:1px;height:100%;top:0;left:-6px}span.checkbox-toggle,span.checkbox-toggle:before{border-radius:50px}span.checkbox-toggle{position:relative;border:1px solid;width:30px;height:18px;background-color:red;display:inline-block;vertical-align:top;overflow:hidden;cursor:pointer}span.checkbox-toggle:before{content:"";position:absolute;height:14px;width:14px;top:50%;left:2px;transform:translateY(-50%);background-color:#600;transition:left .4s,color .75s,background-color .75s}input:checked+span.checkbox-toggle{background-color:#0F0}input:checked+span.checkbox-toggle:before{left:12px;background-color:#060}label:active span.checkbox-toggle:before{transition:all .2s;transform:translateY(-50%) scale(.5)}#preview-content{display:none}</style>');
                        */
                 
                        if (version == 4) $('head').append('<style type="text/css">#quick_reply + #preview .post-inner { margin: 0 5px; }</style>');
                        if (version == 1) $('head').append('<style type="text/css">[name=quickreply]+.h3+br+#quick_reply input[type=submit]{margin-bottom:25px}#quick_reply+#preview{padding:5px 10px}#quick_reply+#preview .h3{margin:3px 0}#quick_reply+#preview .content{font-size:1.3em;padding:1px}#preview .content font {line-height: normal}</style>');
                        !preview_button_on ? $(document.forms.post.preview).remove() : '';
                    }
               
                    /*** Progress
                    var logs = {
                        v0.1 : 'Developed SyncEditor',
                        v0.2 : 'Implemented Smilies -- Bug fixes for phpbb2',
                        v0.3 : 'Optimized for FAE -- Smilies are completely operational -- Fixed quoting problems -- Minor bug fixes for all versions',
                        v0.4 : 'Language data',
                        v0.5 : 'Fully optimized for FAE -- Fixed preview button bug',
                        v0.6 : 'Fixed instances of lag when typing a lot of text -- Colors now display automatically -- Minor bug fixes'
                    };
                    ***/
                });


Puis ajoutes dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:

Code:


.forumline.preview .postbody img.smiley{width:auto!important;height:auto!important;}


Penses a cliquer sur le bouton

Bonjour Phillippe,
cela fonctionne à merveille  .

Un grand merci pour cette aide 

De rien Stéphane,