Giters

jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)

Home Page:http://jakiestfu.github.io/Medium.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Throwing exception when using Medium.insertHtml

Prashanth-Nelli opened this issue · comments

commented

TypeError: Cannot read property 'length' of null
at Object.Medium.insertHtml (file:///D:/My_Experiments/wys/medium.js:434:35)
at n.$scope.addItem (file:///D:/My_Experiments/wys/index.html:18:13)
at fn (eval at (file:///D:/My_Experiments/wys/angular.min.js:212:83), :4:229)
at Kc.(anonymous function).compile.d.on.f (file:///D:/My_Experiments/wys/angular.min.js:252:74)
at n.$get.n.$eval (file:///D:/My_Experiments/wys/angular.min.js:134:493)
at n.$get.n.$apply (file:///D:/My_Experiments/wys/angular.min.js:135:217)
at HTMLAnchorElement. (file:///D:/My_Experiments/wys/angular.min.js:252:126)
at HTMLAnchorElement.m.event.dispatch (file:///D:/My_Experiments/wys/jquery.min.js:4:8549)
at HTMLAnchorElement.m.event.add.r.handle (file:///D:/My_Experiments/wys/jquery.min.js:4:5252)

commented

and this is mycode

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://github.com/jakiestfu/Medium.js/issues/medium.css" target="_blank" rel="nofollow">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript" src="./js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./angular.min.js"></script>
        <script type="text/javascript" src="./rangy-core.js"></script>
        <script type="text/javascript" src="./rangy-classapplier.js"></script>
        <script type="text/javascript" src="./undo.js"></script>
        <script type="text/javascript" src="./medium.js"></script>
        <script type="text/javascript">
            angular.module('app',[]).controller('appCtrl',function($scope){
                $scope.addItem=function(value){
                    medium.insertHtml($('<div>'+value+'</div>')[0],function(){
                        console.log('inserted');
                    });
                };
            });
        </script>
    </head>
    <body class="container" ng-controller="appCtrl">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
          </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a ng-click="addItem('Action 1')" href="#">Action 1</a></li>
                <li><a ng-click="addItem('Action 2')" href="#">Action 2</a></li>
                <li><a ng-click="addItem('Action 3')" href="#">Action 3</a></li>
                <li><a ng-click="addItem('Action 4')" href="#">Action 4</a></li>
            </ul>
        </div>

        <div class="btn-group btn-group-xs" role="group" aria-label="...">
          <button id="bold" type="button" class="btn btn-default">Bold</button>
          <button id="italic" type="button" class="btn btn-default">Italic</button>
          <button id="underline" type="button" class="btn btn-default">Underline</button>
        </div>

        <div  class="article demo">
             <div id="rich_with_widget_invoke_element" contenteditable="false"
              style="width:250px;height:250px;border:1px solid black"></div>
        </div>

        <script type="text/javascript">
            (function() {

                window.medium = new Medium({
                    element: $('#rich_with_widget_invoke_element')[0],
                    mode: Medium.richMode,
                    placeholder: 'Your Article',
                    attributes: null,
                    tags: null,
                    pasteAsText: false,
                    drag: true
                });

                $('#bold').mousedown(function() {
                    medium.invokeElement('b', {
                        title: "I'm bold!"
                    });
                    return false;
                });

                $('#underline').mousedown(function() {
                    medium.invokeElement('u', {
                        title: "I'm underlined!"
                    });         
                    return false;
                });

                $('#italic').mousedown(function() {
                    medium.invokeElement('i', {
                        title: "I'm italics!"
                    });
                    return false;
                });

            })();
        </script>
    </body>
</html>
commented

Weird thing is, I can't reproduce it with the examples, but can with just a simple reproduction.

Could there be a discrepancy between the code used in the examples vs the repo?

commented

I get the same.

Uncaught TypeError: Cannot read property 'length' of null

Caused specifically by:

lastElement = result[result.length - 1];

My code looks like this:

        editor = new Medium({
            element: this,
            placeholder: "Write here...",
            autofocus: false,
            autoHR: false,
            mode: Medium.partialMode,
            maxLength: -1
        });

editor.insertHtml("<span class=\"pos\"></span>");

commented

Right, with some testing this seems to happen if you have more than once instance of Medium on the page, on the same class, at least for me.