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 AndZyk
      Hello,
      I am currently building a intranet which will be hosted on the local network of a company. This intranet has many links to files on their fileserver with the protocol file://.
      So for example the links look like this file://domain.tld/filename.ext
      When I try to insert such a link into a URL field, I get the error, that only the protocol http:// is allowed. When I try to insert such a link into a CKEeditor link, it gets stripped out. Is it possible to insert such links into the FieldType URL and CKEditor.
      I know that I could use a FieldType Text or insert a RewriteRule in the .htaccess file, but I am looking for a more elegant solution. 😉
      Regards, Andreas
    • By Roberts R
      Hello.
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
       
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. There is an option in the module config to include files from Repeater fields in the edited page. Nested Repeater fields (files inside a Repeater inside another Repeater) are not supported. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By Peter Knight
      I have a few web forms which require testing on a weekly basis and I don't want the recipients (administrators) to receive these test emails.
      What would be a good way to test approx 15 forms from the front end and have the test delivered a list of secondary administrator recipients?
      I'm thinking that I could have some kind of config file which watches for a trigger word or email and then understands that it's a test and to bypass the normal admins?
      All of the forms ask for an email address so I could setup an email such as 'testform@email.not' etc which my config file (hook?) would watch for.
      Or is there a better way to do this?
      Additionally, I have a few extra requirements...
      Forms should goto an alternative success page. This is because I don't want my test to skew my Google Analytics conversion tracking Forms would need to be tested from the front-end and not the PW admin area Any advice appreciated.
      BTW I realise this should be posted in the proper FormBuilder support forum. I am in the process of renewing my license for access to that support forum.
       
    • By Chris B
      Hi,
      My name is Chris, i have been using Processwire for several months. I had the opportunity to create several sites with this one. Despite being great tool, I often encounter the same problem in the administration.
      I am continually disconnected (logout) for no specific reason. It's every time: after a page change. Ex: I send a form or simply a page change via a link.
      I checked the logs, messages, etc. but there is nothing related to this problem.
      Thank you for your support 🙂
×
×
  • Create New...