WYSIWYG Editor Instead Of Textarea

Hi Chronoformics 😀
I Have A Form With Few Textboxes And Few Textareas...
I Want To Use WYSIWYG Editor Instead Of TextArea....
Any Tips How.. ?
Currently All Data From All Textboxes And Textareas Is Saved In DB (No Emails Sent)
If Somehow Using WYSIWYG Becomes Possible, Then Can Data From WYSIWYG Be Saved To Database.
Thanks 🙂

Hi Codelab,

The code to display an editor is

<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'fulltext',  '<div>default value</div>', '80%', '350', '55', '20', false  ) ;
?>

The JEditor docs are here to see what the parameters are.

Bob

Thanks Bob..
It Displays WYSIWYG Editor..
But Chronoforms Does Not Detects It As One Of The Control On The Form (Like Other HTML) And Thus Not Saving It To Database...
Any Tips... 🤨

Hi CodeLab,

The 'Save the Data' section here suggests you need to add some Javascript.

Bob

Thanks Bob..
It Displays WYSIWYG Editor..
But Chronoforms Does Not Detects It As One Of The Control On The Form (Like Other HTML) And Thus Not Saving It To Database...
Any Tips... 🤨

at the top of the form code add a hidden field with the same name as the editor name!

Regards
Max

I'm having trouble applying the instructions in the "How to use the editor in a component" tutorial to the Chronoforms code. I thought I'd do something easy like display the value of the WYSIWYG editor in an alert onsubmit, but I can't seem to access that value. I get undefined if I try "alert(document.ChronoContact_myform.myfield.value)" in the javascript. When I copy the code from the tutorial, I get "'document.adminForm.task' is null or not an object". Am I missing something simple?

OK, alert(document.getElementById("myField").value); gets me the value of the editor. My problem now is that the form won't post. Here's my javascript code:

function submitbutton(pressbutton) {
var form = document.ChronoContact_myForm;
if (pressbutton == 'cancel') {
submitForm( pressbutton ); return;
}

<?php
$editor =& JFactory::getEditor();
echo $editor->save( 'myField' );
?>

submitForm(form);
}

And the form code is:

<?php echo JHTML::_( 'form.token' ); ?>
<button type="button" onclick="submitbutton('save')"><?php echo JText::_('Save') ?></button>
<button type="button" onclick="submitbutton('cancel')"><?php echo JText::_('Cancel') ?></button>

Does anything stand out as wrong?

Hi ProfScott,

Why do you need this code:

function submitbutton(pressbutton) {
var form = document.ChronoContact_myForm;
if (pressbutton == 'cancel') {
submitForm( pressbutton ); return;
}

<?php
$editor =& JFactory::getEditor();
echo $editor->save( 'myField' );
?>

submitForm(form);
}

?

its not needed in your situation I think!

Regards
Max

You're absolutely right! In trying to adapt the Joomla tutorial, I apparently fixed whatever problem I was having while creating a new one in the form of that javascript. The form submits successfully now. Thanks!

I am having trouble getting a WYSIWYG editor to display in a tabbed form. When I place the editor before or after the code for the tabbed form, it works:

<?php
jimport('joomla.html.pane');
$pane   =& JPane::getInstance('tabs');
echo $pane->startPane("paneid");
echo $pane->startPanel( 'First Tab', "tabid0" );
?>
Title 
echo $pane->endPanel();
echo $pane->startPanel( "Next Tab", 'tabid1' );
?>
<p>Field in second tab <input type="text" name="some_field" /></p>
<?php
echo $pane->endPanel();
echo $pane->endPane();
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'title', 'some text', '80%', '350', '55', '30', false ) ;
?>

However, when I try to include it within a tab, I get the toolbar but no editor:

<?php
jimport('joomla.html.pane');
$pane   =& JPane::getInstance('tabs');
echo $pane->startPane("paneid");
echo $pane->startPanel( 'First Tab', "tabid0" );
?>
Title 
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'title', 'some text', '80%', '350', '55', '30', false ) ;
echo $pane->endPanel();
echo $pane->startPanel( "Next Tab", 'tabid1' );
?>
<p>Field in second tab <input type="text" name="some_field" /></p>
<?php
echo $pane->endPanel();
echo $pane->endPane();
?>

Any ideas about what's causing this?

Thanks!

mmm, no idea, try to change the editor name from "title" to something else ?

Max

I tried that -- no luck. I've been investigating whether there is anything in the CSS, but, so far, I can't find anything there either...

I tried your code and it works but the tabs are not visible, only the tabs text, so try wit ha different Joomla template, I think something interferes with them!

Max

No worries if the tabs are not visible; that's just because I didn't provide any CSS for them. After a little bit more testing, I have discovered that the problem--that the editable textarea does not appear--is a Google Chrome incompatibility (it worked in IE and Firefox). Since the problem seems to be caused by nesting Joomla objects, I'm not sure that there's any tweaking that can be done in Chronoforms. Still it's nice to have the problem on record in case anyone else encounters it.

Thanks again!

You mean that you can't open any editor area in Google Chrome ?

Max

It works fine--even in Google Chrome--when I insert the editor inside a form on its own. But when I try to do a tabbed form and put an editor inside a tab, IE and Netscape show a normal editor whilst Google Chrome shows an editor area with toolbar, but with a grey editable section and no cursor (i.e. it's not editable). Weird!

i think this may be an incomplete page loaded or some js conflict, I think Chrome is not yet stable, it makes some problems!

Max

We're trying to insert a WYSIWYG editor in the Form HTML tab in the Admin area. I'm not sure how to apply what has been discussed here to this pre-existing area.

I believe the code you'll have to edit can be found on
administrator/components/com_chronocontact around line 1782 where it states 'Form HTML'.

Any help here appreciated. THanks.

Hi ctdesign87,

That sounds like a major hack - I wouldn't even think about it. What are you trying to achieve that the Wizard can't do?

Bob

I see the code to show a wysiwyg editor instead of the text area but I am a newby where does the code go? In the form code somewhere(whereveer that is?) or in a chronoforms component file? Please be as specific as possible
Any help would be much appreciated.

Thanks,
Robert

Hi Robert,

This may be a step too far for your current experience.

Open the Form Editor by clicking the 'Form Name' link in the ChronoForms Forms Manager; click the Form Code tab and then the [+/-] link beside the Form HTML label.

Look in the code for the textarea tha tyou want to adapt. If the code was created with the ChronoForms Wizard it will look something like this.

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <textarea class="cf_inputbox" rows="3" id="text_0" title="" cols="30" name="text_0"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

Delete this line

<textarea class="cf_inputbox" rows="3" id="text_0" title="" cols="30" name="text_0"></textarea>

and replace it with this code:

<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'text_0', '', '80%', '350', '55', '30', false ) ;
?>

Note that 'text_0' needs to match the name of the texta rea that is being replaced. This should work OK. The only possible problem is that ChronoForms will not be able to automatically republish the contents of this input.

Bob