Add TinyMCE to textarea in customize product

[mascotasavila]

Hi, i'm try to add tinyMCE or Ckeditor to textarea used on customizes products on front end. 

 

Anyone have a idea?

 

Thanks!

[vekia]

if your textarea contains own class / id

you can do it easily

insert this code to product.tpl

{literal}    
<script type="text/javascript" src="path-to-the/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "#mytextarea"
        });
    </script>
{/literal}

this is for id #mytextarea

but you can add it to .mytextarea or any other class / id you want

[mascotasavila]

This is my code textarea on product.tpl

<textarea class="form-control customization_block_input"  id="textField{$customizationField}" name="textField{$field.id_customization_field}"  rows="3" cols="20">

{strip}

{if isset($textFields.$key)}

{$textFields.$key|stripslashes}

{/if}

{/strip}</textarea>

And then i add the code:

<textarea class="form-control customization_block_input"  id="textField{$customizationField}" name="textField{$field.id_customization_field}"  rows="3" cols="20">
								{strip}
									{if isset($textFields.$key)}
										{$textFields.$key|stripslashes}
									{/if}
								{/strip}</textarea>
                                 {literal}    
<script type="text/javascript" src="../js/tiny_mce/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "#form-control customization_block_input"
        });
    </script>

But don't work, i think ii'm doing something wrong...

[vekia]

hello

does it spawn some js errors in browser console?

[Nishith Nesdiya]

Hello...
 

<script type="text/javascript" src="../js/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#form-control customization_block_input"
});
</script>

may be your selector is wrong.try this
 

<script type="text/javascript" src="../js/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: ".customization_block_input"
});
</script>

[vekia]

yea sure this can generate problems since in tinymce we have to select only one-level css element

[mascotasavila]

Hi , thanks for the replies .

I tried using the options of class " .customization_block_input " and class " .rte " .

When using class " .customization_block_input " there is an error in js :
Uncaught TypeError : Can not read property 'split ' of undefinedB @ tinymce.min.js : 2 ( anonymous function) @ tinymce.min.js : 2u @ tinymce.min.js : 2nd @ tinymce.min.js : 2h @ tinymce . min.js : 2x @ tinymce.min.js : 2u @ tinymce.min.js : 2

When using class " rte " no js error but neither works.