Posts Tagged ‘YUI Rich Text Editor’

Cum sa-ti rasfeti vizitatorii care comenteaza pe blog?

December 23rd, 2008

Later edit:

Modificarile de mai jos functioneaza doar pentru admin. Intr-o scurta trecere in revista simt ca ar trebui modificata si allowed_tags() pentru a defini toate tagurile pe care userul obisnuit are dreptul sa le foloseasca in comentarii.

Revin cu updates. Acum imi e lene. Peace! :-)

Later edit 2:

Ideea e ca utilizatorul obisnuit are voie sa foloseasca in comentarii doar un numar prestabilit de taguri ce sunt definite in /wp-includes/kses.php si astfel ar trebui modificata ad-labam si variabila $allowedtags pentru ca functia allowed_tags(); sa raporteze corect matzul ala de taguri ce le insira wordpress dupa ce afiseaza formularul de comentarii.

Acestea fiind spuse tu care citesti pentru prima data acest articol incepi de la coada, cu editarea fisierului /wp-includes/kses.php si adaugarea urmatoarelor linii in variabila $allowedtags:

‘li’ => array(),
‘ol’ => array(),
‘p’ => array(),
’sub’ => array(),
’sup’ => array(),
‘u’ => array(),
‘ul’ => array(),
‘img’ => array(
‘alt’ => array (),
‘align’ => array (),
‘border’ => array (),
‘class’ => array (),
‘height’ => array (),
‘hspace’ => array (),
‘longdesc’ => array (),
‘vspace’ => array (),
’src’ => array (),
’style’ => array (),
‘width’ => array ()),
‘font’ => array(
‘color’ => array (),
‘face’ => array (),
’size’ => array ()),
’span’ => array (
‘class’ => array (),
‘dir’ => array (),
‘align’ => array (),
‘lang’ => array (),
’style’ => array (),
‘title’ => array (),
‘xml:lang’ => array()),
‘h1′ => array(
‘align’ => array (),
‘class’ => array ()),
‘h2′ => array(
‘align’ => array (),
‘class’ => array ()),
‘h3′ => array(
‘align’ => array (),
‘class’ => array ()),
‘h4′ => array(
‘align’ => array (),
‘class’ => array ()),
‘h5′ => array(
‘align’ => array (),
‘class’ => array ()),
‘h6′ => array(
‘align’ => array (),
‘class’ => array ()),
‘hr’ => array(
‘align’ => array (),
‘class’ => array (),
‘noshade’ => array (),
’size’ => array (),
‘width’ => array ()),

Asta ar trebui sa rezolve o parte din probleme. E posibil sa-mi fi scapat vreun butonel din Editorul ala insa si maine e o zi :-).

Succes si sa revenim acum la postul initial!


Simplu! Il lasi sa faca ravagii in comentarii :-) iar pentru asta instalezi YUI Rich Text Editor in 3 pasi:

1. Editezi fisierul header.php si adaugi inainte de a inchide tagul head codul de aici.
2. Editezi tagul body adaugand clasa yui-skin-sam pe care o poti observa lesne in acelasi fisier de mai sus.
3. Editezi fisierul comments.php in 3 etape:

  • adaugand dupa ce se inchide tagul textarea codul de aici:
  • (Nota importanta: IGNORATI prima si ultima linie din codul colorat de mai jos. Mai exact primele 5 si ultimele 2 caractere. Sunt irelevante in codul de mai jos insa pluginul care imi coloreaza mie scripturile astea nu este indeajuns de prietenos :-d)

    <?php
    
    <script>
    (function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event;
    
        var myConfig = {
            height: '300px',
            width: '630px',
            handleSubmit: true,
            animate: true,
            dompath: true,
            focusAtStart: true
        };
    
        var state = 'off';
        YAHOO.log('Set state to off..', 'info', 'example');
    
        YAHOO.log('Create the Editor..', 'info', 'example');
        var myEditor = new YAHOO.widget.Editor('editor', myConfig);
        myEditor.on('toolbarLoaded', function() {
            var codeConfig = {
                type: 'push', label: 'Edit HTML Code', value: 'editcode'
            };
            YAHOO.log('Create the (editcode) Button', 'info', 'example');
            this.toolbar.addButtonToGroup(codeConfig, 'insertitem');
    
            this.toolbar.on('editcodeClick', function() {
                var ta = this.get('element'),
                    iframe = this.get('iframe').get('element');
    
                if (state == 'on') {
                    state = 'off';
                    this.toolbar.set('disabled', false);
                    YAHOO.log('Show the Editor', 'info', 'example');
                    YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example');
                    this.setEditorHTML(ta.value);
                    if (!this.browser.ie) {
                        this._setDesignMode('on');
                    }
    
                    Dom.removeClass(iframe, 'editor-hidden');
                    Dom.addClass(ta, 'editor-hidden');
                    this.show();
                    this._focusWindow();
                } else {
                    state = 'on';
                    YAHOO.log('Show the Code Editor', 'info', 'example');
                    this.cleanHTML();
                    YAHOO.log('Save the Editors HTML', 'info', 'example');
                    Dom.addClass(iframe, 'editor-hidden');
                    Dom.removeClass(ta, 'editor-hidden');
                    this.toolbar.set('disabled', true);
                    this.toolbar.getButtonByValue('editcode').set('disabled', false);
                    this.toolbar.selectButton('editcode');
                    this.dompath.innerHTML = 'Editing HTML Code';
                    this.hide();
                }
                return false;
            }, this, true);
    
            this.on('cleanHTML', function(ev) {
                YAHOO.log('cleanHTML callback fired..', 'info', 'example');
                this.get('element').value = ev.html;
            }, this, true);
    
            this.on('afterRender', function() {
                var wrapper = this.get('editor_wrapper');
                wrapper.appendChild(this.get('element'));
                this.setStyle('width', '100%');
                this.setStyle('height', '100%');
                this.setStyle('visibility', '');
                this.setStyle('top', '');
                this.setStyle('left', '');
                this.setStyle('position', '');
    
                this.addClass('editor-hidden');
            }, this, true);
        }, myEditor, true);
        myEditor.render();
    
    })();
    </script>
    
    ?>
  • modificand dimensiunule campului in var myConfig. Aveti acolo latime si inaltime.
  • inlocuind in acelasi fisier de mai sus (comments.php):
  • acest script: textarea name=”comment” id=”comment”
    cu textarea name=”comment” id=”editor”

    Precizari

    - toate modificarile ar trebui sa dureze 2 minute fisierele header.php si comments.php putand fi editate din Dashboard.
    - e posibil sa-ti modifice din css. Dupa cum poti observa, blogului meu i-a modificat fontul. Imi e sila sa caut unde si de ce si oricum MJ spune ca arata mai linistitor. So be it. Ma gandesc ca daca as pune css-ul de la YUI mai sus de cel al blogului in header ar reveni la normal. Nu? :-)
    - daca nu te descurci mai citeste odata acest post. Nu e greu deloc…
    - precizare later edit: se editeaza style.css. si anume acolo unde e definit body.
    La mine arata asa:

    body {
    color: #000;
    background: #15191c;
    font: 80% “Trebuchet MS”, Arial, “Lucida Sans Unicode”, Tahoma, sans-serif;
    padding: 0;
    margin: 0;
    }

    Acum arata asa:

    body {
    color: #000 !important;
    background: #15191c !important;
    font: 80% “Trebuchet MS”, Arial, “Lucida Sans Unicode”, Tahoma, sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    }

    Sper ca observati cat de important e acest mic update de css.

    * Multumesc Victor!

    Conlcuzii

    Treci pe la comentarii si joaca-te :-).