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
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... :)