JavaScript unable to scroll <textarea> context while using NicEdit

Question

I am a novice coder so I am having trouble getting this to work.

I have a javascript that scrolls the content of a <textarea> tag to bottom on button click, but when I add NicEdit plugin in it the script doesn't work.

I've already tried all the alternative ways to get it to work by creating external divs and wrappers but I'm sure it's coz of NicEdit.

Working Script Without NicEdit: http://jsfiddle.net/gab4qhc1

Not working script with NicEdit: http://jsfiddle.net/sgdLzjau

Kindly help me to get the script working along with nicedit.

Thanks

Answer 1

First of all, I would recommend you to use CKEditor or TinyMCE because nicEdit is not in active development (http://nicedit.com/docs.php).

Let's come to the problem, There was an error in console bkLib.domLoad[i] is not a function(I don't know what is bkLib) so what I did is, I removed that function and removed JS code

nicEditors.allTextAreas({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']});

from HTML file and added in the script file (I think it is good to separate JS and HTML code if possible) as following

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>

<textarea id="textarea" cols=30 rows=5 >
    Please presse enter Please presse enterPlease presse enter
    Please presse enterPlease presse enterPlease presse enter
    Please presse enterPlease presseenter
    Please presse enterPlease presse enter
    Please presse enter
</textarea>

<button id="button">click</button>

Script

$(document).ready(function(){
    nicEditors.allTextAreas({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']});

    $("#button").click(function(){
        var textArea = $('.nicEdit-main');/*replace #textarea with .nicEdit-main*/
        textArea.scrollTop( textArea[0].scrollHeight - textArea.height()   );
    });  
});

(Not need to modify CSS)

Why #textarea selector is not working and .nicEdit-main is working

So, the reason behind this is every HTML based text editor use there own wrapper instead of textarea to make it more customizable like to apply bold, italic effects and in nicEdit they use a div with class nicEdit-main.

I hope this will help you to solve your problem. Happy Coding... :)