Re: Free Nodelet Hack: a graphical editor for composing nodes

As of December 26, 2010, the files referenced in the code above seem no longer available, even through the Wayback Machine.

I note, however, that versions 2.3.0 and 3.3.1 of Ext JS are available through Sencha in an Open Source Version. Prototype is, of course, still located here.

That only leaves perlmonks.htmleditor.0.01.js and perlmonks.htmleditor.dialog.0.01.js, which I include below (from my personal archive) for future reference:

perlmonks.htmleditor.0.01.js :

// initialize quicktips
Ext.QuickTips.init();

Ext.namespace('Perlmonks');

Perlmonks.HtmlEditor = Ext.extend( Ext.form.HtmlEditor, { 
    enableAlignments: false,
    enableLinks: false,
    enablePMLinks: false,
    createToolbar : function(editor){
        Perlmonks.HtmlEditor.superclass.createToolbar.call(this, edito
+r);
        this.tb.items.item('backcolor').hide();
    },
    
    setValue : function(v){
    
        
        v = v.replace(/\n/g, String.fromCharCode(222));
        
        while ( v.match(/<code>(.+?)<\/code>/i) ) 
        { 
            v = v.replace(/<code>(.+?)<\/code>/ig, escapeCode(RegExp.$
+1)); 
        }
        
        while ( v.match(/<c>(.+?)<\/c>/i) )
        {
            v = v.replace(/<c>(.+?)<\/c>/ig, escapeCode(RegExp.$1));
        }
        
        v = v.replace(new RegExp(String.fromCharCode(222), 'g'), "\n")
+;

        
        Perlmonks.HtmlEditor.superclass.setValue.call(this, v);
    },
    
    getValue : function(){
        
        var v = Perlmonks.HtmlEditor.superclass.getValue.call(this);

        v = v.replace(/\n/g, String.fromCharCode(222));

        while ( v.match(/<pre class="code">(.+?)<\/pre>/) )
        {
            v = v.replace(/<pre class="code">(.+?)<\/pre>/g, deEscapeC
+ode(RegExp.$1));
        }

        v = v.replace(new RegExp(String.fromCharCode(222), 'g'), "\n")
+;

        return v;
    },
    
    getDocMarkup : function(){
        return '<html><head><style type="text/css">body{border:0;margi
+n:0;padding:3px;height:98%;cursor:text;} .code { font-family: Courier
+, "Courier New", monospace }</style></head><body></body></html>';
    }
    

});

function deEscapeCode (txt)
{
    txt = txt.replace(/&lt;/g, '<'); txt = txt.replace(/&gt;/g, '>');
    txt = txt.replace(/<br>/g, "\n");
    return String.format("<code>{0}</code>", txt);
}

function escapeCode (txt)
{
    txt = txt.replace(/</g, '&lt;'); txt = txt.replace(/>/g, '&gt;');
    
    return String.format('<pre class="code">{0}</pre>', txt);
}

function find_my_ta ()
{
    var a = document.getElementsByTagName('textarea');

    for (var i=0; i<a.length;i++)
    {
        var m = a.item(i).attributes;
        
        for (var j=0; j<m.length; j++)
        {
            if ( m.item(j).nodeName=="name" && String(m.item(j).nodeVa
+lue).match( /(note_doctext|setfreenodelet)/ ) )
            {
                return a.item(i);
            }
        }
    }
}
[download]

perlmonks.htmleditor.dialog.0.01.js :

// find the textare of the current page and add a a link to show the h
+tml editor dialog
var ta = find_my_ta();
Ext.DomHelper.insertAfter(ta, { tag: 'p', html: '<a href="" id="show_h
+tml_edit">html edit</a>' });

// the editor dialog
var ed = new Ext.Window({
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',
    maximizable: true,
    plain: true,
    items: new Perlmonks.HtmlEditor({
        id: 'html_editor'
    }),
    buttons: new Array
    (
        {
            text:'Ok',
            handler: function(){
                ta.value = Ext.getCmp('html_editor').getValue();
                ed.hide();
            }
        },
        {
            text: 'Cancel',
            handler: function(){
                ed.hide();
            }
        }
    )
});

ed.on('show', function(){
Ext.getCmp('html_editor').setValue(ta.value);
});

Ext.get('show_html_edit').dom.onclick = function (event)
{
    try
    {
        ed.show();
    }
    catch (e)
    {
        alert(e);
    }
    
    return false;
};
[download]

Of course, since time has elapsed between versions of all of the above, tweaking may be needed. YMMV.

HTH,

planetscape

Comment on Re: Free Nodelet Hack: a graphical editor for composing nodes Select or Download Code


Don't ask to ask, just ask
	PerlMonks