Custom Field Customizable Javascript Plugin

The CMS Questions
1

HI there,

I’m currently building a custom Kirby field and most of its interaction is written in Javascript. There’s a dozen of options available when you initialize the script. I’d like to be able to set field defaults via the c::set methods in my config.php file and have overrides in my field options in my blueprint. I can’t figure out how to do it though.

The settings are saved in the class’ properties, how to I return these values to my Javascript initialization function ?

I can’t seem to be able to make the bridge between PHP and JS.

Thanks

2

I think you have two possibilities:

  1. use a data attribute (with a json array of options)
  2. use Ajax (e.g. maybe call a route that returns an array of options)
3

I’m guessing I can’t build and run a script tag within the panel. Is that correct?

4

No, but I don’t think I quite understand what you are trying to achieve.

5

With php you can send values to a data attribute. Then you can get it with js. Like @texnixe said.

6

I’m currently making a TinyMCE field plugin for Kirby. TinyMCE uses an init method to set its options.

Example:

tinymce.init({
  selector: 'textarea',
  //height: 500,
  theme: 'modern',
  plugins: [
    'lists link image anchor pagebreak',
    'searchreplace visualblocks visualchars code fullscreen',
    'media nonbreaking table',
    'paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  image_advtab: true,
  entity_encoding : "raw",
  element_format : 'html',
  extended_valid_elements: 'td,-p',
  valid_children: '-td[p],-td[div]'
 });

I can put the init method in my main plugin JS file, but if I wanted the options to be customizable by the user via Kirby’s c::get() methods, how would I do that?

Let’s say I want to change entity_encoding, I don’t like the default value of raw. It can take 2 other values numeric and named.

I’d love to be able to do this via my config.php file or my blueprint.

c::set('plugin.tinymce.entityencoding', 'named');

I guess I could have a PHP file output JS with appropriate headers. Not sure…

7

Oh ok, yeah seeing it written down makes more sense to me.

I’ll see what I can do with this. Thanks @texnixe and @jenstornell.

8

Maybe an even better example: