I was experimenting with RTE buttons and found that the copy pasting from word to RTE allows all styles to be intact. So i read a post and got rid of the extra formatting. Now i want to deal with blank spaces and line breaks. So, with some analysis i have decided to allow:
One blank space for single line break. Statements to be shown as single paragraph.For example
"This is new. </br> This is weird." should become "<p>This is new. This is weird.</p>"
If multiple line breaks are found, then all break separated statements should act as single paragraph with only single break between them. For example
"This is new. </br></br></br> This is weird." should become "<p>This is new.</p> </br> <p>This is weird.</p>"
This would be very efficient for authors which previously would need to adjust the whole scrap after pasting from word.
I have tried using the "Paste as Plain Text" button but it does not take care of line breaks. So i was wondering how i could customize the button function to adjust it to my needs? where and how should i do this ??
In web.config file, you can change and update HTMLEditor setting. However, you might have different aspect and dynamic user's input in the HTML editor. So, I would suggest you create a customize RichText Editor in Core DB and an assembly if you need. Then, create another config file in App_include folder to patch and add your customized HTML editor with different setting. Below is from web.config file and you can update this configuration if you want to keep using default RichText Editor.
<!-- HTML EDITOR DEFAULT CONFIGURATION TYPE
Specifies the type responsible for setting up the rich text editor. Can be overriden at profile level. Must inherit from
Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration,Sitecore.Client.
Default value: Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration,Sitecore.Client
-->
<setting name="HtmlEditor.DefaultConfigurationType" value="Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration,Sitecore.Client" />
<!-- HTML EDITOR DEFAULT PROFILE
Path to the default html editor profile.
Default value: /sitecore/system/Settings/Html Editor Profiles/Rich Text Default
-->
<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Default" />
<!-- HTML EDITOR LINE BREAK
Specifies the tag that the HTML editor inserts on Enter. Values can be
"br", "div" and "p".
-->
<setting name="HtmlEditor.LineBreak" value="p" />
<!-- HTML EDITOR REMOVE SCRIPTS
If true, the rich text editor removes script tags from RTE field values before saving. Setting the value to true reduces the potential for cross-site scripting and other script-related issues.
Default value: true
-->
<setting name="HtmlEditor.RemoveScripts" value="true" />
<!-- HTML EDITOR SUPPORT WEB CONTROLS
Indicates if the Html Editor supports web controls. If true, Web Controls are shown as yellow boxes.
Default value: true
-->
<setting name="HtmlEditor.SupportWebControls" value="true" />
<!-- HTML EDITOR VALIDATOR SERVICE URL
Specifies the url that validates XHtml.
-->
<setting name="HtmlEditor.ValidatorServiceUrl" value="http://validator.w3.org/check" />
You have to do this change in your Javascript... you can have custom JS when you are in authoring mode to catch the paste event and do the HTML manipulation in javascript...
An other option that would work as well in the ContentTree would be to add a button in the RTE that call this javascript, here you can find some explanation on how to add the button to the RTE.
https://markstiles.net/Blog/2011/02/05/adding-button-to-rich-text-editor.aspx
Related
While adding the html in the Rich Text field the html is automatically getting formatted to validate the xhmtl markup on saving the item, how to overcome that issue, how to disable the xhmtl markup validation for the rich text fields in sitecore 9?
Remove the Is Xhtml validator from the four fields in the Rich Text field type validator. It's located here:
/sitecore/system/Settings/Validation Rules/Field Types/Rich Text. If you need this, you may also want to remove the xhtml validator located in the Global Rules item.
I have a form with several TinyMCE textareas. Content is loaded in some textareas when the form is called. Other textareas are empty.
The content that is preloaded into the text fields already has a <p> tag. Everything is fine with it. But i have a problem with the empty textareas. TinyMCE automatically adds a <pre> tag, which destroys the formatting and layout.
This is the process that leads to the problem:
Open the form and enter unformatted text to a empty textarea.
Save the form. The content is displayed correctly. Everything is fine so far.
Edit the form / content.
At this point, TinyMCE adds the pre tag. The tag is not yet saved in the database, it comes from the editor.
I also made some tests with preloaded content. This is the result.
Template code | TinyMCE textarea
<p>test</p> | <p>test</p>
test | <pre>test</pre>
How can I prevent TinyMCE from adding the <pre> tag? Alternatively, <pre> could also be replaced by <p>.
If you're on ColdFusion 10 or later, you should be using the OWASP ESAPI encoding functions. They handle a higher range of character encoding than HTMLEditFormat() and HTMLCodeFormat().
Output between HTML tags: <td>#encodeForHTML(variables.myVar)#</td>
Output in an HTML attribute: <input type="text" value="#encodeForHtmlAttribute(variables.myVar)#">
The cause of the problem was the use of HTMLCodeFormat instead of HTMLEditFormat before I handed the content over to TinyMCE. Both have nearly the same effect, but HTMLCodeFormat adds a <pre> tag in addition.
HTMLCodeFormat()
HTMLEditFormat()
I have a rich text field. I wanted to know if there is way to prevent this rich text field from editable using experience editor in Sitecore.
Say suppose I have multiple rich text fields,
Banner content
Abstract content
Body content
Out of these how to I prevent only Banner content from editing, remaining 2 fields can be edited from page editor
Yes, there are multiple options.
You haven't shared your code, so I'll paste only few of them:
When using a Sitecore control:
<sc:Text Field="Banner content" DisableWebEditing="true" runat="server" />
When using the Sitecore MVC helper:
#Html.Sitecore().Field("Banner content", new { disable-web-editing=true })
Update for Sitecore 8: { DisableWebEdit = true }
When using the FieldRenderer.Render() method directly:
FieldRenderer.Render("Banner content", "disable-web-editing=true")
More in Chapter 2 of Sitecore CMS 7 and later
Page Editor Recommended
Practices for Developers
I need to style UL's coming from Rich Text Editor in Sitecore. I am trying to find out if there is a class that I can add to all UL's coming from Sitecore's Rich Text Editor.
Thanks in Advance
Ashok
The easiest solution is just to wrap your FieldRenderer with an HTML element with appropriate class applied in code:
<div class="rich-text">
<sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName" />
</div>
And then add in some CSS styles to handle your UL's within this:
.rich-text ul {
/* add in your styling */
}
You can also use the before and after properties of the FieldRenderer to pass in your tag:
<sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName"
Before="<div class='rich-text'>" After="</div>" />
EDIT:
If you wanted to be more drastic then you could add in your own renderField pipeline processor to ensure your control is always wrapped with the required tag or you could make use of the enclosingTag property and patch the AddBeforeAndAfterValues pipeline instead:
namespace MyCustom.Pipelines.RenderField
{
public class AddBeforeAndAfterValues
{
public void Process(RenderFieldArgs args)
{
Assert.ArgumentNotNull((object)args, "args");
if (args.Before.Length > 0)
args.Result.FirstPart = args.Before + args.Result.FirstPart;
if (args.After.Length > 0)
{
RenderFieldResult result = args.Result;
string str = result.LastPart + args.After;
result.LastPart = str;
}
if (args.EnclosingTag.Length == 0 || args.Result.FirstPart.Length <= 0 && args.Result.LastPart.Length <= 0)
return;
// check if a css class paramter has been passed in
string cssClass = args.Parameters.ContainsKey("class") ? args.Parameters["class"] : String.Empty;
// add the class to the enclosing tag property
args.Result.FirstPart = StringExtensions.FormatWith("<{0} class='{1}'>{2}", (object)args.EnclosingTag, cssClass, (object)args.Result.FirstPart);
args.Result.LastPart = StringExtensions.FormatWith("{0}</{1}>", (object)args.Result.LastPart, (object)args.EnclosingTag);
}
}
}
Patch the Sitecore config file:
<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
xmlns:set="http://www.sitecore.net/xmlconfig/set/">
<sitecore>
<pipelines>
<renderField>
<processor type="Sitecore.Pipelines.RenderField.GetLinkFieldValue, Sitecore.Kernel"
set:type="MyCustom.Pipelines.RenderField.AddBeforeAndAfterValues, MyCustom.Pipelines" />
</renderField>
</pipelines>
</sitecore>
</configuration>
And then call the FieldRenderer with the EnclosingTag set and pass in your class parameter:
<sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName"
EnclosingTag="div" Parameters="class=rich-text" />
This really doesn't add much over using the before/after properties though and I would generally try to stay away from overwriting default Sitecore processors to save heartache when upgrading.
You could either tap into relevant pipelines or update your sublayouts so that you always have a fixed class around every instance of the rich text field rendering:
<div class="rtf">
<sc:Text ID="scContent" runat="server" FieldName="Content" />
</div>
You will have to make sure as a developer that all current and future instances of rich text field renderings are enclosed by a tag with this class.
You could then include in the global CSS, a common style for this class.
.rtf ul {
...
....
}
If you don't want to have to add this wrapper for every single rtf rendering, you could tap into a relevant pipeline. (Note - this might be a better approach with regard to code maintainability)
You could choose to use one of the two:
renderField pipeline
or the
saveRichTextContent pipeline
So you would add a new processor for either of these pipelines, in which you could access the text within rich text fields only and process that as you please (easier to manipulate the html using the html agility pack)
If you use renderField pipeline - the text within the rich text field in sitecore will not change, the code you write will execure only while rendering the field - in preview / page editor or normal mode.
Using saveRichTextContent pipeline on the other hand, will update the in the rich text field when the content author clicks on save (after entering the text) in content editor mode.
You can see the following examples for these:
renderField - http://techmusingz.wordpress.com/2014/05/25/unsupported-iframe-urls-in-sitecore-page-editor-mode/ (Sample of HtmlUtility is also present here - instead of selecting all tags, you could select all and add your desired class attribute.)
saveRichTextContent - http://techmusingz.wordpress.com/2014/06/14/wrapping-rich-text-value-in-paragraph-tag-in-sitecore/
Hope this helps.
Best practice would be to just add the Class to the Rich Text Editor for use in the Editor.
There are lots of good articles on doing this. Here are a couple:
http://sitecoreblog.blogspot.com/2013/11/add-css-class-to-richtext-editor.html
http://markstiles.net/Blog/2011/08/13/add-css-classes-to-sitecore-rich-text-editor.aspx
These are minimal changes that provide you with the ability to put the styling ability in the hands of the Content Author, but still controlling what styles and classes they can use inline.
I have a page that contains a form with some input elements, including a textarea. Those input fields are populated with some values. Think of this whole page as an edit page for some entity. Textarea contains an XML string that shows properly within normal browser (eg. firefox and chrome) and looks like following:
<front>
<!-- top row -->
<cell>
<page>8</page>
</cell>
</front>
But when i run the test case with goutte mink driver the page is loaded and the value of textarea is encoded with special characters, like so:
<front>
<!-- top row -->
<cell>
<page>8</page>
</cell>
</front>
And when i press submit button that mess is sent to the server and saved instead of initial correct xml. Note that i do not touch it at all. I can just load the page and press submit button and it's all screwed. This happens only with goutte, but not with, say, selenium2.
So the question is: how can i force goutte interpret those html entities automatically and send them as correct data, not that encoded mess?
there's no solution for that. It seems as normal behavior of Goutte/Guzzle. As a workaround we ended up with following solution: in case Goutte driver is used we check page contents for all <textarea> elements, and if any found then for each we get their contents and plainly reinsert as follows:
$elements = $this->pageContent->findAll('xpath', '//textarea');
foreach ($elements as $element) {
$element->setValue($element->getText());
}