{"action":"created","issue":{"url":"https://api.github.com/repos/summernote/summernote/issues/1721","repository_url":"https://api.github.com/repos/summernote/summernote","labels_url":"https://api.github.com/repos/summernote/summernote/issues/1721/labels{/name}","comments_url":"https://api.github.com/repos/summernote/summernote/issues/1721/comments","events_url":"https://api.github.com/repos/summernote/summernote/issues/1721/events","html_url":"https://github.com/summernote/summernote/issues/1721","id":137332329,"number":1721,"title":"Inserting an HTML -  appends it outside when selecting outside editor","user":{"login":"netfox01","id":4972714,"avatar_url":"https://avatars.githubusercontent.com/u/4972714?v=3","gravatar_id":"","url":"https://api.github.com/users/netfox01","html_url":"https://github.com/netfox01","followers_url":"https://api.github.com/users/netfox01/followers","following_url":"https://api.github.com/users/netfox01/following{/other_user}","gists_url":"https://api.github.com/users/netfox01/gists{/gist_id}","starred_url":"https://api.github.com/users/netfox01/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/netfox01/subscriptions","organizations_url":"https://api.github.com/users/netfox01/orgs","repos_url":"https://api.github.com/users/netfox01/repos","events_url":"https://api.github.com/users/netfox01/events{/privacy}","received_events_url":"https://api.github.com/users/netfox01/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-02-29T18:28:43Z","updated_at":"2016-03-08T21:45:04Z","closed_at":null,"body":"Hello,\r\n\r\ni made a summernote plugin to add my custom blocs, it works fine but when i select outside editor, it appends the bloc where i selected,\r\n\r\nto insert the bloc i use `context.invoke('editor.pasteHTML', $bloc_menu_content.prop('outerHTML'));`\r\n\r\n![screen](https://cloud.githubusercontent.com/assets/4972714/13404543/6104627a-df1a-11e5-8f63-87eefdfc6542.gif)\r\n"},"comment":{"url":"https://api.github.com/repos/summernote/summernote/issues/comments/193981006","html_url":"https://github.com/summernote/summernote/issues/1721#issuecomment-193981006","issue_url":"https://api.github.com/repos/summernote/summernote/issues/1721","id":193981006,"user":{"login":"netfox01","id":4972714,"avatar_url":"https://avatars.githubusercontent.com/u/4972714?v=3","gravatar_id":"","url":"https://api.github.com/users/netfox01","html_url":"https://github.com/netfox01","followers_url":"https://api.github.com/users/netfox01/followers","following_url":"https://api.github.com/users/netfox01/following{/other_user}","gists_url":"https://api.github.com/users/netfox01/gists{/gist_id}","starred_url":"https://api.github.com/users/netfox01/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/netfox01/subscriptions","organizations_url":"https://api.github.com/users/netfox01/orgs","repos_url":"https://api.github.com/users/netfox01/repos","events_url":"https://api.github.com/users/netfox01/events{/privacy}","received_events_url":"https://api.github.com/users/netfox01/received_events","type":"User","site_admin":false},"created_at":"2016-03-08T21:45:03Z","updated_at":"2016-03-08T21:45:03Z","body":"ok, for other programmers who encountered the same issue. here is my problems and how i solved them :\r\n# the issue\r\nlike described above i created summernote to add custom blocs to the editor.\r\nwhen i try to insert simple HTML content to the  editor with `context.invoke('editor.pasteHTML', '<div></div>'` it goes well. but when it comes to a bloc with options where i have to show the modal (like the gif demo above)  the bloc is inserted to the last area where i clicked (even outside of the editor) before i opened the modal , and sometime is inserted to the modal body itself and somtimes is not inserted anywhere at all.\r\n# the solution\r\nmy code was like the following :\r\n\r\n```javascript\r\nself.modalSaveEvent = function()\r\n{\r\n    self.$modal.find(\"button#save\").click(function(event)\r\n    {\r\n\r\n        var bloc_menu_content = $.parseHTML(self.bloc_menu_content_html);\r\n\r\n        $bloc_menu_content = $(bloc_menu_content).clone(); // make a copy\r\n\r\n        $ul = $bloc_menu_content.find('ul.navbar-nav');\r\n\r\n        $ul.html(\"\");\r\n\r\n        var $menu_items = self.$modal.find('.menu-item'); // get inserted menu tabs\r\n\r\n        $menu_items.each(function(index, el)\r\n        {\r\n            // make a copy from the menu item model to insert to the editor\r\n            var $bloc_menu_item = self.$bloc_menu_item.clone();\r\n            //get inserted menu items values to insert to the model\r\n            var url = $(this).find('input.item-menu-url').val();\r\n            var label = $(this).find('input.item-menu-label').val();\r\n            var li_class = $(this).find('.current-item').prop(\"checked\") ? \"active\" : \"\";\r\n            //insert menu items values to the model\r\n            $bloc_menu_item.find('a span').text(label);\r\n            $bloc_menu_item.find('a').attr('title', label);\r\n            $bloc_menu_item.find('a').attr('href', url);\r\n            $bloc_menu_item.addClass(li_class);\r\n\r\n            $ul.append($bloc_menu_item);\r\n        });\r\n\r\n        var editor_content = $(self.editor).summernote('code');\r\n\r\n        if (!$(editor_content).find('style#bloc_' + bloc_name + '_style').length)\r\n        {   // add the [bloc_name] style if is not lready inserted\r\n            context.invoke('editor.pasteHTML', self.bloc_menu_style);\r\n        };\r\n        // insert the generated menu items to the [bloc_name] html\r\n        $bloc_menu_content.find('ul').html($ul.html());\r\n\r\n        // add [bloc_name] html to the editor\r\n        var bloc_menu_html = $bloc_menu_content.prop('outerHTML');\r\n\r\n        context.invoke('editor.pasteHTML', bloc_menu_html);\r\n        context.invoke('editor.pasteHTML', '&nbsp;'); //next line\r\n\r\n        self.$modal.modal('hide');\r\n\r\n    });\r\n}\r\n```\r\nnote the last three lines of code, i insert the html to the editor and then i hide the modal.\r\n\r\n## solution part 1\r\n\r\nto resolve that issue i insert HTML to the editor **after** i hided the modal .\r\n\r\n```javascript\r\nself.modalSaveEvent = function()\r\n{\r\n    self.$modal.find(\"button#save\").click(function(event)\r\n    {\r\n\r\n       /*...*/\r\n\r\n        self.$modal.modal('hide');\r\n\r\n        // var editor_content = $(self.editor).summernote('code');\r\n\r\n        // if (!$(editor_content).find('style#bloc_' + bloc_name + '_style').length)\r\n        // {   // add the [bloc_name] style if is not already inserted\r\n        //     context.invoke('editor.pasteHTML', self.bloc_menu_style);\r\n        // };\r\n        // // insert the generated menu items to the [bloc_name] html\r\n        // $bloc_menu_content.find('ul').html($ul.html());\r\n\r\n        // // editor_content = $(self.editor).summernote('code');\r\n\r\n        // // add [bloc_name] html to the editor\r\n        // var bloc_menu_html = $bloc_menu_content.prop('outerHTML');\r\n\r\n        // context.invoke('editor.pasteHTML', bloc_menu_html);\r\n        // context.invoke('editor.pasteHTML', '&nbsp;');\r\n\r\n    });\r\n}\r\n```\r\nnow the bloc is inserted inside the editor **but** it always ends up on top.\r\n\r\n## solution part 2\r\n\r\nto make the plugin insert the bloc to the **last clicked  area inside** the editor i created function to do that, so before i insert the bloc i hide the modal and put the cursor in the **last clicked  area \r\ninside** the editor but first i have to save where was the cursor **last** position .\r\n\r\n### save the last  clicked  area inside the editor\r\ni used 3 summernote events : keypress, mousemove and keyup,\r\n\r\n```javascript\r\nself.editorEvents = function () {\r\n    $(self.editable).on('keypress, mousemove', function()\r\n    {\r\n        var focused_element = window.getSelection().focusNode; \r\n        var parent = $(self.editable).get(0); // contenteditable used by summernote\r\n        if ($.contains(parent, focused_element))\r\n        {   // the clicked element is inside the editor\r\n            $(self.editor).data('last_focused_element', focused_element) // save the element in summernote data\r\n        };\r\n    })\r\n}\r\n\r\n'summernote.keyup': function (we, e) {\r\n    // same thing in here\r\n}\r\n```\r\n### recovering editor last focus\r\n\r\n```javascript\r\n self.recoverEditorFocus = function ()\r\n{\r\n    var last_focused_el = $(self.editor).data('last_focused_element'); // retrieve last focused element from summernote data\r\n    if(typeof last_focused_el !== \"undefined\")\r\n    {\r\n        var editor = self.editable; // contenteditable used by summernote\r\n        var range = document.createRange();\r\n        var sel = window.getSelection();\r\n\r\n        range.setStart(last_focused_el, last_focused_el.length); // put the cursor in last position of the element\r\n        range.collapse(true);\r\n        sel.removeAllRanges();\r\n        sel.addRange(range);\r\n        editor.focus();\r\n    }\r\n}\r\n```\r\n### using all of that\r\n\r\nhide modal then recover editor last focus then insert the bloc\r\n```javascript\r\nself.modalSaveEvent = function()\r\n{\r\n    self.$modal.find(\"button#save\").click(function(event)\r\n    {\r\n\r\n       /*...*/\r\n\r\n        self.$modal.modal('hide');\r\n\r\n        self.recoverEditorFocus();\r\n\r\n        // var editor_content = $(self.editor).summernote('code');\r\n\r\n        // if (!$(editor_content).find('style#bloc_' + bloc_name + '_style').length)\r\n        // {   // add the [bloc_name] style if is not lready inserted\r\n        //     context.invoke('editor.pasteHTML', self.bloc_menu_style);\r\n        // };\r\n        // // insert the generated menu items to the [bloc_name] html\r\n        // $bloc_menu_content.find('ul').html($ul.html());\r\n\r\n        // // editor_content = $(self.editor).summernote('code');\r\n\r\n        // // add [bloc_name] html to the editor\r\n        // var bloc_menu_html = $bloc_menu_content.prop('outerHTML');\r\n\r\n        context.invoke('editor.pasteHTML', bloc_menu_html);\r\n         context.invoke('editor.pasteHTML', '&nbsp;');\r\n\r\n    });\r\n}\r\n```\r\nthat worked for me i hope the same for you as well :) .\r\n\r\nNB : tested on Chrome only. "}}