Home Search Member List Faq Register Login  
UltimateEditor
Re: TextBoxCssFiles and Styles Question...

Thread Starter: sschofield   Started: 06-13-2007 1:48 AM   Replies: 6
 Karamasoft Support Forums » General Discussions » UltimateEditor » Re: TextBoxCssFiles and Styles Question...
 Printable Version    « Previous Thread   Next Thread »
  13 Jun 2007, 1:48 AM
sschofield is not online. Last active: 10/2/2011 7:03:28 PM sschofield

Top 10 Posts
Joined on 06-13-2007
Perth, Australia
Posts 51
TextBoxCssFiles and Styles Question...
Hi... I have 2 questions:

1) The introduction of the textCssClass property is great, but I struggle to find clear instructions on how to use it.  I have checked all of the posts regarding this feature, but am still not clear.

I'm assuming that linking to an external CSS file automatically renders the styles to the textbox, such that as soon as you start typing, the specified styles from the external CSS file appear.
 
In the control I can use using either:

UltimateEditor1.TextBoxCssFiles = MyURLRoot + "Admin/Editor/UltimateEditorInclude/StylesEditor.css"; (Code-behind)

OR

<cc1:UltimateEditor  TextBoxCssFiles="Admin/Editor/UltimateEditorInclude/StylesEditor.css" .. />

The external styles only begin to appear if I toggle between the HTML and the Design.  I thought it was a cache issue, but that doesn't make sense if they work when toggling between editing modes.

Can I list a generic class name on my CSS like this:
BODY {color:#FFFFFF;}
.RedBackground {background-color:#FF0000;}

If so, how do I assign this so that the textbox automatically has a red background?  Can I use the BODY tag on my CSS so that the textbox defaults to the BODY tag CSS?

2) Is there a way to set up specific styles to match our corporate styles?  In other words, it would be great to drop down the styles list to choose from preset styles thereby forcing the user to maintain only corporate styling when creating documents.  With this, it would be easy to switch off the font color icon so that the user can only select preset font colors.  Hope this makes sense.

Otherwise it's a great product and I am keen to buy it, but these are important issues for the application I intend to use it for.

Thanx... Simon

  
  13 Jun 2007, 2:20 AM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: TextBoxCssFiles and Styles Question...
1. Try using absolute path for your TextBoxCssFiles path as follows:

<cc1:UltimateEditor  TextBoxCssFiles="http://localhost/Admin/Editor/UltimateEditorInclude/StylesEditor.css" .. />

The reason the styles are applied when you toggle between HTML and Design tabs might be when you switch to the HTML tab, the CSS path is converted to an absolute path. Then, when you switch back to the Design mode, the styles are applied properly. You can simply test this by setting TextBoxCssFiles to our styles on our website and see if the styles are applied when you first open the page. Try the following:

<cc1:UltimateEditor  TextBoxCssFiles="http://www.karamasoft.com/KaramasoftStyles.css" .. />

If you want to set the background of the editor textbox to red, simply define BODY style in your StylesEditor.css file as follows:

BODY {background-color:#FF0000;}

2. There is no built-in way to display the styles in your page in a dropdown and when you choose one, the style will be applied to the element inside the editor. However, you can customize the toolbar buttons and dropdownlists using UltimateEditor server and client API methods. For example, in our Events sample, we added a custom button and a dropdown. You can add your own dropdownlist to the toolbar, populate it with your company styles and when the user chooses a style, you can apply the style using the client-API methods such as InsertHTML as follows:

var ueObj = UltimateEditors['UltimateEditor1'];
var range = ueObj.GetCurrentRange();
var selectedStyle = ddlInsertHTML.value;   // Refer to our Events sample
range.pasteHTML('<span class="' + selectedStyle + '"' + range.htmlText + '</span>');

You can visit our Events sample at http://www.karamasoft.com/Samples.aspx?component=UltimateEditor&sample=Events and see UltimateEditor Client-API manual at http://www.karamasoft.com/UltimateEditor/ClientAPI.htm

  
  13 Jun 2007, 10:24 PM
sschofield is not online. Last active: 10/2/2011 7:03:28 PM sschofield

Top 10 Posts
Joined on 06-13-2007
Perth, Australia
Posts 51
Re: TextBoxCssFiles and Styles Question...
Hi... Thanx for that info. 

It's quite bizarre actually with the TextBoxCssFiles pathing issue, because using "http://localhost/..." works perfectly, yet using an IP address like "http://10.1.1.218/..." doesn't!  (I did check to ensure the IP address is correct)  I also noticed that the browser does cache the CSS settings, so closing the browser after pointing to a diferent CSS file will initiate the new CSS settings.  Thanx again.

As for the styles idea, I will explore your suggestions further.  In the meantime I was actually referring to the existing drop-down list that contains options like Normal, Formatted, Heading 1, Heading 2, etc. Where are the settings for this stored?  And can I alter these settings to add my own styles?

Finally, the font size I use in my applications is 9pt or 10px, which is inbetween the fonts the drop-down lists.  I tried to alter the English.xml file to add the 9pt option, but it didn't like it as it seems to use only the standard HTML increments.  Can this list be altered to include point or pixel sizes?

Sorry to hassle on these matters, but styles are critical to the application.

Thanx in anti***tion, Simon

  
  14 Jun 2007, 1:15 AM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: TextBoxCssFiles and Styles Question...
You can see the FormatBlock options in English.xml file and you can change it for your needs.

You can also define your own font sizes in English.xml file as follows:

 <ToolbarItem ID="FontSize">
  <DropDown>
   <DropDownItem ItemText="Size" ItemValue="" />
   <DropDownItem ItemText="1 (8 pt)" ItemValue="1" />
   <DropDownItem ItemText="2 (10 pt)" ItemValue="2" />
   <DropDownItem ItemText="3 (12 pt)" ItemValue="3" />
   <DropDownItem ItemText="4 (14.5 pt)" ItemValue="4" />
   <DropDownItem ItemText="5 (18 pt)" ItemValue="5" />
   <DropDownItem ItemText="6 (24 pt)" ItemValue="6" />
   <DropDownItem ItemText="7 (36 pt)" ItemValue="7" />
  </DropDown>
 </ToolbarItem>

However, the limitation is that you can only define 7 font-sizes and ItemValue has to be an integer from 1 to 7.

  
  14 Jun 2007, 3:50 AM
sschofield is not online. Last active: 10/2/2011 7:03:28 PM sschofield

Top 10 Posts
Joined on 06-13-2007
Perth, Australia
Posts 51
Re: TextBoxCssFiles and Styles Question...
Thanx for your reply, the font-size option works well, but I struggle to understand how the FormatBlock options work.

The FormatBlock options takes on the following structure:

<DropDownItem ItemText="Heading 1" ItemValue="Heading 1" />

The value is "Heading 1" which returns <H1></H1> to the selected text in the textbox. That's great, but where does it get the H1 tag from?  Is this hard-coded?  Can I set up my own tags, perhaps even to use inline styles?  If so, this would solve all of my issues.  Please advise.

Thanx again... Simon


  
  14 Jun 2007, 1:04 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: TextBoxCssFiles and Styles Question...

FormatBlock values are passed to execCommand method the document object on the client-side and FormatBlock is limited to the list of options we already provide, you cannot add custom format block types.

You can easily create your own custom dropdownlist using UltimateEditor server and client API. We will show you how you can create a dropdownlist which has CSS class names in it and when a class name is selected, it will apply teh style to the selected range inside teh editor. For example, if the text you have highlighted is test, it will be converted to <span class="style1">test</span> if you select style1 from the dropdown. Then, you can apply the same idea to create dynamic HTML in your editor.

First, open UltimateEditorCS solution under C:\Inetpub\wwwroot\Karamasoft\UltimateEditor\v2.3\Demos\CS directory.

Open Events.xml file under Events sample directory and add the following toolbar item:

<ToolbarItem Type="DropDown" ID="ApplyStyle" Command="None" />


Then open Events.aspx.cs file and the following in UltimateEditor1_ToolbarItemRender method:

else if (e.ToolbarItem.ID == "ApplyStyle")
{
  DropDownItem ddi;
  ddi =
new DropDownItem();
  ddi.ItemValue =
"";
  ddi.ItemText =
"Apply Style";
  e.ToolbarItem.DropDown.Add(ddi);

  ddi =
new DropDownItem();
  ddi.ItemValue =
"style1";
  ddi.ItemText =
"style1";
  e.ToolbarItem.DropDown.Add(ddi);

  ddi =
new DropDownItem();
  ddi.ItemValue =
"style2";
  ddi.ItemText =
"style2";
  e.ToolbarItem.DropDown.Add(ddi);

  e.ToolbarItem.OnAfterChange =
"ApplyStyle();";
}

Then, open Events.aspx and add the following JavaScript method:

<script language="javascript">
// Apply style to the current range
function ApplyStyle() {
  var ultimateEditorObj = UltimateEditors['UltimateEditor1'];
  var ddlApplyStyle = document.getElementById('UltimateEditor1ApplyStyle');
  // Store the current range in the editor so that current range will not be lost once the editor loses the focus
  ultimateEditorObj.StoreCurrentRange();
  // Get current range in the editor
  var range = ultimateEditorObj.GetCurrentRange();
  // Get selected style from the dropdown
  var selectedStyle = ddlApplyStyle.value;
  // Apply style to the range
  range.pasteHTML('<span class="' + selectedStyle + '">' + range.htmlText + '</span>');
  // Select the first item in the dropdown
  ddlApplyStyle.selectedIndex = 0;
}
</script>



  
  20 Jun 2007, 3:30 AM
sschofield is not online. Last active: 10/2/2011 7:03:28 PM sschofield

Top 10 Posts
Joined on 06-13-2007
Perth, Australia
Posts 51
Re: TextBoxCssFiles and Styles Question...
Brilliant!... Worked a treat.

Thanx for your help.  This is a great component.

Simon

  
 Page 1 of 1 (7 items)
Karamasoft Support Forums » General Discussions » UltimateEditor » Re: TextBoxCssFiles and Styles Question...

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2020 Karamasoft LLC. All rights reserved.