15 December 2010

Using jQuery in Sitecore's Content Editor

It’s spring break and I wasn’t going to make any blog posts this week, but I just ran across this post ( http://www.markvanaalst.net/2010/02/18/using-jquery-in-custom-fields/ ) from Mark van Aalst concerning using jQuery in Sitecore’s content editor and I just had to comment on it...
I have tried to do this a few times in the past with little to no success. The problem is that, as Mark’s post points out - you need to call $.noConflict() first thing before any other script libraries get loaded. The key that he found in Alexey Rusakov’s FiedTypes module source code (available at http://trac.sitecore.net/FieldTypes/ by the way) was exactly how to do that... You can insert a custom processor into the renderContentEditor pipeline to output the jQuery script first thing. And the truly brilliant part - Alexey is ensuring it is the very first processor in the pipeline by using the new auto-include config file feature in Sitecore 6! (if you haven’t seen that feature before either, check out http://sdn.sitecore.net/faq/administration/how%20to%20auto-include%20configuration%20files.aspx on SDN and be amazed)
Mark’s post didn’t 100% put the pieces together for me, so I’ll spell it out here:
Step 1) Create a pipeline processor class to add jQuery to the page’s <head>. Mark’s post has a great example, so I won’t repeat it here.
Step 2) Create a new .config file in /App_Config/Include. The contents just need to look something like this:
<configuration xmlns:x=“http://www.sitecore.net/xmlconfig/“>
  <sitecore>
    <pipelines>
      <renderContentEditor>
        <processor x:before=“*[1]” type=“Your.Type,Your.Assembly” />
      </renderContentEditor>
    </pipelines>
  </sitecore>
</configuration>
The magic bit is the before=“*[1]”. This is explained in the SDN link above, but in case you can’t get to that - you can specify any XPath query (relative to the attribute’s node’s parent). *[1] represents the first child, so in this instance we are asking Sitecore to insert our new processor before the existing first child of the <renderContentEditor> element. This ensures it runs first before any other processor has a chance to inject a script into the content editor page.
In the past when trying to get fancy with a custom field type, I’ve had to fall back on using prototype and give up fancy stuff like scriptaculous or jquery while working in the content editor. No more! With this technique, you can always apply jQuery’s $.noConflict() early on and not worry about some other library calling the wrong $() implementation and causing weird errors. Thank you, Mark! And thank you Alexey for sharing your source!
Author :-  Kevin

Source:-http://www.dotnetmafia.com/blogs/kevin/archive/2010/03/19/using-jquery-in-sitecore-s-content-editor.aspx

jQuery conflicts with PageEditor

There is such problem, indeed. It is caused by the conflict with Prototype.js that most of Page Editor, including designer and debugger uses. It can be simply worked around by overriding the $-function by calling "jQuery.noConflict()".
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
 
<script type="text/javascript">
 
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
});
 
</script>
More about that on the jQuery website.

14 December 2010

Customize Sitecore Page Edit buttons

his is mostly for my own reference but I decide it to post here since this blog has been quiet for 2 years.

Here you find the page edit buttons:
Core: /sitecore/system/setttings/html editor profiles/rich text default_old/webeditButtons/ (weird that they use default_old but thats what they do - and that took me a while to figure out )

duplicate an item there and you have a new button.

In the datasection you find 3 options:
Icon - self explanatory
Tooltip - selfexplatory
Click: A call to a javascript function, f.eks.:
Striketrough: javascript:Sitecore.WebEdit.execute("strikeThrough", true, true);
Italic: javascript:Sitecore.WebEdit.execute("Italic", true, true);

And so on. All the execute commands listed here: https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla (I only tested it with strikeThrough, but it should work)

Regarding calling sitecore functionality. There is only created 2 functions in the js file: (website/shell/applications/weEdit.js)

Insert image:
javascript:Sitecore.WebEdit.insertImage($JavascriptParameters)

Insert Link:
javascript:Sitecore.WebEdit.insertLink($JavascriptParameters)

So if we wan't to make something more that that we would have to write new functions for that.

Thats it. :-)
Author:-Jukka-Pekka Keisala
Source :- http://thesitecoreexperience.blogspot.com/2010/11/customize-sitecore-page-edit-buttons.html