Kindly help me in sceditor for my forum with forumotion.com #296

ramgp01 · 2014-05-01T06:12:11Z

This is Ram,

I am not strong knowledge in JavaScript.

We have a Tamil language forum got from forumotion.com. Forumotion now upgraded old editor to new Sceditor for all his forums.

Old editor textarea has a id attribute like "text_editor_textarea", we have using Google Tamil indic web version so worked perfectly.

But in Sceditor the textarea has no such id attribute, so that we can't type in Tamil or any other languages(Except English).

How to assign id attribute to that textarea? or any other way to use google tamil indic in this sceditor?

Time being we are using Google Input Tools Desktop version

Google indic web version JavaScript code given below:
http://amarkkalam.com/Tools/tamileditor.html

We also giving demo user id and password

Site name: http://www.amarkkalam.net/login
Username: demo123
Password: [removed]

Screenshot: http://i.stack.imgur.com/Txsjw.jpg

Kindly help us.

Warm Regards & Thanks
Ram

samclarke · 2014-05-01T13:17:24Z

SCEditor doesn't have ID's on the iframe or textarea inputs by default. If I remember correctly you can't modify the code that initialises SCEditor on Forumotion, can you?

The best way I can think is to just manually add some ID's to the inputs. Something like this:

Place this in the <head> part:

<script src="https://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css" type="text/css" rel="stylesheet">
<script>
google.load('elements', '1', {
    packages: 'transliteration'
});
</script>

And place this below the part where SCEditor JS is included (probably the footer):

<script>
// Not sure if Forumotion has any hooks for knowing when
// the editor has been setup so just replace the setup
// function with a custom one.
var oldInit = $.fn.sceditor;
$.fn.sceditor = function () {
    oldInit.apply(this, arguments);

    // Cludge to add id's to sceditor inputs
    $('.sceditor-container iframe').attr('id', 'sceditor-iframe');
    $('.sceditor-container textarea').attr('id', 'sceditor-textarea');

    function onLoad() {
        var ids = ['sceditor-iframe', 'sceditor-textarea'];
        var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['ta'],
            shortcutKey: 'alt+g',
            transliterationEnabled: true
        };
        var control = new google.elements.transliteration.TransliterationControl(options);

        control.makeTransliteratable(ids);
        control.showControl('translControl');
    }

    google.setOnLoadCallback(onLoad);
};
</script>

ramgp01 · 2014-05-02T06:01:07Z

Dear Mr. Samclarke.
We thank you very much for your immediate response.
Saw your script and one added to head, another one added in Admin Panel >> Add Javascript.(This is Forumotion method).
Screenshot : http://amarkkalam.com/images/sceditor002.jpg.

But not working still.
We also checked textarea thorugh DOM tool. Because you cludge to add id's to sceditor inputs in JavaScript. no such id attribute added.
you can logged our site and check for that.
I expect your solution. because this is biggest challenge for us.
Kindly help me.

Warm Regards & Thanks
Ram

brunoais · 2014-05-02T06:37:56Z

Just to make sure. Please post the full HTML code after the page has loaded, on forummotion. I should be able to understand what is happening, how it looks like and get a solution for you.

ramgp01 · 2014-05-02T07:25:38Z

We can't touch forumotion html codes. we can add javascript to make changes.

brunoais · 2014-05-02T08:27:33Z

I'm not asking to change it I just want to know the HTML structure.

ramgp01 · 2014-05-02T09:40:30Z

We can only view through DOM.(via Google Chrome Inspect Element)
Site name: http://www.amarkkalam.net/login
Username: demo123
Password: [removed]

brunoais · 2014-05-02T09:51:55Z

$(window).on('load', function(){
    var container = $(".sceditor-container");
    container.children('iframe')[0].id = "iframeId";
    container.children('textarea')[0].id = "textareaId";
}, false);

try that. i made it use the on() because I think it will delay its execution even longer. See if that solves your problem.

ramgp01 · 2014-05-02T09:58:37Z

Dear Mr. Brunoais,
I added to Javascript. but not working.
kindly check your side.

samclarke · 2014-05-02T11:36:19Z

The problem is the code needs to run after SCEditor has been created. As far as I'm aware, Forumotion unfortunately doesn't give you any hooks to tell you when the editor has been created.

Normally you can either just add code after the constructor or you could put the code in a plugin. As Forumotion doesn't give access to the code that initialises the editor, you can't add code after it or add a plugin to the constructor options.

My idea was if the above code could be added after SCEditor JS is included but before the editor is initialised it could intercept it and load the transliteration that way. If it isn't working then I'm assuming the code can't be added below the code that includes the SCEditor JS.

If @brunoais's code doesn't work either the only other thing I can think to try would be this (should all be added to the <head>):

<script src="https://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css" type="text/css" rel="stylesheet">
<script>
google.load('elements', '1', {
    packages: 'transliteration'
});

$(function () {
    // This should hopefully cause all the other DOM ready
    // events to be run before this one including the one
    // that initialises SCEditor
    setTimeout(function () {
        // Cludge to add id's to sceditor inputs
        $('.sceditor-container iframe').attr('id', 'sceditor-iframe');
        $('.sceditor-container textarea').attr('id', 'sceditor-textarea');

        function onLoad() {
            var ids = ['sceditor-iframe', 'sceditor-textarea'];
            var options = {
                sourceLanguage: 'en',
                destinationLanguage: ['ta'],
                shortcutKey: 'alt+g',
                transliterationEnabled: true
            };
            var control = new google.elements.transliteration.TransliterationControl(options);

            control.makeTransliteratable(ids);
            control.showControl('translControl');
        }

        google.setOnLoadCallback(onLoad);
    });
});
</script>

ramgp01 · 2014-05-02T12:03:23Z

Dear Mr. Samclarke.
Thank you very much for your kind reply.
Forumotion only allow us add JavaScripts.
We can't touch html coding.
Just add your full JavaScript code, but not yet working.
Once again thank your helps.
Kindly give me any other solutions.

Thanks & Regards
Ram

samclarke · 2014-05-02T15:19:41Z

Are there any JavaScript errors in the console? To open the console press ctrl+shift+k in FireFox or press ctrl+shift+j in Chrome.

If there are no errors then I'm not sure what else to suggest.

brunoais · 2014-05-02T15:42:16Z

The code I gave you is not in that page. Are you sure you added such that it would appear in that page?
@samclarke I think the only thing left would be to use setInterval()...

ramgp01 · 2014-05-02T18:37:44Z

@samclarke Thanks for the better idea. we done for the same.
There is no error. Also I copy + paste your above script function to console and press enter. that time checked in textarea element using with DOM, wow id attribute added.
See screenshot: http://amarkkalam.com/images/sceditor003.jpg

so that this is script working correctly, but loaded before that SCeditor. I think.

@brunoais I just disable your JavaScript, shall I Enable? but not assign that id attribute to textarea in that console test.

Once again Thanks to team.
Kindly give me solutions.
Warm Regards
Ram

samclarke · 2014-05-02T18:48:12Z

It's added the id's to both the iframe and textarea which aren't created until after the editor has been initialised so it has worked it just hasn't loaded the Google transliteration. Not sure why it hasn't loaded it but I think it might be something to do with the google.setOnLoadCallback not calling the callback.

Try this:

<script src="https://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css" type="text/css" rel="stylesheet">
<script>
google.load('elements', '1', {
    packages: 'transliteration'
});

google.setOnLoadCallback(function () {
    $(function () {
        // This should hopefully cause all the other DOM ready
        // events to be run before this one including the one
        // that initialises SCEditor
        setTimeout(function () {
            // Cludge to add id's to sceditor inputs
            $('.sceditor-container iframe').attr('id', 'sceditor-iframe');
            $('.sceditor-container textarea').attr('id', 'sceditor-textarea');

            var ids = ['sceditor-iframe', 'sceditor-textarea'];
            var options = {
                sourceLanguage: 'en',
                destinationLanguage: ['ta'],
                shortcutKey: 'alt+g',
                transliterationEnabled: true
            };
            var control = new google.elements.transliteration.TransliterationControl(options);

            control.makeTransliteratable(ids);
            control.showControl('translControl');
        });
    });
});
</script>

ramgp01 · 2014-05-02T18:56:27Z

@samclarke Added your above script, but not working.
Kindly check and confirm sir.

Copy + Paste above code to console. getting error"undefined"

samclarke · 2014-05-02T19:07:03Z

Copy + Paste above code to console. getting error"undefined"

When you say pasted to console, do you mean you put it in the web page and you're getting an error undefined or do you mean pasted it directly into the console?

If you pasted it into the console it needs to go in the web page.

ramgp01 · 2014-05-02T19:16:59Z

I opening a topic in this website ctrl+shift+j copy paste that your script and enter.

muraliraja · 2014-05-03T07:07:14Z

This is murali, co-admin in amarkkalam.net. any more solutions, kindly help me

brunoais · 2014-05-03T10:55:07Z

@ramgp01 if you do that, then the callback is never called because the load event had already been fired.

ramgp01 · 2014-05-03T12:30:52Z

@samclarke: We trying to fix this issue, but not yet resolved.

@brunoais: Your point is correct. load event had already been fired. so that not working.

If we fix this issue, we will inform here.

We thank you very much your kind support.

Warm Regards & Thanks!
Ram

samclarke · 2014-05-03T17:22:36Z

If you paste the following into the <head> tag it should work:

<script src="https://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css" type="text/css" rel="stylesheet">
<script>
google.load('elements', '1', {
    packages: 'transliteration'
});

google.setOnLoadCallback(function () {
    $(function () {
    // This should hopefully cause all the other DOM ready
    // events to be run before this one including the one
    // that initialises SCEditor
    setTimeout(function () {
        // Cludge to add id's to sceditor inputs
        $('.sceditor-container iframe').attr('id', 'sceditor-iframe');
        $('.sceditor-container textarea').attr('id', 'sceditor-textarea');

        var ids = ['sceditor-iframe', 'sceditor-textarea'];
        var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['ta'],
            shortcutKey: 'alt+g',
            transliterationEnabled: true
        };

        var control = new google.elements.transliteration.TransliterationControl(options);
        control.makeTransliteratable(ids);
    });
    });
});
</script>

ramgp01 · 2014-05-06T05:05:46Z

@samclarke Again Thanks for your reply.

I am sorry Mr. Samclarke, I am not well last two days, so that unable to reply this issue.

I added this code, but load event had already been fired. so that id attribute not assigned.

Any more idea sir? Will you add Tamil Language to Sceditor?

Warm Regards & Thanks
Ram

brunoais · 2014-05-06T05:50:17Z

If the load event had already been fired, just execute the code right away. remove the load event callback.

ramgp01 · 2014-05-06T06:07:52Z

@brunoais: We already tried 2 days before. but not working.
We also try with iframe. we can't resolved this issue.

samclarke · 2014-05-06T18:07:04Z

@ramgp01 debugging this is very hard without seeing where you're putting the code, if there are any error messages, etc.

If the load event has already fired then it sounds like the code in the wrong place. It should be included before the page has loaded.

If it has already fired then as @brunoais says just remove the load event. I've just checked and running the code without the load event on your forum after it's loaded does enable the transliteration with SCEditor.

ramgp01 · 2014-05-07T07:15:22Z

@samclarke Your point is may be correct. Because forumotion forums two types of editor mode are WYSIWYG enable mode/ WYSIWYG Disable mode. We tried both already.

We give your script code in proper head tag, but forumotion removed all tags. script only taken.

We have one more demo forum with forumotion.com
If you don't mind, kindly logged admin panel and check your end.
I given below that demo forum credentials.

Forum Url: http://tamilan.myforumpro.com/
Admin Panel url: http://tamilan.myforumpro.com/admin
User Name: admin
Password: [removed]

Your help is most important with us, Kindly help sir.

Warm Regards
Ram

samclarke · 2014-05-07T12:25:55Z

Forumotion is replacing the $ signs with $ which is what's causing the problem. If you replace the $ signs with jQuery it works.

ramgp01 · 2014-05-07T12:59:14Z

@samclarke: Thanks a lot!!!!!!!

Now working perfectly, We are really exciting. So happy.

Once again thanks so much. It is great effort for us.

Thanks also @brunoais

Warm Regards & Thanks!
Ram

ramgp01 · 2020-09-28T15:47:17Z

Dear Mr. @samclarke,

Kindly refer above thread.

New browsers not support Tamil Languages (destinationLanguage: ['ta'],)

If possible, kindly resolve this issue.

And one more thing microphone add to textarea possible?

Warm Regards & Thanks!
Ram

Tag: @brunoais

brunoais · 2020-09-28T16:56:57Z

@ramgp01 Please make a new issue and... Expect quite some wait from @samclarke ... Dunno if he will ever answer.

ramgp01 mentioned this issue May 1, 2014

Send textarea.val() with Ajax get empty value #132

Closed

samclarke added the Question label May 1, 2014

brunoais assigned brunoais and samclarke and unassigned brunoais and samclarke May 2, 2014

samclarke closed this as completed May 4, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kindly help me in sceditor for my forum with forumotion.com #296

Kindly help me in sceditor for my forum with forumotion.com #296

ramgp01 commented May 1, 2014

samclarke commented May 1, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

muraliraja commented May 3, 2014

brunoais commented May 3, 2014

ramgp01 commented May 3, 2014

samclarke commented May 3, 2014

ramgp01 commented May 6, 2014

brunoais commented May 6, 2014

ramgp01 commented May 6, 2014

samclarke commented May 6, 2014

ramgp01 commented May 7, 2014

samclarke commented May 7, 2014

ramgp01 commented May 7, 2014

ramgp01 commented Sep 28, 2020

brunoais commented Sep 28, 2020

Kindly help me in sceditor for my forum with forumotion.com #296

Kindly help me in sceditor for my forum with forumotion.com #296

Comments

ramgp01 commented May 1, 2014

samclarke commented May 1, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

brunoais commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

samclarke commented May 2, 2014

ramgp01 commented May 2, 2014

muraliraja commented May 3, 2014

brunoais commented May 3, 2014

ramgp01 commented May 3, 2014

samclarke commented May 3, 2014

ramgp01 commented May 6, 2014

brunoais commented May 6, 2014

ramgp01 commented May 6, 2014

samclarke commented May 6, 2014

ramgp01 commented May 7, 2014

samclarke commented May 7, 2014

ramgp01 commented May 7, 2014

ramgp01 commented Sep 28, 2020

brunoais commented Sep 28, 2020