Inline editing in custom modules

I’ve created a few custom modules and noticed that I can’t inline edit my text like a standard module would. How would I go about inline editing on custom modules?

Looks like problem is in your codes. Can you share your custom module? So we can review the code and test it.

Here’s my simple custom module for testing purposes:


class AiContent1 extends FLBuilderModule {
  public function __construct() {
        'name'            => __( 'Content 1', 'fl-builder' ),
        'description'     => __( 'A content for the website', 'fl-builder' ),
        'group'           => __( 'Content', 'fl-builder' ),
        'category'        => __( 'General', 'fl-builder' ),
        'dir'             => MY_MODULES_DIR . 'ai-content-1/',
        'url'             => MY_MODULES_URL . 'ai-content-1/',
        'icon'            => 'slides.svg',
        'editor_export'   => true, // Defaults to true and can be omitted.
        'enabled'         => true, // Defaults to true and can be omitted.
        'partial_refresh' => false, // Defaults to false and can be omitted.

FLBuilder::register_module( 'AiContent1', array(
  'my-tab-1' => array(
    'title' => __( 'General', 'fl-builder' ),
    'sections' => array(
      'menu' => array(
        'title'  => __( 'Content', 'fl-builder' ),
        'fields' => array(
          'image' => array(
            'type' => 'photo',
            'label' => __( 'Image', 'fl-builder' ),
          'content'  => array(
            'type'  => 'text',
            'label' => __( 'Content', 'fl-builder' ),
) );


And this is the frontend display:

<div class="ai-content-1">

  <img src="<?php echo $settings->image_src; ?>">
  <?php echo $settings->content; ?>


It works perfectly fine. But I just can’t seem to edit my ‘content’ field inline, I could only do it on the pop up. There’s probably some simple setting that I’m missing here… I appreciate your help. Thanks!

Replace above part with this

'content'  => array(
            'type'  => 'text',
            'label' => __( 'Content', 'fl-builder' ),
            'preview'     => array(
							'type'     => 'text',
							'selector' => '.fl-content',

If you do not add the preview feature, inline editor option will not enable. I tested locally and it is worked perfectly.

2nd step: Edit your frontend.php file like this

<span class="fl-content"><?php echo $settings->content; ?></span>

I used fl-content CSS classname in both PHP file. But it is not mandatory. You can add custom CSS class name.

Thank you so much! This is just what I needed.

1 Like

Welcome. Glad to help you.