Jump to content

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!

Link to comment
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>
                    ProcessWire.config.InputfieldCKEditor.editors.Inputfield_body = 'InputfieldCKEditor_body';
                    config.InputfieldCKEditor.editors.Inputfield_body = 'InputfieldCKEditor_body';

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>


Link to comment
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.

Link to comment
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>
            // NoMinify
                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) {
                        if (count > maxlength) {
                            alert("You have reached the character limit");
                            return false;

And the end result on the front end:


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
Link to comment
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

  • Create New...