Throwing exception when using Medium.insertHtml
Prashanth-Nelli opened this issue · 4 comments
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)
and this is mycode
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="medium.css">
<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>
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?
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>");
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.