Inline editing in custom modules

Beaver Builder
1

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?

2

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

3

Here’s my simple custom module for testing purposes:

<?php 

class AiContent1 extends FLBuilderModule {
  public function __construct() {
    parent::__construct(array(
        '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; ?>

</div>

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!

4

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.

5

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.

6

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

1 Like
7

Welcome. Glad to help you.