Jump to content
prestoav

CKEditor as a Formbuilder Front End Field

Recommended Posts

Hi folks.
I'm building a Formbuilder form to create new advert pages in a marketplace. Formbuilder is ideal for this. I need to add a description field that allows text to be added with line breaks etc. so showing a CKEditor field would be ideal (i.e. exactly like the field I'm typing into right now)!.

Does anyone know if it's possible to add a CKEditor field to the front end presentation fo a Formbuilder field, maybe via a module or such?

Many thanks!

Share this post


Link to post
Share on other sites

Just go to FB module settings (not form-settings) and add it as an allowed input type: module/edit?name=FormBuilder&collapse_info=1

 

Share this post


Link to post
Share on other sites

Hi dragan,

perfect, thank you! I knew it would be there somewhere..

Only one issue now, I see a space on the front end where the editor window will go but no styling on the CKEditor window?

I've tried using Embed method C and D but, although I see a text area box, there's no CKEditor styling or tools. Here's the code from the page using Embed method D (Custom Embed)...

		<div class='Inputfield Inputfield_body InputfieldCKEditor' id='wrap_Inputfield_body'>
            <label class='InputfieldHeader' for='Inputfield_body'>Body text</label>
            <div class='InputfieldContent '>
                <textarea id="Inputfield_body" class="InputfieldCKEditorNormal InputfieldMaxWidth" name="body" rows="5" data-configName="InputfieldCKEditor_body"></textarea>
                <script>
                    ProcessWire.config.InputfieldCKEditor.editors.Inputfield_body = 'InputfieldCKEditor_body';
                    config.InputfieldCKEditor.editors.Inputfield_body = 'InputfieldCKEditor_body';
                </script>
            </div>
        </div>

I'm getting the styles in the <head> too:

	<link type='text/css' href='/idreamav/site/modules/FormBuilder/FormBuilder.css' rel='stylesheet' />
	<link type='text/css' href='/idreamav/site/modules/FormBuilder/frameworks/basic/main.css' rel='stylesheet' />
	<link type='text/css' href='/idreamav/wire/modules/Inputfield/InputfieldPage/InputfieldPage.css?v=107-1577984776' rel='stylesheet' />
	<link type='text/css' href='/idreamav/wire/modules/Inputfield/InputfieldCheckbox.css?v=105-1577984776' rel='stylesheet' />
	<link type='text/css' href='/idreamav/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.css?v=161-1577984776' rel='stylesheet' />
	<link type='text/css' href='/idreamav/site/modules/FormBuilder/InputfieldFormBuilderFile.css?v=1-1571064721' rel='stylesheet' />
	<link type='text/css' href='/idreamav/site/modules/FormBuilder/themes/basic/jquery-ui.css' rel='stylesheet' />

And scripts in the footer (or should these be in the <head> too)?

<script type='text/javascript'>var _pwfb={config:{"InputfieldCKEditor":{"language":"en","timestamp":"2015030801.162","plugins":{"sourcedialog":"\/idreamav\/wire\/modules\/Inputfield\/InputfieldCKEditor\/plugins\/sourcedialog\/plugin.js"},"editors":[]},"InputfieldCKEditor_body":{"baseHref":"\/idreamav\/","contentsCss":"\/idreamav\/wire\/modules\/Inputfield\/InputfieldCKEditor\/contents.css","extraPlugins":"pwimage,pwlink,sourcedialog","removePlugins":"image,magicline","toolbar":[["Format","Styles","-","Bold","Italic","-","RemoveFormat"],["NumberedList","BulletedList","-","Blockquote"],["PWLink","Unlink","Anchor"],["PWImage","Table","HorizontalRule","SpecialChar"],["PasteText","PasteFromWord"],["Scayt","-","Sourcedialog"]],"format_tags":"p;h1;h2;h3;h4;h5;h6;pre;address","language":"en","entities":false,"uploadUrl":"","pwUploadField":"","pwAssetPageID":0,"height":"10em","stylesSet":"mystyles:\/idreamav\/wire\/modules\/Inputfield\/InputfieldCKEditor\/mystyles.js","customConfig":"\/idreamav\/site\/modules\/InputfieldCKEditor\/config-body.js?nc=1567498470"},"debug":false,"urls":{"root":"\/idreamav\/"}}};if(typeof ProcessWire=='undefined'){ProcessWire=_pwfb;}else{for(var _pwfbkey in _pwfb.config) ProcessWire.config[_pwfbkey]=_pwfb.config[_pwfbkey];}if(typeof config=='undefined') var config=ProcessWire.config;_pwfb=null;</script>
	<script type='text/javascript' src='/idreamav/wire/modules/Inputfield/InputfieldPage/InputfieldPage.min.js?v=107-1577984776'></script>
	<script type='text/javascript' src='/idreamav/wire/modules/Inputfield/InputfieldCKEditor/ckeditor-4.12.1/ckeditor.js'></script>
	<script type='text/javascript' src='/idreamav/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=1577984776'></script>
	<script type='text/javascript' src='/idreamav/wire/modules/Jquery/JqueryUI/modal.min.js?v=1577984776'></script>
	<script type='text/javascript' src='/idreamav/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.min.js?v=161-1577984776'></script>
	<script type='text/javascript' src='/idreamav/wire/templates-admin/scripts/inputfields.js'></script>
	<script type='text/javascript' src='/idreamav/site/modules/FormBuilder/form-builder.js'></script>



 

Share this post


Link to post
Share on other sites

Yeah well, I just did a quick test-run with embed method A. I'm not sure if this is supported at all with other embed types.

Did you check the browser console for errors?

btw: I guess you should have posted this question in the dedicated FB forum, rather than on the official board... FB is a commercial PW module after all. Other users in the future, who search for similar topics/keywords, and narrow down their search to the FB forum only will most probably miss this thread. Your chances that @ryan will jump in with suggestions and answers is also much higher there than on the "open" forum threads.

Share this post


Link to post
Share on other sites

Thanks again dragan.

Console was a good call as it looks to be an issue with a missing pwlink plugin. Reloaded that then disabled it and all is working!

Thanks for your help!

Share this post


Link to post
Share on other sites

@prestoav I needed something similar however I did not want to give the front end users all the features available in the PW CKEditor menu. It was more difficult for me to reduce the feature set than start afresh for the front end and I chose TinyMCE over CKEditor.

In the form, I created a textarea field with no textformatters and a limit of 5000 characters. In my template:

        <script src="<?=$config->urls->templates?>scripts/tinymce/tinymce.min.js"></script>
        <script>
            // NoMinify
            tinymce.init({
                selector: '#Inputfield_introduction',
                height: 300,
                menubar: false,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
                setup: function(ed) {
                    var maxlength = parseInt($("#" + (ed.id)).attr("maxlength"));
                    var count = 0;
                    ed.on("keydown", function (e) {
                        count++;
                        if (count > maxlength) {
                            alert("You have reached the character limit");
                            e.stopPropagation();
                            return false;
                        }
                    })
                }
            });
        </script>

And the end result on the front end:

1663469315_Screenshot2020-01-2919_17_32.thumb.png.ae6350b98c69ced54d4cc8e887a9d555.png

Data is saved correctly in the DB and all good.

PS: If anyone tries to add in a sneaky <script>, it throws 403 Forbidden error

 

  • Like 2

Share this post


Link to post
Share on other sites

Hi PSY!

Thanks for this. Really helpful!

I ended up getting it working once I found the missing PWlink plugin and have disabled some formatting tools too!!!

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By cosmicsafari
      Hi all,
      I have the same form on multiple pages, the idea being that I can populated a hidden field with a page specific value automatically.
      I figured this should be reasonably straight forward but I can't seem to get the following to take effect.
      <?php echo $forms->embed ('my-form-name', array('hidden_field_name' => '666')); ?> No matter what I do, it never updates the default value currently set for said hidden field.
      Feels like I'm missing something really obvious?
      Any ideas?
    • By benbyf
      I have a a form in my site footer that can be accessed anywhere on site, I've added the form in the _inc.php file and added the render in the pages footer.php. However, this works well on the homepage e.g. you can submit said form and get a thank you on reload, doesnt work at all on other pages... Just lots like a fresh reload. Any thing im doing wrong here or ways to diagnose as there isn't an error log for formbuilder etc...?
    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
    • By AndréPortuga
      Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 
      I mean I have a Iframe with this code:
      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
       
      but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?
       
      Thank you,
    • By neophron
      Hi,
      I hope, this is the right place for questions about the Formbuilder (I couldn't find in the ProField support a subsection for the Formbuilder).
      A client needs for his website a random generator of a code (as winning numbers). This generator should be placed in a simple form (name and email) and a random generated code should be visible there.
      This code, or winning number, must be stored in the db together with the name and email. And the participant must receive a confirmation email with this code.
      I know, that the Formbuilder can store and send data to the user. But what about a random generated code? Is this a hook job?
      I found this module: http://modules.processwire.com/modules/process-field-generator/ but it's not for PW 3. 
×
×
  • Create New...