How to used html-editor in custom page (admin panel)

How to configure and adapt Aimeos based shops as developer
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Post Reply
User avatar
Dinver
Posts: 27
Joined: 26 Oct 2020, 08:42

How to used html-editor in custom page (admin panel)

Post by Dinver » 28 Oct 2020, 16:54

I made static-page builder (table/create/edit). With input text/checkbox all understandably. But textarea with vue.component not working.

Code: Select all

<textarea class="form-control item-content" required="required"
	:is="html-editor"
	:key="idx"
	:id="cke-idx"
	:value="<?= $enc->html( $this->get( 'itemData/html' ) ); ?>"
	:name="item[html]"
	:tabindex="6"
	v-model="item['html']"
></textarea>
Top
User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to used html-editor in custom page (admin panel)

Post by aimeos » 29 Oct 2020, 08:11

Probably this is the problem:

Code: Select all

:value="<?= $enc->html( $this->get( 'itemData/html' ) ); ?>"
Try instead:

Code: Select all

:value="'<?= $enc->attr( $this->get( 'itemData/html' ) ); ?>'"
Note the additional apostrophs!
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star
Top
User avatar
Dinver
Posts: 27
Joined: 26 Oct 2020, 08:42

Re: How to used html-editor in custom page (admin panel)

Post by Dinver » 29 Oct 2020, 08:41

aimeos wrote: ↑29 Oct 2020, 08:11 Probably this is the problem:

Code: Select all

:value="<?= $enc->html( $this->get( 'itemData/html' ) ); ?>"
Try instead:

Code: Select all

:value="'<?= $enc->attr( $this->get( 'itemData/html' ) ); ?>'"
Note the additional apostrophs!
Did not help. Does it have he to be additionally init js?

Image
Top
User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to used html-editor in custom page (admin panel)

Post by aimeos » 29 Oct 2020, 09:13

Could you remove the colon here:

Code: Select all

is="html-editor"
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star
Top
User avatar
Dinver
Posts: 27
Joined: 26 Oct 2020, 08:42

Re: How to used html-editor in custom page (admin panel)

Post by Dinver » 30 Oct 2020, 06:10

aimeos wrote: ↑29 Oct 2020, 09:13 Could you remove the colon here:

Code: Select all

is="html-editor"
If moved textarea block to first tab its working. Move in the second tab, not working...

Code: Select all

<div class="row item-container">
  <div class="col-md-3 item-navbar">
    <div class="navbar-content">
      <ul class="nav nav-tabs flex-md-column flex-wrap d-flex justify-content-between" role="tablist">
        <li class="nav-item basic">
          <a class="nav-link active" href="#basic" data-toggle="tab" role="tab" aria-expanded="true" aria-controls="basic"><?= $enc->html( $this->translate( 'admin', 'Basic' ) ); ?></a>
        </li>
        <li class="nav-item page">
          <a class="nav-link" href="#page" data-toggle="tab" role="tab" aria-expanded="false" aria-controls="page"><?= $enc->html( $this->translate( 'admin', 'Page' ) ); ?></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-9 item-content tab-content">
    <div id="basic" class="row item-basic tab-pane fade show active" role="tabpanel" aria-labelledby="basic">
      <div class="col-xl-6 content-block vue-block">
        <!-- forms first tab -->
      </div>
    </div>
    <div id="page" class="row item-page tab-pane fade" role="tabpanel" aria-labelledby="page">
      <div class="form-group row mandatory">
        <div class="col-sm-12">
          <textarea class="form-control item-content" required="required"
            is="html-editor"
            key="idx"
            id="cke-idx"
            :value="'<?= $enc->attr( $this->get( 'itemData/html' ) ); ?>'"
            name="itemData[html]"
            :tabindex="6"
          ></textarea>
        </div>
      </div>
    </div>
  </div>
</div>
Top
User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to used html-editor in custom page (admin panel)

Post by aimeos » 31 Oct 2020, 09:43

Each panels is it's own Vue applications. If you add your own one, you need to add a "vue-block" CSS class too to make them a Vue application:

Code: Select all

<div class="form-group row mandatory vue-block">
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star
Top
User avatar
Dinver
Posts: 27
Joined: 26 Oct 2020, 08:42

Re: How to used html-editor in custom page (admin panel)

Post by Dinver » 03 Nov 2020, 07:08

aimeos wrote: ↑31 Oct 2020, 09:43 Each panels is it's own Vue applications. If you add your own one, you need to add a "vue-block" CSS class too to make them a Vue application:

Code: Select all

<div class="form-group row mandatory vue-block">
Thank you for help! :)
Top
Post Reply

Return to “Help”