{"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":[{"url":"https://api.github.com/repos/daviferreira/medium-editor/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-01-30T13:31:21Z","updated_at":"2015-02-01T13:14:08Z","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<pre>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            });</pre>\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<pre>$(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});</pre>\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/72364278","html_url":"https://github.com/daviferreira/medium-editor/issues/385#issuecomment-72364278","issue_url":"https://api.github.com/repos/daviferreira/medium-editor/issues/385","id":72364278,"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},"created_at":"2015-02-01T13:14:08Z","updated_at":"2015-02-01T13:14:08Z","body":"I actually need to reopen this, as it seems that manipulating the mEditor object like that results in certain actions not working in Firefox.\r\n\r\nSee Fiddle: http://jsfiddle.net/ongk3utq/5/\r\n\r\nAs you can see, setting the editor buttons dynamically like that, breaks the functionality of some toolbar buttons in Firefox. I've confirmed these to stop working: justify (all), ordered and unordered lists.\r\n\r\n- it works perfectly fine in Webkit\r\n- IMPORTANT: if the .editable is a `<div>`, then it works in Firefox too. But only if it's a div. Any other element, no matter if block or inline, won't work.\r\n\r\nI admit I'm not that good with JS/jQuery, this is the only way I could think of in order to show custom toolbar buttons depending on the element that's being edited.\r\n\r\nIf anyone has any advice, I would surely appreciate it. :)"}}