[RESOLVED] Tiny MCE

[pikohn]

Hello,

I just wanted to know if its possible to just have one instance of tinymce running when you have two text boxes... The pic shows both text boxes, the summary text box doesn't need rtf.

Best,

Mike

[gep13]

Hello,

In which case, why make it a normal TextBox, in the same way that you have the Title TextBox?

You may also be able to turn off some of the menus on the Summary TinyMCE TextBox so that there isn't so much "stuff" going on.

Thanks

Gary

[brin351]

It is possible but you will need to show your markup to see how you tell tinymce what elements to make rtf.

[pikohn]

Here is my Mark up...

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"  validateRequest="false" CodeFile="edit.aspx.vb" Inherits="edit" %>
<%@ Register Assembly="skmControls2" Namespace="skmControls2" TagPrefix="skm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .style1
        {
            width: 667px;
        }
        .style2
        {
            height: 31px;
        }
        .style3
        {
            height: 29px;
        }
        .style4
        {
            width: 667px;
            height: 29px;
            
        }
   .minitext {
  font: normal 0.7em Arial, sans-serif;
  color: Black;
}

.disable {
  background-color: #CF110C;
  color: #fff;
  font-weight: bold;
  padding: 5px;
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
 <script type="text/javascript" language="javascript">
     tinyMCE.init({
         mode: "textareas",
         theme: "advanced",
         plugins: "emotions,spellchecker,advhr,insertdatetime,preview",

         // Theme options - button# indicated the row# only        
         theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
         theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
         theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
         theme_advanced_toolbar_location: "top",
         theme_advanced_toolbar_align: "left",
         theme_advanced_statusbar_location: "bottom",
         theme_advanced_resizing: false
     }); 
</script>
    <table>
<tr>
<td valign="top" align="right">Title:</td>
<td class="style1"><asp:TextBox ID="txtTitle" runat="server" Width="440px"></asp:TextBox></td>
</tr>
<tr>
<td valign="top" align="right">
    <br />
    Summary:</td>
<td class="style1">
      
            <br />
        
            <asp:TextBox ID="Summary" runat="server" Style="margin:auto" 
        Rows="10" TextMode="MultiLine" 
            Width="81%" Height="149px"></asp:TextBox>
        <br />
            <skm:TextBoxCounter runat="server" ID="TextBoxCounter1" 
            TextBoxControlId="txtTitle"></skm:TextBoxCounter>
        <br />
        <br />
    </td>
</tr>
<tr>
<td valign="top" align="right">
    <br />
    Body:</td>
<td class="style1">
      
<br />


<asp:TextBox ID="mceBody" runat="server" Style="margin:auto" Rows="10" TextMode="MultiLine" 
            Width="81%" Height="220px"></asp:TextBox>
    <br />
    <br />
</td>
</tr>
<tr>
<td valign="top" align="right" class="style3">Expiration:</td>
<td class="style4"><asp:TextBox ID="txtExpDate" runat="server"></asp:TextBox>&nbsp;
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
        ControlToValidate="txtExpDate" 
        ErrorMessage="Please Enter Date in format 01/01/2010" Font-Bold="True" 
        ForeColor="Red" 
        ValidationExpression="^((((0[13578])|(1[02]))[\/]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\/]?(([0-2][0-9])|(30)))|(02[\/]?[0-2][0-9]))[\/]?\d{4}$"></asp:RegularExpressionValidator>
    <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="txtExpDate" ErrorMessage="Please enter Exp. Date" 
        Font-Bold="True" ForeColor="Red"></asp:RequiredFieldValidator>
    </td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td>
<td class="style1">
    <asp:Label ID="Label1" runat="server" Font-Names="Arial Black" 
        Font-Size="Small" ForeColor="Red" 
        Text="Somthing is a Rye...please double check to make sure everything is filled out properly." 
        Visible="False"></asp:Label>
    </td>
</tr>
<tr>
<td colspan="2" class="style2" style="text-align: left">
<asp:Button id="btnSave" runat="server" text="Save" style="text-align: right" />
</td>
</tr>
</table>
    <br />
</asp:Content>

Please let me know if you need anything else...

Mike

[gep13]

Ah, it is happening because both the Summary and the Body TextBoxes have the multiline property set to true, which means that they are being rendered as textarea's, which is what TinyMCE is targetting.

I haven't played with TinyMCE enough to know if you can target individual controls.

Brin?

Gary

[brin351]

Yep that's what I presumed.

You can make tinymce reference a specific element/ tag to use by id with the following settings.

The id is the id of the tag in the browser and because your using asp textbox control it will change this to ensure it's unique. So you will have to get the textbox.clientID in code and pass it to your tinymce script or asp.net 4 allowes you to set static control id's which remain the same when rendered to the browser.

tinyMCE.init({
        mode: "exact",
        elements: "ID_of_TextArea",

// etc.....

[pikohn]

I am a little unsure as to how to get the clientID... can you elaborate?

Mike

[pikohn]

Nevermind the id is located in the page source...

Mike

[gep13]

You can make tinymce reference a specific element/ tag to use by id with the following settings.

See, I knew there would be a way

[gep13]

Nevermind the id is located in the page source...

Mike

One thing to bear in mind, depending on future changes that you might make to the page, the ClientID of a particular control might change. It is still a good idea to get the ClientID for a particular control from the server, before using it on the client.

Gary