Beefy Boxes and Bandwidth Generously Provided by pair Networks
No such thing as a small change
 
PerlMonks  

Free Nodelet Hack: a graphical editor for composing nodes

by holli (Monsignor)
on Mar 06, 2008 at 20:36 UTC ( #672579=note: print w/replies, xml ) Need Help??


in reply to Obtruding Writeup Formatting Tips

This hack "inject" a link directly unter the textarea which, when clicked, will popup a dialog with a graphical Html-Editor.

There's currently a bug in the support for code tags, it will destroy every br tag within code tags.

To use this, put the below code in your free nodelet.

<link rel="stylesheet" type="text/css" href="http://hollihazhomepage.n +et/ext/resources/css/ext-all-mod.css"> <script type="text/javascript" src="http://hollihazhomepage.net/ext/ad +apter/prototype/prototype.js"></script> <script type="text/javascript" src="http://hollihazhomepage.net/ext/ad +apter/prototype/ext-prototype-adapter.js"></script> <script type="text/javascript" src="http://hollihazhomepage.net/ext/ex +t-all-debug.js"></script> <script type="text/javascript" src="http://hollihazhomepage.net/pm/per +lmonks.htmleditor.0.01.js"></script> <script type="text/javascript" src="http://hollihazhomepage.net/pm/per +lmonks.htmleditor.dialog.0.01.js"></script>

Todo:
  • add button for code-tags
  • add button for readmore-tags
  • add button for spoilers
  • possibilty to integrate in the page instead of dialog
  • add support for links (cpan, wp, etc.)

holli, /regexed monk/
<textarea style="width:500px;height:300px;" autocomplete="off" id="html_editor" name="html_editor">

Replies are listed 'Best First'.
Re: Free Nodelet Hack: a graphical editor for composing nodes
by planetscape (Chancellor) on Dec 26, 2010 at 09:26 UTC

    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); } } } }

    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; };

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

    HTH,

    planetscape

      What's the current status of this? Does anyone have it working?

      Thanks...

      I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.
Re: Free Nodelet Hack: a graphical editor for composing nodes
by Sewi (Friar) on Jan 04, 2012 at 06:12 UTC

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://672579]
help
Chatterbox?
Discipulus without Corion and with choroba in another timezone the monastery was silent.. I was silbing alone in the cloister
[choroba]: Yes, I feel alone in the cyberspace...
[choroba]: Not many occasions to talk to my wife, either :-(
Discipulus s/silbing/whistle/ dunno from where this word was in my mind..
[Discipulus]: lost in time in space and in the meaning (rocky horror picture show)
[Corion]: Discipulus: Yeah, a short vacation on the Canary islands (Lanzarote). Always great to be in the warmth and sun, from a cold and rainy February here ;)
[Corion]: choroba: Yeah, you have to find a time for the regular skype (or whatever) meetup, I imagine that's hard

How do I use this? | Other CB clients
Other Users?
Others imbibing at the Monastery: (7)
As of 2017-02-22 08:44 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Before electricity was invented, what was the Electric Eel called?






    Results (325 votes). Check out past polls.