Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

3.1 HTMLEditorField in front end form not sending data


Go to End
Reply


16 Posts   1596 Views

Avatar
Vix

Community Member, 25 Posts

12 February 2014 at 4:04pm

Edited: 12/02/2014 4:06pm

Hi Stefdv
The code that Thomas added works fine, the problem in my site wound up being that I had two forms (one hidden) where the text area field had the same name and therefore the same ID, which then made the javascript unable to work correctly as there was not a unique ID.

So based on Thomas' code below you need to create a file in the mysite/code folder called 'FrontendHtmlEditorField.php' and then whatever page you are using it on the form would be something like...

public function MyForm(){
$contentfield = new FrontendHtmlEditorField('Content', _t("ContentEntry.CN",'Content'));

$fields = new FieldList(
//your other fields
$contentfield
);

$actions = new FieldList(
         new FormAction('submitForm', 'Submit')
      );

$form = new Form($this, 'MyForm', $fields, $actions);   

return $form;

}

Then you would have your 'submitForm' function for processing the form and in the template you would just have $MyForm wherever you want the form to appear.

Avatar
Stefdv

Community Member, 110 Posts

13 February 2014 at 3:22am

Tx for the reply,
a little over my head though ;)

I don't even think this is what i need.

I need students to work on a 'digital book' where they can only edit certain parts ( like answering questions ) .
I guess i need something like a frontend editor.

Avatar
Vix

Community Member, 25 Posts

13 February 2014 at 3:48pm

If you post some of your code and what you are trying to achieve I may be able to help or point you in the right direction.

You can email me if you like.

Avatar
Bigweb

Community Member, 5 Posts

2 March 2014 at 9:51am

I have tried implementing FrontendHtmlEditorField - it works in a way of showing the editor, but it submits blank fields.

This is really upsetting - the functionality that SHOULD work does not work for years now, and noone fixed it :(

If anyone has a solution - please post it here.

Thanks.

Avatar
Vix

Community Member, 25 Posts

2 March 2014 at 5:49pm

The code that Thomas posted in response to my original query did work for me.

My problem was that I had two forms on one page, one that was hidden until you clicked another link (then the first form was hidden). As the HTMLEditorField had the same id in both forms that stopped the JQuery from working correctly (it did not have a unique id to attach the content to). When I changed the fields name (and therefore its automatically generated ID from Silverstripe) so that both editor fields had a unique ID, it then worked correctly as expected.

Perhaps if this is not working for you, try changing the field to a normal 'TextAreaField' and seeing if that actually submits the data or if perhaps it is an error elsewhere.

You might also need to add this:

<script>
$(window).load(function(){
      $('#your_field_id').css('visibility', 'visible');
});

</script>

Avatar
Bigweb

Community Member, 5 Posts

3 March 2014 at 10:25pm

OK,

we have sorted it out . the FrontendHtmlEditorField hack from Thomas works fine for ONE field. However - we had 5 HTML areas, so the script would iterate several times including required JS , and that would break it . SO in my example i had to change from

class FrontendHtmlEditorField extends HtmlEditorField {

public function __construct($name, $title = null, $value = '') {
parent::__construct($name, $title, $value);
self::include_js();
}

public static function include_js() {
parent::include_js();
Requirements::customScript("ssTinyMceConfig.editor_selector='frontendhtmleditor';
ssTinyMceConfig.theme_advanced_buttons1='bold,italic,bullist';
ssTinyMceConfig.theme_advanced_buttons2='';
ssTinyMceConfig.theme_advanced_buttons3='';
ssTinyMceConfig.theme_advanced_buttons3='';
ssTinyMceConfig.valid_elements='p,strong/b,em,br,ul,li';
tinyMCE.init(ssTinyMceConfig);");
}
}

to

class FrontendHtmlEditorField extends HtmlEditorField {

public function __construct($name, $title = null, $value = '') {
parent::__construct($name, $title, $value);

}
}

(Which basically mean you can use standard HtmlEditorField, as nothing is left in this class )

and placing

ssTinyMceConfig.editor_selector='frontendhtmleditor';
ssTinyMceConfig.theme_advanced_buttons1='bold,italic,bullist';
ssTinyMceConfig.theme_advanced_buttons2='';
ssTinyMceConfig.theme_advanced_buttons3='';
ssTinyMceConfig.theme_advanced_buttons3='';
ssTinyMceConfig.valid_elements='p,strong/b,em,br,ul,li';
tinyMCE.init(ssTinyMceConfig);

into one JS file in $(document).ready(function() {});
then including it through requirements on a Page.php

Avatar
colymba

Community Member, 25 Posts

18 March 2014 at 1:03am

The normal HTMLEditorField works just fine in the frontend, you just need to implement HtmlEditorField_Toolbar yourself.

See doc here: http://doc.silverstripe.org/framework/en/topics/rich-text-editing#using-the-editor-outside-of-the-cms

Avatar
MJA

Community Member, 16 Posts

11 June 2014 at 10:35pm

Bump

Having exactly this issue

@thomas.paulson
Your code worked perfectly
That has saved me a couple hours worth of head scatching
So thanks a lot

Go to Top