Robin S Posted July 7, 2017 Share Posted July 7, 2017 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 13 Link to comment Share on other sites More sharing options...
cstevensjr Posted July 7, 2017 Share Posted July 7, 2017 Very nice! Thanks for producing this. 2 Link to comment Share on other sites More sharing options...
cstevensjr Posted December 13, 2017 Share Posted December 13, 2017 (edited) Please add this module to the official module directory Edited December 13, 2017 by cstevensjr corrected spelling 1 Link to comment Share on other sites More sharing options...
Robin S Posted January 6, 2018 Author Share Posted January 6, 2018 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. 1 Link to comment Share on other sites More sharing options...
Arcturus Posted April 30, 2018 Share Posted April 30, 2018 Thanks for this module, Robin. Note that the download link on the module page is broken. 1 Link to comment Share on other sites More sharing options...
Robin S Posted April 30, 2018 Author Share Posted April 30, 2018 2 minutes ago, Arcturus said: Note that the download link on the module page is broken. Thanks, fixed now. Link to comment Share on other sites More sharing options...
Arcturus Posted April 30, 2018 Share Posted April 30, 2018 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. 2 Link to comment Share on other sites More sharing options...
gregory Posted May 22, 2018 Share Posted May 22, 2018 Hi, does the module also support multiple languages? Link to comment Share on other sites More sharing options...
Robin S Posted May 22, 2018 Author Share Posted May 22, 2018 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 More sharing options...
Robin S Posted January 23, 2019 Author Share Posted January 23, 2019 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. Link to comment Share on other sites More sharing options...
Arcturus Posted December 12, 2019 Share Posted December 12, 2019 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 More sharing options...
Krlos Posted September 9, 2020 Share Posted September 9, 2020 Hello, this module is great! I see that the image upload button is not available, I need to add an image, is it possible? Link to comment Share on other sites More sharing options...
Robin S Posted September 10, 2020 Author Share Posted September 10, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
Krlos Posted September 10, 2020 Share Posted September 10, 2020 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! 1 Link to comment Share on other sites More sharing options...
Arcturus Posted August 8, 2022 Share Posted August 8, 2022 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 More sharing options...
Robin S Posted August 8, 2022 Author Share Posted August 8, 2022 @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. 1 Link to comment Share on other sites More sharing options...
Arcturus Posted August 22, 2022 Share Posted August 22, 2022 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 More sharing options...
Robin S Posted August 23, 2022 Author Share Posted August 23, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now