FAQ
I am currently having an issue where I would like to try wrapping textarea elements into another element (either a div or a span), leaving their associated label elements outside (and I guess I should check this is legal HTML).

I am attempting to use TinyMCE to provide a GUI editor for some textarea form elements.

The generated HTML for that part of the form looks like this:-
<div class="textarea label">
<label for="f_blurb">Event Blurb</label>
<textarea name="blurb" cols="60" id="f_blurb" rows="10"></textarea>
</div>

and the associated CSS gives a nice layout where the textarea is offset to the right to line up with the input and other elements leaving the labels on the left.

If I add a little js to use TinyMCE to edit the textarea, the layout goes to pot - basically it floats left (on top of the label), and no I have found CSS manipulation to fix this other than absolute positioning of the editor.

The basic js to fire up TinyMCE (using the jquery variant) is in the form config like this (YAML format form configs):-
javascript: |
$('#f_blurb').tinymce({
script_url: '/static/js/tiny_mce/tiny_mce.js',
theme: "simple"
});


So I am now wondering if I can wrap the textarea in another element to give something like this:-
<div class="textarea label">
<label for="f_blurb">Event Blurb</label>
<div class="textarea_container">
<textarea name="blurb" cols="60" id="f_blurb" rows="10"></textarea>
</div>
</div>

push the div into the right place with CSS, and have TinyMCE then format correctly because it is contained within a positioned div.

So is there a clean way of modifying the HTML generation to do that?

[By the way this question of editor positioning appears to have been asked several times on the TinyMCE forums, without any decent answers, other than some fairly complex js to find the original positioning and the force the editor instance to that - which I was unable to make work when I tried it]

Cheers
Nigel.

--
[ Nigel Metheringham Nigel.Metheringham@InTechnology.com ]
[ - Comments in this message are my own and not ITO opinion/policy - ]

Search Discussions

  • Nigel Metheringham at Mar 10, 2010 at 7:45 pm
    My solution for this was to add these in my catalyst root controller
    (purely because it seemed like a reasonable place to put oddments):-

    # hack some of the FormFu stuff a bit...
    sub HTML::FormFu::Element::Textarea::_string_field_start {
    my ( $self, $render ) = @_;

    return (
    $self->next::method($render) . '<div class="textarea_container">' );
    }

    sub HTML::FormFu::Element::Textarea::_string_field_end {
    my ( $self, $render ) = @_;

    return ( '</div>' . $self->next::method($render) );
    }

    Seemed like the cleanest way I could see... still a bit messy but thats
    down to TinyMCE as much as anything.

    Nigel.

    --
    [ Nigel Metheringham Nigel.Metheringham@InTechnology.com ]
    [ - Comments in this message are my own and not ITO opinion/policy - ]
  • Carl Franks at Mar 10, 2010 at 9:09 pm
    I think my preferred method would be to create a custom subclasss of
    Textarea which provides its own string_field() looking something like
    this:

    sub _string_field {
    my ( $self, $render ) = @_;

    my $html = q{<div class="textarea_container">};
    $html .= $self->next::method($render);
    $html .= q{</div>};

    return $html;
    }

    Then just load it in your config like so:
    element:
    - type: '+MyApp::Element::TinyCME'

    Alternatively, you could switch that one element to use the TT
    template files and write a custom template.

    Cheers,
    Carl
  • Nigel Metheringham at Mar 10, 2010 at 9:19 pm

    On 10 Mar 2010, at 21:09, Carl Franks wrote:
    I think my preferred method would be to create a custom subclasss of
    Textarea which provides its own string_field()
    Oh yes - that does look neater.

    Nigel.
    --
    [ Nigel Metheringham Nigel.Metheringham@InTechnology.com ]
    [ - Comments in this message are my own and not ITO opinion/policy - ]

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
grouphtml-formfu @
categoriesperl, catalyst
postedMar 10, '10 at 12:39p
activeMar 10, '10 at 9:19p
posts4
users2
websitemetacpan.org...

2 users in discussion

Nigel Metheringham: 3 posts Carl Franks: 1 post

People

Translate

site design / logo © 2022 Grokbase