$(...).Xxxxxxx is not a function

Question

This is an issue which I constantly experience when using custom scripts with Bootstrap.

In this case I use the LineControl Text Editor: https://github.com/suyati/line-control . I included the reference to the script:

<script src="editor.js"></script>
<link type="text/css" href="editor.css" rel="stylesheet"/>

as well as the Jquery, Bootstrap and Font-awesome references.

These links are all included in a Bootstrap modal view with a save button.

In the function $(function(){ I have:

       var editor = $("#txtEditor").Editor();
       $("#txtEditor").Editor("setText", "Hello")

       $(document).on("click", ".btn-save", function (e) {
           var sHTML = $("#txtEditor").Editor("getText");
           console.log(sHTML);
       }); 

It loads the modal view, display the editor and set the text, all fine. When I click the save button I get the message:

$(...).Editor is not a function

I have tried many variations and get this constantly. It seems that it does not recognised the plugin's code. I put it in the header as well, but no joy!

What am I doing wrong?

Answer 1

Try saving the reference to the txtEditor node in your editor variable, like so:

var editor = $("#txtEditor");
editor.Editor();
editor.Editor("setText", "Hello");

$(".btn-save").on("click", function () {
   var sHTML = editor.Editor("getText");
   console.log(sHTML);
});