HTML Editor on Product Templates

[illyrianmoon]

Does anyone know if/how I could add an HTML editor to the text field on a product template? For example, say I added a template with a textarea as the input field, then added the template to several (or all) products. Is there any way to add an HTML editor to the textarea on EditProductTemplate.aspx? I've added HTML editor to text fields in the past, but as far as I can tell from digging through the code, these particular text fields are generated on the fly (because, of course, there are multiple options for input types). If you have any insights or have done this before, I would deeply appreciate some guidance.

Thanks in advance!

[mazhar]

Yeah I believe you can easily do that. AbleCommerce have tinymce included in website. All you need is to reference tinymce from Website/Scripts/tinymce and then put some initialization scritpt to set it as HTML editor for all textareas.

Code: Select all

<script type="text/javascript" src="../Scripts/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas"
});
</script>

[illyrianmoon]

Thanks for the reply mazhar! I'll have to look into how to implement that, but I'll give it a try and check back in.

[illyrianmoon]

I feel pretty dense here, but I've been at this for a couple of hours, and I can't find the proper place to put the script tags in Gold. In the old version, I would have just put it in the head or body area of the scriptlet. Could someone point me in the right direction? I'll keep hacking away at it for now.

[mazhar]

I feel pretty dense here, but I've been at this for a couple of hours, and I can't find the proper place to put the script tags in Gold. In the old version, I would have just put it in the head or body area of the scriptlet. Could someone point me in the right direction? I'll keep hacking away at it for now.

I am not sure about placement of the editor. In orignal post you mentioned that you need it on EditProductTemplate.aspx which is in admin panel and even in AC 7 admin never worked against scriptlets. If you need in admin then all you need is to edit Website\Admin\Products\EditProductTemplate.aspx and then add following script just after the

Code: Select all

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">

so that final output should be somthing like

Code: Select all

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="../../Scripts/tinymce/tiny_mce.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        createEditor();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        createEditor();
    });

    function createEditor() {
        tinyMCE.init({
            mode: "textareas"
        });
    }
</script>
.....................
.....................

Now if you add textarea field for merchant you will be able to see the HTML Editor on it.

If you want the same thing in retail side which I wouldn't recommend since it may lead to HTML injection and can be abused. In case thats what you need you will have to edit Website\Product.aspx file do the same thing I mentioned above just make sure to place only script in content section and don't copy this content tag. Also you will need to adjust the src attribute to following value

Code: Select all

Scripts/tinymce/tiny_mce.js

[illyrianmoon]

Mazhar, thank you so much for providing me with the code! That's very nice of you. It looks like that worked just as it should. I deeply appreciate the assistance. And you're correct, this is only on the merchant side, not the cart side. I guess I never did much with the admin code in version 7, so I didn't think about the scriptlets not interacting with it. I was trying to edit EditProductTemplate.aspx, but my JavaScript wasn't quite right. Thanks again and have a great day!

[mazhar]

OK great! glad that it all worked out.

[illyrianmoon]

It seems I spoke a bit too soon, as this does replace the textarea with an HTML editor, but the textarea doesn't hook into the custom fields dialog on the product page. I'm thinking maybe I need to add something to the StringBuilder section of the EditProductTemplate.aspx.cs code file. I will work on finding the solution. Thanks again for getting me started.

[sfeher]

I'm having problems implementing this into AbleCommerce GoldR6 (build 6169).
Doesn't seem to work correctly for me at all --- the script doesn't replace the textarea with the HTML editor, and the source code won't even show that the new .js referece to Tiny_MCE.js has even been included on the EditProductTemplate.aspx page.

Mazhar -- any edits to the code sample?

Please advise...
Thank you!