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 fruid
      I doubt nobody has seen this issue before…
      when I have an <h2> or <h3> or the likes in a CKEditor-body-field and I delete that header, the h-tag is applied to whatever comes next in line. I'm obviously talking about the WYSIWYG-view. Similar bugs occur when applying an h-tag, that tag sometimes encloses the next line as well. Could be that this happens when the next line is in the same "block"-element and not technically a new line but separated with a <br> but not always…
      When will a new version of CKEditor for PW be released or what's a competitive alternative at this point?
    • By Liam88
      Hello all,
      I'm having a moment with CKeditor and hoping someone will be able to assist.
      I want to change the structure of the table plugin to automatically add the following:
      Schema.org markup to signify it's a table. Aria-label and roles for each of the table elements. At the moment if I add them in manually, the plugin removes them. I'd like to have this as default.  Here is an example: Additional classes. The plugin has the option for a table ID, but where possible I'd rather use classes. I have searched far and wide on the ol Google but struggling on this. I'm not the most experienced and would appreciate any direction on this.
      It's mainly a case of where best to make said adjustments. 
      Thank you in advance!
      Liam
       
    • By 999design
      Hi all,
      Running into an odd error that I can't seem to get my head around.
      We have 2 separately created Formbuilder forms sitting on a single page.
      But we keep experiencing weird results with them, originally we couldn't get one of the forms to ever submit so we ended up disabling CSRF for them which let us get around this issue.
      However it then causes a problem in that with CSRF disabled, one of forms always records 2 entries on submission. Just a straight duplicate within the entries for that form.
      So trying to stop this happening we tried enabling CSRF again and although that does stop the duplicated entry, it ends up giving really weird feedback such as the attached screengrab.
      Hazarding a guess I assume whatever is trigger on submission is firing twice because of the presence of the second form, but I have no idea why this would be the case as they are 2 seperately named forms?
      Any ideas?

    • By Jennifer Stock
      Hi. Sometimes when I select text in a textarea field outfitted with CK Editor, it fails to register as a "Block Style" and therefore the custom styles I have specified for block-level elements are not displayed in the Styles drop-down menu. If I open the page in an incognito window and select the same elements, the Block Style styles appear as expected in the Styles menu.
      Is this a caching issue of some kind? I've played with turning on and off the HTML "quality assurance" options as well as putting my custom styles directly within the CKEditor folder in the /wire directory. Once the field stops registering the selection of block-level elements, it also seems to have simultaneously stripped the custom styles that had been successfully applied to these block-level elements previously.
      Not sure what to do next.
    • 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?
×
×
  • Create New...