RadEditor 4.5.3 and paragraphs

10 posts, 0 answers
  1. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 26 Jun 2008 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 30 Jun 2008 Link to this post

    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

  3. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 30 Jun 2008 Link to this post

    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.
  4. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 30 Jun 2008 Link to this post

    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
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 03 Jul 2008 Link to this post

    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
  6. Vinoth
    Vinoth avatar
    25 posts
    Member since:
    Aug 2012

    Posted 24 Jun 2011 Link to this post

    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


  7. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 28 Jun 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  8. Daniel
    Daniel avatar
    1 posts
    Member since:
    Oct 2011

    Posted 31 Oct 2011 Link to this post

    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.
  9. Balaji
    Balaji avatar
    1 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    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
  10. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 08 Nov 2012 Link to this post

    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
    Learn how the Telerik controls can be integrated in SharePoint 2007/2010 from this resource. To watch them in action, explore our online SharePoint 2010 and SharePoint 2007 demo sites.
Back to Top