Frontend form with tinymce or ckeditor module

pwFoo · August 23, 2014

Hi

I try to build a frontend form with from template fields.

No problem to generate the form and detect the field type like InputfieldTinyMCE.

But how could I load the InputfieldTinyMCE module to use it in the frontend?

Tried to load the module with module get and print the scripts and styles inside the html head.

But I think editor have to be initialized? Any module method to call?

pwFoo · August 24, 2014

TinyMCE module loaded

$modules->get('InputfieldTinyMCE');

But form fields are unstyled and without TinyMCE.

scripts and styles also loaded

<head>
    <script type="text/javascript" src="/pwProfile/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=183"></script>
    <script type="text/javascript" src="/pwProfile/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=193"></script>

    <script type="text/javascript" src="/pwProfile/wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.js?v=358"></script>
    <script type="text/javascript" src="/pwProfile/wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.5.8/tiny_mce.js"></script>

    <link type="text/css" href="/pwProfile/wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.css?v=358" rel="stylesheet" </head>

TinyMCE should be initialized at InputfieldTinyMCE.js? But it's loaded before InputfieldTinyMCE/tinymce-3.5.8/tiny_mce.js?

Changed it for testing but no editor loaded...

adrian · August 24, 2014

I can't see what is missing, but have you tried this approach to ensure that your call to load the module also loads all required js and and css files:

foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

pwFoo · August 24, 2014

Yes, head output was generated that way

pwFoo · August 24, 2014

Debugged and also changed to ckeditor for more tests...

Both have a problem with the config variable

ReferenceError: config is not defined

ckeditor generates...

<textarea id="Inputfield_body" class="FieldtypeTextarea InputfieldMaxWidth" name="body" rows="5">Test</textarea><script>CKEDITOR.replace('body', config.InputfieldCKEditor_body);</script>

Comparable error with tinymce.

So were should config.Inputfield<EDITOR> ... set?

pwFoo · August 24, 2014

Fixed...

Needed code

        <script type="text/javascript">
                <?php
   
                $jsConfig = $config->js();
                $jsConfig['debug'] = $config->debug;                                                          
                $jsConfig['urls'] = array(     
                        'root' => $config->urls->root,
                        'admin' => $config->urls->admin,
                        'modules' => $config->urls->modules,                    
                        'core' => $config->urls->core,                                
                        'files' => $config->urls->files,                     
                        'templates' => $config->urls->templates,                                                   
                        'adminTemplates' => $config->urls->adminTemplates,             
                        );                                                      
                ?>
                                            
                var config = <?php echo json_encode($jsConfig); ?>;                                           
        </script>

pwFoo · August 25, 2014

Finished first version of my helper module.

Generate a frontend form based on page template fields.

Additional load inputfield modules (like ckeditor or tinymce) and prefill form fields with page field values (to build a edit form) via a hook (default loaded at the moment).

Sure some bug fixes and improvements needed, but first version renders a form with page field values prefilled and ckeditor loaded.

Two unfinished modules will be rewritten and based on template2form(? don't know how to call it *g*) module...

pwFoo · August 28, 2014

Strange...

First thought I have to load the modules (InputfieldTinyMCE, CKEditor) because editor wasn't loaded with via form api created form...

But now it works without a

$modules->get('CKEditor');

or

$modules->get('InputfieldTinyMCE');

So... take the form api care about loading such modules or not?! Or is it some kind of browser / PW cache?

marcus · September 13, 2014

I'll try to get CKEditor in a front end form, did some research here but still got the feeling that I'm missing an important step.

That's what I do so far:

1. Referencing the module (I'm working with 2.4.18, so its available)

$form = $modules->get('InputfieldCKEditor');
$form->render(); // not sure about this. But its an aptly named public method of the module

Though I never found example code incorperating render();

2.

Put that into the site's head in order to get the necessary JS and CSS loaded:

foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

3. Within the template I would like to have CKE, the following code

<label for="body">Beschreibung:</label>
<textarea id="Inputfield_body" class="FieldtypeTextarea InputfieldMaxWidth " name="body" rows="5" name="body">
...
</textarea>
<script>CKEDITOR.replace('body', config.InputfieldCKEditor_body);</script>

Neither CKEditors JS nor CSS gets loaded and therefore it doesn't work (JS object CKEDITOR is undefined) so I get the feeling that I initalize the whole thing in a wrong way. Is there any documentation on this I have missed? Same thing goes for a jQueryUI datepicker later - I got the feeling that haven't yet grasped the basic principle.

Thanks!

pwFoo · September 13, 2014

After some testing that worked for me

// needed by ckeditor!
$modules->get('JqueryCore');

// load ckeditor
$modules->get('InputfieldCKEditor');

// here you have to build a form with InputfieldForm module and form fields!
// Examples:

You need js config in the html head section before module styles and scripts!

// ckeditor needs some js config BEFORE you load the module styles and scripts
        <script type="text/javascript">
                <?php
   
                $jsConfig = $config->js();
                $jsConfig['debug'] = $config->debug;                                                          
                $jsConfig['urls'] = array(     
                        'root' => $config->urls->root,
                        'admin' => $config->urls->admin,
                        'modules' => $config->urls->modules,                    
                        'core' => $config->urls->core,                                
                        'files' => $config->urls->files,                     
                        'templates' => $config->urls->templates,                                                   
                        'adminTemplates' => $config->urls->adminTemplates,             
                        );                                                      
                ?>
                                            
                var config = <?php echo json_encode($jsConfig); ?>;                                           
        </script>

After that, you can output the modules styles and scripts

foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

marcus · September 13, 2014

Thanks! Added the jQueryCore dependency (should have thought of this...) and the $jsConfig to the head. Still, there's no rendering of the modules styles and scripts, although I included...

foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

... right after the $jsConfig and before I load module CKEditor.

pwFoo · September 13, 2014

You have to load the ckeditor before you output scripts and styles Load the module adds the css and js to $config->scripts and $config->styles.

foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

marcus · September 13, 2014

You have to load the ckeditor before you output scripts and styles Load the module adds the css and js to $config->scripts and $config->styles.
foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";

Hm, tried that (1. jsConfig 2. loading of jQueryCore + InputfieldCKEditor 3. loading of scripts, styles) - no change.

Martijn Geerts · September 13, 2014

Great points pwFoo, 2 minor points:

CSS should be outputted before the scripts.

->unique() can be left of, as ->styles & ->scripts are always unique.

pwFoo · September 13, 2014

I have build an module with frontend form, but will rewrite it (again) to make it more flexible...

https://processwire.com/talk/topic/7508-template2form-module-helper/

But at the source code you should see how it works (inside the module).

You also need to build a form!

@Martijn Geerts

Thank's, was just quick search the forum and paste there

Martijn Geerts · September 13, 2014

Skip this, sorry:

~~For your front-end I think it's wiser not to rely on InputfieldCKEditor, but rather load your own.~~

~~The possibility is that changes to InputfieldCKEditor can effect your front-end.~~

marcus · September 13, 2014

Thanks! Will look into it and try again after one more coffee

/edit: Ah yes, I didn't create the surrounding form via api, but manually...

Edited September 13, 2014 by marcus

marcus · September 23, 2014

Just for the record: Finally got it working with the following order:

jQuery Core module init
CKeditor module init
jsConfig inline JS
All other necessary styles and scripts via iterating through $config->styles and $config->scripts
Creation of form via api

marcus · September 29, 2014

But I got one follow-up question: how/where can I configure the instance of CKeditor I created programmatically?

Thanks!

gebeer · October 7, 2014

I followed this thread carefully but still cant get CKEditor to work on the frontend.

I'm building my form through the API.

My setup:

<script>
<?php
$jsConfig = $config->js();
$jsConfig['urls'] = array(
    'root' => $config->urls->root,
    'admin' => $config->urls->admin,
    'modules' => $config->urls->modules,
    'core' => $config->urls->core,
    'files' => $config->urls->files,
    'templates' => $config->urls->templates,
    'adminTemplates' => $config->urls->adminTemplates,
    'adminTemplates' => $config->urls->adminTemplates,
);
?>
var config = <?php echo json_encode($jsConfig); ?>;
</script>

<?php

$modules->get('JqueryCore');
$modules->get('CKEditor');
//$modules->get('InputfieldCKEditor');

//$config->styles->prepend($config->urls->adminTemplates . "styles/main.css?v=2");
$config->styles->append($config->urls->adminTemplates . "styles/inputfields.css");
$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=2");

$config->scripts->append($config->urls->JqueryUI . "JqueryUI.js");
$config->scripts->prepend($config->urls->JqueryCore . "JqueryCore.js");
$config->scripts->append($config->urls->adminTemplates . "scripts/inputfields.js");

So I think I'm loading everything necessary and in the correct order.

Even when I switch $modules->get('InputfieldCKEditor'); for $modules->get('CKEditor');, the editor doesn't show.

I get console errors:

Uncaught TypeError: Cannot read property 'editors' of undefined (index):111
Uncaught TypeError: Cannot read property 'plugins' of undefined InputfieldCKEditor.js?v=128:16

line 111 is

<textarea id="Inputfield_ad_content" class="FieldtypeTextarea InputfieldMaxWidth" name="ad_content" rows="5"></textarea>

All scripts are loaded and visible in the resources tab of chrome debug console.

Now I'm lost and any pointers to a solution would be great.

pwFoo · October 7, 2014

Could you also post the generated html source code (header, scripts)?

gebeer · October 7, 2014

GOT IT:

After moving the $jsConfig script part to the head of my _main.php template file, I don't get the console errors anymore and I have a shiny CKEditor interface attached to my textarea

pwFoo · October 7, 2014

Fine

pwFoo · November 9, 2014

Delete that post, please...

Update

Sorry, this post. Yes.

Edited December 17, 2014 by pwFoo
Which post? This post?

pwFoo · November 9, 2014

Get working ckeditor (regular mode) with Processwire 2.5 in the frontend (jsConfig and JqueryCore is required!).

To get the ckeditor loaded in inline mode it's important to not load JqueryCore! It won't work...

After figured that out I noticed that the value isn't set correct .You get the default value every time!

["body"]=> string(8) ":IGNORE:"

So the behavior of the ckeditor module is strange...

By the way... shouldn't be added JqueryCore as dependency to InputfieldCKEditor module? Because it won't work without. But JqueryCore will also kill ckeditor in inline mode...

Can't test it with TinyMCE because each try to install it redirects to the ckeditor installation page. So it seems a bug in PW 2.5.

Sign In

Frontend form with tinymce or ckeditor module

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members