1

Topic: Using TinyMCE on a single-line text entry input

Hi everyone,

I have a question about the possibility of using TinyMCE for doing limited formatting on a single line text entry field: 

Currently, I have two TinyMCE instances set up.  One is for a regular text box with full featured formatting.  The other is for single line entry (titles of projects) and is only setup to allow formatting of text color/highlight color and to italicize the text.  However, I'm having trouble making the single line text entry field behave the way I want it to.  Currently, it just acts as a small textarea.  It still shows scrollbars, still wraps text, and is including padding in the entry field.  Also, I am using an external toolbar for the single-line text entry field and would like to disable the "X" button to close the toolbar, position the toolbar directly to the right of the text entry field and to always display the external toolbar, not just onFocus of the field.  Here is a list of things that I think I need to do still (and need help with):

1. Remove horizontal and vertical scrollbars
2. Disable auto-wrap
3. Remove padding
4. Disable the user from entering a new line with the "enter" key
5. Disable "X" (close) button on the external toolbar
6. Re-positioning of the external toolbar
7. Keep the external toolbar open all of the time

Here is my current configuration code for the single entry text field:

mode: "external",  
elements: "TitleField",
theme: "advanced",
skin: "o2k7",
plugins: "spellchecker,paste",
                

           
theme_advanced_buttons1: "italic,|,forecolor,backcolor",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "external",
theme_advanced_toolbar_align: "center",
theme_advanced_statusbar_location: "none",
theme_advanced_resizing: false,
theme_advanced_path: false,
theme_advanced_resizing_min_height : "20",
                
         
setup : function(ed) 
{
     ed.onInit.add(function() 
     {
        var e = tinymce.DOM.get(ed.id + '_tbl'), ifr = tinymce.DOM.get(ed.id + '_ifr'), w = ed.getWin(), dh;
        var h = 20;
        dh = e.clientHeight - ifr.clientHeight;
        ed.theme.resizeTo(w.clientWidth, h + dh);
      });
}

If possible, I would prefer to make the necesarry changes only in the configuration code.  I don't want to mess with the css files too much because I'm using custom instances of TinyMCE everywhere on the site.

If anyone could provide help, suggestions or insight - that would be great! Please let me know if you need more information.  Thank you so much!

2

Re: Using TinyMCE on a single-line text entry input

Just an update on my progress with this:

I was able to dynamically modify most of the things listed in the above post.

- Move toolbar to the right of the editing area
- Minimize the height to mimic a single line entry
- Remove close button and area on toolbar

Unfortunately - my changes only seem to work for Chrome.  In IE and FF, it behaves completely differently.  My code is below.  Can someone please help me to get this to act standard across Chrome, IE and FF?

$('input.mceTitle').tinymce(
            {
                script_url: '../../../JavaScripts/tinymce/jscripts/tiny_mce/tiny_mce_gzip.ashx',
                theme: "advanced", 
                skin: "o2k7",
                plugins: "spellchecker,paste,inlinepopups", 
                dialog_type: "modal",
                element_format: "html",
                body_id: "titleBody",
                nowrap: true,
                force_br_newlines: true,
                force_p_newlines: false,
                force_root_block: '',


                // Theme options
                theme_advanced_buttons1: "italic,|,forecolor,backcolor", 
                theme_advanced_buttons2: "", 
                theme_advanced_buttons3: "", 
                theme_advanced_toolbar_location: "external",
                theme_advanced_toolbar_align: "center",
                theme_advanced_statusbar_location: "none",
                theme_advanced_resizing: false,
                theme_advanced_path: false,
                theme_advanced_resizing_min_height: "27",

                setup: function (ed) {
                    ed.onInit.add(function (ed) {
                        var e = tinymce.DOM.get(ed.id + '_tbl'), ifr = tinymce.DOM.get(ed.id + '_ifr'), w = ed.getWin();
                        var h = 27; //new height of edit area

                        // Hide the scrollbar
                        //$('#' + ed.id + '_tbl').css('overflow', 'hidden');

                        $('#titleBody').css('margin-top', '0px')
                                       .css('margin-right', '0px')
                                       .css('margin-bottom', '0px')
                                       .css('margin-left', '0px')
                                       .css('overflow', 'hidden');

                        $('.mceExternalToolbar').css('display', 'block')
                                                .css('top', '0px');
                        // Fix the CSS look and feel of the toolbar
                        $('.mceExternalToolbar').css('border-bottom', '1px solid #CCC')
                                                .css('border-left', '1px solid #CCC')
                                                .css('border-right', '1px solid #CCC')
                                                .css('border-top', '1px solid #CCC');

                        var toolbarWidth = $('.mceExternalToolbar').css('width');
                        var editorWidth = $('#' + ed.id + '_parent').width();
                        var editorHeight = $('#' + ed.id + '_parent').height();
                        var editorPos = $('#' + ed.id + '_parent').offset();

                        // Resize the editor
                        ed.theme.resizeTo(w, h);
                        editorWidth = $('#' + ed.id + '_parent').width();

                        $('.mceExternalToolbar').css('left', editorWidth);
                        // Remove the "close" button
                        $('.mceCenter').css('padding-right', '3px');
                        $('#' + ed.id + '_external_close').css('display', 'none');
                    }); // onInit
                    ed.onClick.add(function (ed, e) {
                        $('.mceExternalToolbar').css('top', '0px');
                    }); // onClick
                }

Chrome:
http://i.imgur.com/yhoOq.jpg
  This is how I want it to appear and act so far.

Firefox:
http://i.imgur.com/D2daY.jpg
  Updating the position too far to the right?

IE9:
http://i.imgur.com/enxA5.jpg
  Almost none of my changes have worked in IE.


Also, how does one remove the padding/margin on the body in the editing area?  Everything I've done does not get rid of it and I'm not sure how it should be done.  And which element should i be modifying to disable the scrollbar?  I've tried selecting the iFrame, body, and just about everything else I can see.  Nothing has been successful so far.  Thank you so much for you help!