Jump to content

Recommended Posts

Posted

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

  • Like 1
  • 3 months later...
Posted
2 minutes ago, Arcturus said:

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

Thanks, fixed now.

Posted

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

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

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

 

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

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

 

Posted

@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
  • 2 weeks later...
Posted

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.

Posted
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

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...