How to add HTML editor to custom fields input area?

[John Lee]

Hi friends,

I am new here and know very few about code, currely I am using Joomla! 3.9.12 + VirtueMart 3.6.2 10159.

I had managed to add new tabs to the product detail page by adding below codes (for example, add a tab named "Download"):

Code Select Expand


   <li role="vm-tab">
    < a href=" " aria-controls="vm-product-download" role="tab" data-toggle="tab">
     <?php echo vmText::_('Download') ?>
    </ a>
   </li> 


Code Select Expand


            <div id="vm-product-download" class="tab-pane" role="tabpanel">
                  <?php 
    echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'prodDownload'));
                  ?>             
            </div>   


I can input simple words in the custom field and make it displying at the position 'prodDownload', my question is, how to setup the custom field input area to be a HTML editor, where I can input any texts, tables, images, links, etc, like the Product Description editor?

Thank you.

John Lee

[Studio 42]

HTML cannot be saved by default in Virtuemart.
You need to code your own Virtuemart customfield plugin.

[John Lee]

Hi,

Thank you for your reply.
Is there any other way that I can input tables, links or images in the new created tab?

John Lee

[StefanSTS]

EDIT: See PRO's answer for the best possible solution. STS

You can use the custom field "Textarea".

Just go to Custom Fields in VM Menu, click new and choose "Textarea".

There is probably a way to add the default Joomla text editor for it, but I never tried, so you might search the Joomla or VM code for how it is done there.

Regards
Stefan

[PRO]

Use custom field "Editor"

It shows just a regular text area in the "default"

But when you go into product backend, you see the editor

[John Lee]

Hi Pro,

Many thanks for your information.
I tried many times but it is still only showing a regular text editor in the product backend custom field edit area as below:



I find below post and also tried the method:

http://forum.virtuemart.net/index.php?topic=138647.0

But it seems created a new editor instead of call the build-in TinyMCE, see below:



And the custom fied edit area disply like this:



Is there any way to make this editor looks like the regular TinyMCE editor as below?




Thanks.

[Studio 42]

You have to customize the editor plugins. See the tinyMce website for all plugin options.
Note that images upload is perhaps not possible

[John Lee]

I have managed adding some other tools according to TinyMCE documents:
https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols

Thank you.

John Lee