{"action":"created","issue":{"url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385","labels_url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385/labels{/name}","comments_url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385/comments","events_url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385/events","html_url":"https://github.com/daviferreira/medium-editor/issues/385","id":56033415,"number":385,"title":"How to define editor buttons dynamically?","user":{"login":"hellocosmin","id":1656595,"avatar_url":"https://avatars.githubusercontent.com/u/1656595?v=3","gravatar_id":"","url":"https://api.github.com/users/hellocosmin","html_url":"https://github.com/hellocosmin","followers_url":"https://api.github.com/users/hellocosmin/followers","following_url":"https://api.github.com/users/hellocosmin/following{/other_user}","gists_url":"https://api.github.com/users/hellocosmin/gists{/gist_id}","starred_url":"https://api.github.com/users/hellocosmin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hellocosmin/subscriptions","organizations_url":"https://api.github.com/users/hellocosmin/orgs","repos_url":"https://api.github.com/users/hellocosmin/repos","events_url":"https://api.github.com/users/hellocosmin/events{/privacy}","received_events_url":"https://api.github.com/users/hellocosmin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-30T13:31:21Z","updated_at":"2015-01-30T14:17:13Z","closed_at":null,"body":"Hi,\r\n\r\nLet's say I have a div for which I want to specify the allowed editor buttons. Here's what I tried, mixing in jQuery:\r\n\r\n`<div class=\"editable\" data-editor-buttons=\"bold,italic,underline\">...</div>`\r\n\r\nCall Medium Editor:\r\n\r\n`var mEditor = new MediumEditor('.editable', {\r\n                buttonLabels: 'fontawesome',\r\n                buttons: allowedBtns,\r\n                cleanPastedHTML: true,\r\n                disablePlaceholders : true,\r\n                checkLinkFormat: true\r\n            });`\r\n\r\nWhen a user clicks an .editable div, I want to check for data-editor-buttons and update the mEditor object on the fly, so it shows only the buttons I want:\r\n\r\n`$(document).on('click', '.editable', function(e){\r\n\r\nvar specifiedBtns = $(this).data('editor-buttons');\r\n\r\n\t\tswitch (specifiedBtns) {\r\n\r\n\t\t\tcase undefined:\r\n\t\t\tcase \"\":\r\n\t\t\t\tallowedBtns = ['strikethrough', 'subscript', 'superscript', 'bold', 'italic', 'anchor', 'orderedlist', 'unorderedlist'];\r\n\t\t\t\tbreak;\r\n\r\n\t\t\tdefault:\r\n\t\t\t\tallowedBtns = specifiedBtns.split(\",\");\r\n\t\t\tbreak;\r\n\r\n\t\t}\r\n\r\n                mEditor.deactivate();\t\t\r\n\t\tmEditor.options.buttons = allowedBtns;\r\n\t\tmEditor.activate();\r\n});`\r\n\r\nIt works if I deactivate() and activate() mEditor.\r\n\r\nProblem: when testing this in Chrome, the editor toolbar seems to be losing its positioning coordinates and jumps to the top left of the screen. It works fine in Firefox/IE.\r\n\r\nIs there any way to either fix this in Chrome, or update the object without using deactivate/activate? (seems to be that Chrome is doing this when I deactivate() )\r\n\r\nAny insight will be appreciated, thanks for taking the time to read :)"},"comment":{"url":"https://api.github.com/repos/daviferreira/medium-editor/issues/comments/72207247","html_url":"https://github.com/daviferreira/medium-editor/issues/385#issuecomment-72207247","issue_url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385","id":72207247,"user":{"login":"nmielnik","id":2444240,"avatar_url":"https://avatars.githubusercontent.com/u/2444240?v=3","gravatar_id":"","url":"https://api.github.com/users/nmielnik","html_url":"https://github.com/nmielnik","followers_url":"https://api.github.com/users/nmielnik/followers","following_url":"https://api.github.com/users/nmielnik/following{/other_user}","gists_url":"https://api.github.com/users/nmielnik/gists{/gist_id}","starred_url":"https://api.github.com/users/nmielnik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nmielnik/subscriptions","organizations_url":"https://api.github.com/users/nmielnik/orgs","repos_url":"https://api.github.com/users/nmielnik/repos","events_url":"https://api.github.com/users/nmielnik/events{/privacy}","received_events_url":"https://api.github.com/users/nmielnik/received_events","type":"User","site_admin":false},"created_at":"2015-01-30T14:17:13Z","updated_at":"2015-01-30T14:17:13Z","body":"Does a 2nd click into the div fix the position of the toolbar?\r\n\r\nIt's possible the cause is because medium-editor looks to `mouseup` and `click' events on the editable element for positioning the toolbar.  If you're deactivating, and activating medium-editor on a `click` event, the \"activated' version of your toolbar will not have any events to trigger it to position itself.  Since the toolbar gets deleted from the DOM in `deactivate()` and re-added in `activate()` it seems likely the behavior of the toolbar could differ from browser to browser.\r\n\r\nPerhaps deactivating and reactivating on `mousedown` instead of click could also fix this?"}}