RadEditor 4.5.3 and paragraphs

[IKB]

Hi,

I customized the paragraphs dropdown using the config file.
Everything works fine until I try to add paragraphs with classes or "unusual" paragraphs like <code>.

For example I added

<paragraph name="&lt;code>Code&lt;/code>" value="&lt;code>" />
<paragraph name="&lt;p class='tipp'>Tipp&lt;&lt;/p>" value="&lt;p class='tipp'>" />

to the config file.

The result is that the two options are shown in the drop down box, but they are not applied to the paragraphs or selection when I select one of them.

According to the docs, it should work this way.

By the way: The documentation (http://www.telerik.com/help/aspnet/editor/paragraphstyles.html) regarding this is buggy. The example code for the ToolsFile.xml breaks the editor.

Regards

Martin

[Rumen]

Hello Martin,

For some reason the format block tool of the HelpStudio converts the &lt; entity to < which automatically makes the code not working. I will fix the example in the documentation.

The correct syntax is

<paragraphs>
    <paragraph name="&lt;code>Code&lt;/code>" value="&lt;code>" />
    <paragraph name="&lt;p class='tipp'>Tipp&lt;/p>" value="&lt;p class='tipp'>" />
    <paragraph name="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>" />
    <paragraph name="&lt;H2>Heading 2&lt;/H2>" value="&lt;H2>" />
    <paragraph name="&lt;H3>Heading 3&lt;/H3>" value="&lt;H3>" />
  </paragraphs>

I tested it with the classic RadEditor 7.3.3 and it worked properly. You can see my test in the attached video. For your convenience I have also attached my test project.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[IKB]

Rumen, can you please test what happens if it takes a long time to edit the post? I just finished my long reply and got an error. The back button did not bring back my text.

[IKB]

Ok, now reentering the whole stuff...

Unfortunately my 'problems' are still there. Even in your demo project.

Ok, here we go:

First of all: I run radE with 'newlinbr' set to 'false' to make it more 'word like' and have a more predictable editing behaviour.

First observation:
For the standard paragraphs like 'p' or 'h1', I can change the paragraph style with the cursor positioned somewhere in the paragraph. I don't have to select the whole text like in your example. I expect a consistent behaviour for all parapgraph styles.

Second observation:
I can't change the paragraph style to 'tipp' or 'code' if there's only one paragraph (i.e. one line) in the document.

Third observation:
<code> is inserted within <p>. I would expect <code> to replace the <p> tags.

Fourth observation:
When moving around the text, the dropdown displays the name of the current paragraph style for 'h1', 'h2', 'p', 'ol' and so on. This does not work for the custom paragraphs 'tipp' or 'code'

Regards

Martin

[Rumen]

Hi Martin,

The FormatBlock tool works in the following way:
- If there isn't a selection the dropdown uses the FormatBlock command of the browser
- If there is a selection then the FormatBlock tool uses our custom implementation of this command.

In your scenario you use the editor's FormatBlock implementation which works always on selection. However this command is not suitable for scenarios in which you want to use this command.

The observed behaviors are limitations of the current FormatBlock implementation. I logged them in our ToDo list and our developers will consider their implementation. I also updated your Telerik points for your feedback.

Our suggestion is to implement your own FormatBlock command by overriding the editor's one with the following code:

<rade:RadEditor ID="RadEditor1" runat="server"></rade:RadEditor>
<script type="text/javascript">
RadEditorCommandList["FormatBlock"] = function(commandName, editor, oTool)
{     
      // Execute your code here, provide it with any arguments that you need, etc.  
};
</script>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Vinoth Arun]

Hi,

I added those things into xml file
 <paragraphs>
    <paragraph name="&lt;H1 style='font-size: 14px; font-family: Arial; color:#808080'&gt; Title &lt;/H2&gt;" value="&lt;h1 style='font-size: 14px; font-family:Arial;  '&gt; &lt;/h1&gt;" />
    <paragraph name="&lt;H2 style='font-size: 12px; font-family: Arial; color:#808080'&gt; Subhead &lt;/H2&gt;" value="&lt;h3 style='font-size: 12px; font-family:Arial; '&gt; &lt;/h3&gt;" />
    <paragraph name="&lt;H3 style='font-size: 10px;  font-family: Arial; color:#808080'&gt; Text &lt;/H3&gt;" value="&lt;h4 style='font-size: 10px; font-family:Arial; '&gt; &lt;/h4&gt;" />  
  </paragraphs>


In Editor only once it show font name for selected text, if i choose second time it not shown the font name in the drop down list.
any solution?

thanks in advance

[Stanimir]

Hi Vinoth,

The FontName, FontSize, FormatBlock and other dropdown headers are adaptive / sensitive on selection and they are updated depending on the information returned by the browser's queryCommandValue method. It is the browser that returns Heading 2 in the en-US localized browsers when H1 tag is selected in the content area and this info is loaded in the FormatBlock dropdown's header. If you would like to display another text in the FormatBlock dropdown header then you can use / enhance the code below:

1. Add the following element to the respective ConfigFile.xml or ListConfigFile.xml files, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder.

<property name="OnClientSelectionChange">OnClientSelectionChange</property>

2. Add the following javascript code in the MOSSEditorTools.js, which is located in the mentioned above folder:

function OnClientSelectionChange(editor, args)
{
    var tool = editor.getToolByName("FormatBlock");
    if (tool)
    {
        setTimeout(function ()
        {

            var value = tool.get_value();
            //alert(value);
            switch (value)
            {
                case "Heading 4":
                    value = value.replace("Heading 4", "Text");
                    break;
                case "Heading 3":
                    value = value.replace("Heading 3", "Subhead");
                    break;
                case "Heading 1":
                    value = value.replace("Heading 1", "Title");
                    break;
                case "Another tag":
                    //do the same as above for other tags
                    break;
            }

            tool.set_value(value);
        }, 0);
    }
}

All the best,
Stanimir
the Telerik team

[Daniel]

Thank you very much, the custom paragraph matching the css class code helped a lot.
<paragraph name="&lt;p class='tipp'>Tipp&lt;/p>" value="&lt;p class='tipp'>" />

Much appreciated.

[Balaji]

Hi Vinoth,

I got in to similar kind of problem.

i have two style called "source / title" and "normal". the value for both is <p> tag.

<paragraph name="&lt;p&gt;Source/Text&lt;/p&gt;" value='&lt;p class="analysisReportTableMeta emtablesource">' /><br> <paragraph name="&lt;p&gt;Normal&lt;/p&gt;" value="&lt;p&gt;" />

on client selection i have to find out, which style is applied, so that i can select respective style.

NOTE:  As i followed the code snippet "OnClientSelectionChange" which you suggested, it gives "NORMAL" for both style.

Thanks and Regards,
Balaji

[Stanimir]

Hi Vinoth,

If in both cases you get "NORMAL", then you need to separate the cases to. As far as I can tell It all depends on the selected elements. So what I suggest you is to add case for "NORMAL" and then by inspected the currently selected in the editor element to set the correct value.

You can use the editor.GetSelectedElement() to get the currently selected element.

Greetings,
Stanimir
the Telerik team