Jump to content

Markup CKEditor (for Form Builder)


Robin S
 Share

Recommended Posts

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

2017-07-07_163113

2017-07-07_163135

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

  • Like 13
Link to comment
Share on other sites

  • 5 months later...
  • 3 months later...

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.

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...
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.

Link to comment
Share on other sites

  • 8 months later...
  • 10 months later...

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');

 

Link to comment
Share on other sites

  • 8 months later...
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.

2020-09-10_151646.png.aad390116410479b61250d848e4acec7.png

2020-09-10_152108.png.4dfabca8566957764049c22f007345d3.png

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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 :(

 

Link to comment
Share on other sites

@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' } }
]);

2022-08-09_105313.png.a1fa8a11a5f8e8028c251b4a180d7e94.png

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

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

  • Like 1
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
 Share

×
×
  • Create New...