This is a migrated thread and some comments may be shown as answers.

RadEditor justify buttons don't change element.style CSS text-align attribute in Firefox 9

3 Answers 152 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
newb
Top achievements
Rank 1
newb asked on 26 Jan 2012, 09:03 PM

If you click the justify (left, center, right, justify) buttons in the RadEditor in Mozilla Firefox 9 when you have text highlighted, nothing happens.

Example: I checked Google Chrome and it works fine when I click the "center" justify button after inspecting the element.

element.style {
text-align: center;
}

3 Answers, 1 is accepted

Sort by
0
newb
Top achievements
Rank 1
answered on 26 Jan 2012, 10:29 PM
The buttons appear to be calling the FormatBlock tag to get the wrapping tag (ie: div, p, etc..).  Your standard toolbar (on the demo site) seems to apply a div with a text-align style of right/left/center/justify depending on what button you click.  Perhaps we can add a div to our FormatBlock tool and get the default from there.  How can this be done?

<tool name="FormatBlock" />

<paragraphs>
                 <paragraph name="&lt;div&gt;h3&lt;/div&gt;" value="&lt;div&gt;" />
                <paragraph name="&lt;h3&gt;h3&lt;/h3&gt;" value="&lt;h3&gt;" />
<paragraph name="&lt;h4&gt;h4&lt;/h4&gt;" value="&lt;h4&gt;" />
<paragraph name="&lt;h5&gt;h5&lt;/h5&gt;" value="&lt;h5&gt;" />
<paragraph name="&lt;h6&gt;h6&lt;/h6&gt;" value="&lt;h6&gt;" />
<paragraph name="&lt;p&gt;p&lt;/p&gt;" value="&lt;p&gt;" />
</paragraphs>
0
newb
Top achievements
Rank 1
answered on 26 Jan 2012, 11:22 PM

By putting this script tag below my radeditor toolbar, it seemed to fix the issue, but this is a horrible hack.  We don't have the standard toolbar, we have standard tools in a custom toolbar.  See below this code for tools configuration.  Any help to remove this hack would be appreciated. We can't see the Telerik RadEditor toolbar javascript because the newest version is using a resource (resx) file.

          <telerik:radeditor spellchecksettings-ajaxurl="~/admin/Telerik.Web.UI.SpellCheckHandler.axd" DialogHandlerUrl="~/admin/Telerik.Web.UI.DialogHandler.axd" id="uberEditor" runat="server" width="821" height="322" tabindex="5" toolsfile="content_editor_tools.xml">
          </telerik:radeditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["JustifyCenter"] = function(commandName, editor, args) {
        editor.fire("FormatBlock", { value: "<div style='text-align:center'>" })
    };
    Telerik.Web.UI.Editor.CommandList["JustifyLeft"] = function(commandName, editor, args) {
        editor.fire("FormatBlock", { value: "<div style='text-align:left'>" })
    };
    Telerik.Web.UI.Editor.CommandList["JustifyRight"] = function(commandName, editor, args) {
        editor.fire("FormatBlock", { value: "<div style='text-align:right'>" })
    };
    Telerik.Web.UI.Editor.CommandList["JustifyFull"] = function(commandName, editor, args) {
        editor.fire("FormatBlock", { value: "<div style='text-align:justify'>" })
    };
</script>  

==========

<?xml version="1.0" encoding="utf-8" ?>
<root>

  <cssFiles>
    <item name="~/App_Themes/Default/CustomStyles.css" />
  </cssFiles>
 
 <tools name="core_tools" dockable="false">
  <tool name="Bold" shortcut="Ctrl+B" />
  <tool name="Italic" shortcut="Ctrl+I" />
  <tool name="Underline" shortcut="Ctrl+U" />
  <tool name="StrikeThrough" />
  <tool separator="true" />

  <tool name="Undo" shortcut="CTRL+Z" />
  <tool name="Redo" shortcut="CTRL+Y" />
  <tool name="FormatStripper" shortcut="CTRL+F" />
  <tool separator="true" />

  <tool name="Cut" shortcut="Ctrl+X" />
  <tool name="Copy" shortcut="Ctrl+C" />
  <tool name="Paste" shortcut="Ctrl+V" />
  <tool separator="true" />

        <tool name="JustifyLeft" />
        <tool name="JustifyCenter" />
  <tool name="JustifyRight" />
  <tool name="JustifyFull" />
  <tool separator="true" />

  <tool name="Indent" />
  <tool name="Outdent" />
  <tool separator="true" />

  <tool name="InsertOrderedList" />
  <tool name="InsertUnorderedList" />
  <tool name="Superscript" />
  <tool name="Subscript" />
  <tool separator="true" />

  <tool name="InsertTable" />
  <tool name="FormatBlock" />
  <tool separator="true" />

  <tool name="AjaxSpellCheck" />
  <tool separator="true" />

  <tool name="InsertSymbol" />
  <tool name="CreateLink" text="Create Link"/>

        <cssFiles>
            <item name="~/App_Themes/Default/CustomStyles.css" />
        </cssFiles>
       
 </tools>

 <!--Used for "FormatBlock" dropdown-->
 <paragraphs>
  <paragraph name="&lt;h3&gt;h3&lt;/h3&gt;" value="&lt;h3&gt;" />
  <paragraph name="&lt;h4&gt;h4&lt;/h4&gt;" value="&lt;h4&gt;" />
  <paragraph name="&lt;h5&gt;h5&lt;/h5&gt;" value="&lt;h5&gt;" />
  <paragraph name="&lt;h6&gt;h6&lt;/h6&gt;" value="&lt;h6&gt;" />
  <paragraph name="&lt;p&gt;p&lt;/p&gt;" value="&lt;p&gt;" />
 </paragraphs>

 <contextMenus>
  <contextMenu forElement="A">
   <tool name="Edit Link" />
   <tool name="Unlink"/>
  </contextMenu>
 </contextMenus>
</root>

0
Rumen
Telerik team
answered on 30 Jan 2012, 02:39 PM
Hello,

Please, see this forum thread on the subject: Problem with align buttons.

Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
General Discussions
Asked by
newb
Top achievements
Rank 1
Answers by
newb
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or