Blockquote / cite / address tag tool

[TimJH]

Is it possible to configure EditLive to wrap selected text in a specified tag?  We would like tools for: "blockquote", "cite" and "address" tags.

Thanks

[Dylan Just]

Hi,

This is a feature you could create using a custom menu item or toolbar button, and a little bit of Javascript.

1. Create a custom toolbar/menu item in the configuration xml file
http://www.ephox.com/developers/editliveforjava/v60/index.asp?pageURL=RefHTML/custommenuitem.htm 

2. Set this item to action="raiseEvent", and set the "value" parameter to the name of a Javascript function.

3. The javascript function would call the GetSelectedText method of the EditLive javascript object, passing the name of a js callback function.
http://www.ephox.com/developers/editliveforjava/v60/index.asp?pageURL=RefHTML/getselectedtext_function.htm

4. The callback function accepts a single parameter, which holds the value of the selected text. Surround this text in html tags (eg "<blockquote>" + text + "</blockquote>"), then pass that to the InsertHTMLAtCursor javascript function.

All in all, you're looking at 1 line in the xml config, plus two very simple javascript functions. If you have any trouble with this, please look up the EditLive docco, or feel free to pass any questions to the liveworks list.

Regards,

Dylan Just
Software Engineer
Global: [phone] x705  Australia: [phone]
www.ephox.com





-----Original Message-----
From: liveworks-bounces@... [mailto:liveworks-bounces@...] On Behalf Of TimJH
Sent: Friday, 16 May 2008 11:45 PM
To: liveworks@...
Subject: [Liveworks] Blockquote / cite / address tag tool


Is it possible to configure EditLive to wrap selected text in a specified
tag?  We would like tools for: "blockquote", "cite" and "address" tags.

Thanks


--
View this message in context: http://www.nabble.com/Blockquote---cite---address-tag-tool-tp17275093p17275093.html
Sent from the LiveWorks! mailing list archive at Nabble.com.

_______________________________________________
LiveWorks mailing list
LiveWorks@...
http://liveworks.ephox.com/mailing-list/
_______________________________________________
LiveWorks mailing list
LiveWorks@...
http://liveworks.ephox.com/mailing-list/

[TimJH]

Hi, here's an update for anyone who may be looking to do the same or similar.

I am working with EditLive with Rhythmyx CMS, so I didn't need to write the code to get the EditLive instance, or get the selected text.  However, I found that it is necessary to insert a delay into the JavaScript code to allow these functions time to complete, before my functions ran.  This is my final code...

 function blockQuoteTool()
 {
  _editLiveInstance.GetSelectedText("ephoxSelectedText");
 // need to pause for a short while to allow the function to work
   setTimeout("wrapTag('blockquote')",350);
 }
 
 function citeTool()
 {
  _editLiveInstance.GetSelectedText("ephoxSelectedText");
   setTimeout("wrapTag('cite')",350);
 }
 
 function addressTool()
 {
  _editLiveInstance.GetSelectedText("ephoxSelectedText");
   setTimeout("wrapTag('address')",350);
 }
 
function wrapTag(tag)
{
   _editLiveInstance.InsertHTMLAtCursor(
                encodeURIComponent("<"+ tag + ">" +  ephoxText + "</" + tag +">")
                );  
}

Hope that helps!

[Adrian Sutton]

> I am working with EditLive with Rhythmyx CMS, so I didn't need to write the
> code to get the EditLive instance, or get the selected text.  However, I
> found that it is necessary to insert a delay into the JavaScript code to
> allow these functions time to complete, before my functions ran.  This is my
> final code...

Thanks for posting this. One suggestion I'd have is to use a dedicated
callback function instead of just inserting a delay, otherwise it is
possible that getting the selected text might take longer than your delay.
Additionally, we don't want to make the user wait longer than it actually
needs.

So for blockQuote you'd have:

function blockQuoteTool()
{
  _editLiveInstance.GetSelectedText("wrapBlockquote");
}

function wrapBlockquote(selectedText)
{
  wrapTag('blockquote', selectedText);
}

function wrapTag(tag, selectedText)
{
  _editLiveInstance.InsertHTMLAtCursor(
    encodeURIComponent("<"+ tag + ">" +  selectedText + "</" + tag +">")
}

You could probably get clever and combine the first two functions:

function blockQuoteTool(selectedText) {
  if (selectedText) {
    wrapTag('blockquote', selectedText);
  } else {
    _editLiveInstance.GetSelectedText("blockQuoteTool");
  }
}

Even better might be to use GetSelectedText straight from the toolbar
button:
<customToolbarButton name="blockquote" action="GetSelectedText"
value="blockQuoteTool" text="Insert Block Quote" />

then the function would be:

function blockQuoteTool(selectedText) {
  wrapTag('blockquote', selectedText);
}

Regards,

Adrian Sutton
______________________
Adrian Sutton, CTO
UK: [phone]  US: [phone] x717
Ephox <http://www.ephox.com/>
Ephox Blogs <http://planet.ephox.com/>, Personal Blog
<http://www.symphonious.net/>

_______________________________________________
LiveWorks mailing list
LiveWorks@...
http://liveworks.ephox.com/mailing-list/