Markup CKEditor (for Form Builder)

[Robin S]

Markup CKEditor (for Form Builder)

An inputfield for displaying markup editable via CKEditor.

The module is intended for use with the Form Builder module. Allows blocks of static text to be included within a form, which can be edited in the form settings using CKEditor.

Screenshots

Usage

Install the Markup CKEditor module.

In the Form Builder module settings, add "MarkupCKEditor" to "Inputfield types to use with FormBuilder".

In your form settings, add a new field of type "Markup CKEditor". Enter the text you want to show in this field using "Markup Text" on the "Details" tab.

Configuration

In the module config you can set items for the CKEditor toolbar that will apply to all Markup CKEditor fields.

If you want to insert images in your markup field then add "Image" to the toolbar items to enable the standard CKEditor image plugin. The ProcessWire image plugin is not usable because in a FormBuilder form there is no page to store images in.

Advanced

There is a InputfieldMarkupCKEditor::ckeReady hookable method for users who want to do advanced customisation of the CKEditor inputfield.

It receives three arguments:

• The InputfieldCKEditor object
• The form as a FormBuilderForm object
• The field as a FormBuilderField object

Example

$wire->addHookAfter('InputfieldMarkupCKEditor::ckeReady', function(HookEvent $event) {
    /** @var InputfieldCKEditor $cke */
    $cke = $event->arguments(0);
    /** @var FormBuilderForm */
    $form = $event->arguments(1);
    /** @var FormBuilderField $field */
    $field = $event->arguments(2);

    if($form->name === 'test_form' && $field->name === 'my_cke_markup_field') {
        $cke->contentsCss = '/site/templates/MarkupCKEditor/contents.css';
        $cke->stylesSet = 'ckstyles:/site/templates/MarkupCKEditor/ckstyles.js';
    }
});

 

http://modules.processwire.com/modules/inputfield-markup-ckeditor/
https://github.com/Toutouwai/InputfieldMarkupCKEditor

[cstevensjr]

Very nice!  Thanks for producing this.

[cstevensjr]

Please add this module to the official module directory

Edited December 13, 2017 by cstevensjr
corrected spelling

[Robin S]

On 13/12/2017 at 2:07 PM, cstevensjr said:

Please add this module to the official module directory

The module has been approved for the directory now, and the link is in the first post.

[Arcturus]

Thanks for this module, Robin. Note that the download link on the module page is broken.

[Robin S]

2 minutes ago, Arcturus said:

Note that the download link on the module page is broken.

Thanks, fixed now.

[Arcturus]

This may help others.

You're going to get labels for this field's output that you probably won't need (no fault of this module). This CSS

.InputfieldMarkupCKEditor .InputfieldHeader { 
  display: none;
}

will hide them visually, while this JavaScript function

(function () {
  var labels = document.querySelectorAll('.InputfieldMarkupCKEditor .InputfieldHeader');
  for (var i=0; i < labels.length; i++) {
    labels[i].setAttribute('aria-hidden', 'true');
  }
})();

will hide them from screen readers.

[gregory]

Hi, does the module also support multiple languages?

[Robin S]

3 hours ago, gregory said:

Hi, does the module also support multiple languages?

No, I don't think it does, because it extends InputfieldMarkup and it seems that InputfieldMarkup does not support multiple languages.

As a workaround maybe you can add one MarkupCKEditor field per language and then hide the ones not needed using CSS or a FormBuilder hook. If you have questions about how to hide fields like this then the FormBuilder sub-forum would be the place to ask.

[Robin S]

v0.1.1 released. Adds a config option to hide the inputfield label in the form.

Note: this feature not currently working for the Basic framework due a FormBuilder issue.

[Arcturus]

If you've customized the CSS for the content within your regular CKEditor fields, you can bring that styling over to this module by adding the following to InputfieldMarkupCKEditor.module around line 51.

$f->attr('baseHref', '/');
$f->attr('contentsCss', '/site/modules/InputfieldCKEditor/ckeditor.css');

 

[Krlos]

Hello, this module is great!

I see that the image upload button is not available, I need to add an image, is it possible?

[Robin S]

On 9/9/2020 at 1:05 PM, Krlos said:

I see that the image upload button is not available, I need to add an image, is it possible?

You can't use the PW core image plugin because in FormBuilder there is no page to store images in.

But I have just released v0.1.2 which lets you configure a global toolbar for all Markup CKEditor fields. If you add "Image" to the toolbar setting you can use the standard CKEditor image plugin to insert an image by URL.

 

[Krlos]

10 hours ago, Robin S said:

But I have just released v0.1.2 which lets you configure a global toolbar for all Markup CKEditor fields. If you add "Image" to the toolbar setting you can use the standard CKEditor image plugin to insert an image by URL.

Thank you! Works great!

 

[Arcturus]

Has anyone figured out how to get custom styles working with this module (short of changing the mystyles.js file in /wire/modules/Inputfield/InputfieldCKEditor)?

After line 55 InputfieldMarkupCKEditor.module:

$cke->attr('baseHref', '/'); // Works
$cke->attr('contentsCss', '/site/modules/InputfieldCKEditor/ckeditor.css'); // Works
$cke->attr('stylesSet', 'ckstyles:/site/modules/InputfieldCKEditor/ckeditor.js'); // Does nothing :(

 

[Robin S]

@Arcturus, I just released v0.1.4 which adds a hookable method for users like yourself who want to do advanced customisation of the CKEditor inputfield, so you don't need to hack the module itself. See the updated readme.

Setting the stylesSet property is working for me.

$wire->addHookAfter('InputfieldMarkupCKEditor::ckeReady', function(HookEvent $event) {
	/** @var InputfieldCKEditor $cke */
	$cke = $event->arguments(0);
	/** @var FormBuilderForm */
	$form = $event->arguments(1);
	/** @var FormBuilderField $field */
	$field = $event->arguments(2);

	if($form->name === 'test_form' && $field->name === 'my_cke_markup_field') {
		$cke->contentsCss = '/site/templates/MarkupCKEditor/contents.css';
		$cke->stylesSet = 'ckstyles:/site/templates/MarkupCKEditor/ckstyles.js';
	}
});

CKEDITOR.stylesSet.add( 'ckstyles', [
	{ name: 'Special heading', element: 'h2', attributes: { 'class': 'special-heading' } }
]);

Make sure the prefix you are using in the setStyles property matches the style set name in the JS file. 

 

[Arcturus]

Thanks for the module update, Robin!

This is probably a minor issue, but I ran into a parade of errors with v0.1.4 and FormBuilder v.39 when I went to edit an existing field value after updating. In fairness, v.39 is quite old, and the errors disappeared after I updated to v.52. You may need to note a minimum version of FormBuilder in your module's requirements.

[Robin S]

On 8/23/2022 at 9:31 AM, Arcturus said:

the errors disappeared after I updated to v.52

Thanks for the report. It's hard to know when FormBuilder methods were added because there are no @since tags in the code. In v0.1.5 I've changed to older FB methods for better backwards compatibility.