Jump to content

Markup CKEditor (for Form Builder)


Robin S
 Share

Recommended Posts

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.

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.

Screenshots

2017-07-07_163113

2017-07-07_163135

 

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

  • Like 12
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

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