I would like to add a button to the Sitecore rich text editor toolbar, specifically one that inserts the H2 element.
I know the H2 element can be inserted using the paragraph styles pulldown menu, but all my editors are now using the bold button for their headings because they don't "see" the paragraph styles pulldown. So, I want to make the H2 easily available using a toolbar button. (And maybe even removing the bold buttons, since it's not semantic at all.)
But no matter how I go through the documentation, I cannot find a good explanation on how to do this.
In addition to the guide Yan posted, here's another guide.
I found a couple of walkthroughs for this...
Sitecore v6.3 and previous: link
Sitecore v6.4: link
Make sure that you select the core database (bottom right of Sitecore desktop) so that you can see the /sitecore/system/Settings/Html Editor Profiles area.
In my article here the first step of wiring up an event to a button is in javascript. From there you can insert text or tags. You can also get the selected text and wrap it in tags. You don't need to compile anything I was just showing how you would if you needed to, but you can entirely cut that piece out and just use the editor to send whatever text you want back to the wysiwyg editor.
Related
In sitecore "content editor" we can use the "image editor" by clicking "edit image" in the data section, but in the experience editor it is not visible.
is there a way to make available for editors to use the image editor? or this behavior is a sitecore standard?
thanks for help
Picture field
I've just written it up in a blog post.
First you'll need to add a new button under
/sitecore/system/Field types/Simple Types/Image/WebEdit Buttons
You can duplicate one of the existing ones and change the icon and text yourself. Make the contents of the Click field:
chrome:field:editcontrol({command:"webedit:changeimage"})
(there's already a webedit:editimage so we can't name it that).
Open App_Config\Include\Sitecore.ExperienceEditor.config and duplicate the entry for webedit:chooseimage. Change the command name to webedit:changeimage as per above. Then change the type to the class you will create below.
If you have access to a decompiler, take a look at the existing command Sitecore.Shell.Framework.Commands.Shell.EditImage as well as the existing command
for selecting an image in Experience Editor Sitecore.Shell.Applications.WebEdit.Commands.ChooseImage. You'll see that they're similar, but unfortunately they use two different
methods of opening a dialog (Windows.RunApplication and SheerResponse.ShowModalDialog) so we can't reuse the existing class as-is. I have created a class that uses a bit of both (link below).
Create your class (eg. EditImage.cs), make it serializable and inherit from WebEditImageCommand like the other EE buttons. I have posted the full class as a gist for you.
When you select an image in the Experience Editor, you should now have an extra button in the list which opens the image editor in a modal window when clicked.
You need to do next steps, is not the most elegant way but you can do it:
In the Experience Editor, click the image that you want to edit, and in the floating toolbar that appears, click More and then Edit the related item. This opens the item in the Content Editor, from where you can scroll to the field that contains the image and click Edit image.
I have been playing around with Editframe buttons in a Sitecore 8 for a multilingual project and I have the feeling that Edit Frame buttons do not work properly on sitecore multilingual sites.
Were you able to get it working edit frame buttons with a multilingual implementation?
Is it working out of the box or do you need any special configuration?
My experience is that when I am on a localized page and I click on an EditFrame button, it will open the default language Item instead of the localised item. I am of the impression that this is what happen when you click on Edit the Related Item in the Experience Editor.
I encountered your scenario very recently.
Were you able to get it working edit frame buttons with a multilingual implementation?
Yes, all the Fields I set up within the Edit Frame Buttons in the Core worked correctly with my Multilingual Site
Is it working out of the box or do you need any special configuration?
You need to add your Field Names into the Edit Frame Button Items in the Core database, found at the out-of-the-box path; /sitecore/content/Applications/WebEdit/Edit Frame Buttons/Default/Edit. Make sure your sc:Edit component references this path in the Buttons property
You may use different Display Names of the Fields for each of your languages for ease of use in the Content Editor / Experience Editor but as long as they are display Names it should be fine. If they are not and it doesn't work I recommend putting the Field Name for each language in the Edit Frame Item.
When I click on an EditFrame button, will it open the default language Item instead than the localised item, I am of the impression that this is what happen when you click on Edit The Related item as well
No, in both instances the Item will be loaded in the correct Language as well as when you create a new Datasource Item to be referenced by your Component.
The biggest issue that is present is when Edit the Relating Item and make changes to Rich Text Editor field or TreeEx field is that when you save it, it saves it to the default enlanguage, even creating a Language Version for it if it does not exist.
I have raised this issue with Sitecore Support and they are currently investigating. When they have a fix I'll update you with their solution.
EDIT
The Support Patch to resolve the issue Edit the Relating Item saving changes to the wrong language version of the Item can be found here - https://kb.sitecore.net/articles/814090
It appears that the default behavior for the rich text editor dialog in Page Editor is to scroll the entire page back to the top. This creates bad UX on long pages, since after you're done editing, you have to scroll back down the page and figure out where the text is that you edited.
Anyone know how to make the page stay scrolled to where it was?
I am not sure if it is related, since I am not able to reproduce your problem, but it reminds me of a bug in the Sitecore client that showed up in Internet Explorer and Firefox versions, where the content tree pane would do the same (scroll up after interaction). Please take a look at this StackOverflow question for a possible solution.
Furthermore I want to give you the advice to build up pages in Sitecore using small building blocks (multiple hierarchical placeholders with small renderings). Only then you would be able to leverage the full potential of the system, regarding page editing features and personalization. Also, only then a content editor can alter the presentation in the Experience Editor (Page Editor for older versions). Putting long pages of HTML-code in a single rich text editor field isn't recommended.
I fixed it changing the positioning of the jqueryModalDialogsFrame from absolut to fixed:
#jqueryModalDialogsFrame{
position:fixed !important;
top:0px !important;
left:0px !important;
}
Could someone suggest how to hide/disable HTML tab from your Rich Text Editor on sitecore?
I had a look at this, but requires a change on Sitecore core rich text XML.
Problem with this solution is we need to modify the XML for each instance and what about upgrades?
Thanks.
In the Core database (you can switch using the icon in the bottom right next to the clock) you can go to /sitecore/system/Settings/Html Editor Profiles/*profile you want*/buttons/HTML view and deny read-access on that for your users. Alternatively, at least in Sitecore 6.5, there's a profile without the HTML view. It's called Rich Text IDE. You can set the datasource field of a Rich Text field to that one, and not have the HTML view.
That's only removing the HTML option on the bottom left though, I'm not sure how to remove the Edit HTML option you have before you've opened the RTE itself (where you have Show Editor/ Suggest Fix / Edit Html). Looking at This question it might be you'll have to change the XML anyway.
The way we've got upgrades and different instances handled is by having the changed file in source control, and making sure we include it when building a deployment package.
Adding onto Trayek's great answer - you can remove access to the "Edit HTML" as outlined by Alex Shyba below:
Go to the core database, locate the field definition item:
/sitecore/system/Field types/Simple Types/Rich Text/Menu/Edit Html
On the Security Tab, click “Assign” and select the role you don’t want this option to be available to. Deny inheritance of this item or specify other security settings that make sense for your needs.
I added "Everyone" and then selected the "X" by Inheritance for Items, and the "Edit HTML" option was removed.
Taken from:
http://sitecoreblog.alexshyba.com/2009/10/quick-tip-remove-edit-html-option-for.html
I'm been working with Sitecore for a while, but this is my first time on the page editor.
So, I go to my sublayout and I place a sitecore tag instead a .net tag
<sc:Text ID="txtContent" Field="Content" runat="server"/>
Content is the normal content field on the sitecore page.
When I go to the page editor, I'm able to see the correct content and do some editing but the save button is disabled and my changes are not saved at all
I'm I missing something very basic here?
this is a screen cast on what I'm doing
http://screencast.com/t/0itqgjGVQx8
Update: After including jquery.noconflict constructs, the execution moves to the handler function in the ribbon correctly. BUT it seems that the button itself is disabled. Is it possible to enable/disable the button? is it disable on specific situations? if so how can I enable it.
There might be invalid html appearing. Check you hints for buttons, etc. There might be non-escaped texts on the page.
I've resolve this some time ago... in the sublayout definition on sitecore there was a redundant/wrong compatible rendering definition. Once I removed that, the save button appeared and the sublayout started to work as expected