Medium-editor: Change setting

[oknoorap]

How to change setting, I can't found in the API documentation.

[rishijain]

@oknoorap can you please elaborate what do you mean by setting?
This is how you get started with various options available.

[oknoorap]

Sorry I means options, here is example

var editor = new MediumEditor('.editor', {
    // options go here
});

editor.subscribe('editableInput', function () {
// I wanna change editor options, here based logic
})

[rishijain]

@oknoorap I do not think there is a direct way to do it. But one way to achieve this is by instantiating multiple instances of editors based on whatever logic you want. and You can then have different instances of editors but initialise one of them based on the logic.

if(some condition here){
  var editor = new MediumEditor('.editor', { //option set 1 });
}
else{
  var editor = new MediumEditor('.editor', { //option set 2 });  
}

[rishijain]

@oknoorap I will keep this issue open for the time being until I will confirm it with the team if there is a better way to do it this that I am not aware of.

[oknoorap]

@rishijain I need to change options for the existing editor, imagine if I'm working with javascript framework like angular / vuejs, I wanna change editor options and synching with model. I don't want to creates new editor, when data model has changed.

e.g I want to disable or enable editor by changing disableEditor with true / false

update: @nmielnik it's disableEditing not disableEditor

[nmielnik]

I don't believe disableEditor is an existing option or method, is there a different option/method that you're talking about specifically?

If you're just trying to disable/enable the editor dynamically, you can just call editor.destroy() and editor.setup() (they're outlined in the documentation here).

If you're looking to do something else than disable the editor, there might be ways to accomplish what you want without reinitializing the editor, it really depends on what functionality you're trying to change dynamically.

[oknoorap]

@nmielnik I means disableEditing
https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md#disableediting

[nmielnik]

Yeah, just try calling editor.destroy() and editor.setup() instead

[oknoorap]

@nmielnik for study case I want to change options immediately with js framework.

• I currently developing page builder
• Users can drag text element and drop it into page
• Users can't edit text, but when users double clicks the text element, I must create a new MediumEditor instance
• If users blur the editor (click outside editor) the editor is disabled
• When users double click again, users can edit (but not create new instance)
• And there is advanced button, when users click advanced button, the toolbar reinit it's buttons with more buttons

So my idea is, I want to change options dynamically, change toolbar buttons and reinit current editor? Is this possible?

[shark0der]

I'm in a similar situation. I'm currently using the react wrapper and react by it's nature allows the props to be changed and the editor should _react_ to those changes on the fly. Due to the fact that the API doesn't support changing options on the fly it is currently impossible to implement this feature, which in react is just considered natural, see: https://github.com/wangzuo/react-medium-editor/issues/30

There's need for an API which would allow changing options after the editor is instantiated. Destroying and setting up again is not an option because it has other side effects (for example the caret doesn't keep it's position).

[nmielnik]

@oknoorap @shark0der my org is also implementing a sitebuilder using react, where only after the user clicks do we enable editing, and if they click outside the editor it gets disabled. We either setup/destroy, or we completely setup the editor each time it's focused and blurred, since in some cases we need to change things in the toolbar as well.

Our thought process is that our react component should not maintain state, but rather should initialize itself cleanly each time assuming it hadn't be initialized before. This way, we wouldn't need to understand the diff in options.

@shark0der for maintaining cursor position, the exportSelection() and importSelection() methods were specifically added to support this for our react-based editor, so you should be able to call those and associate them with the state of the component, so that when you do re-instantiate it you'll have a selection to import and maintain the cursor position.

I'm not saying that having the ability to change options dynamically should never be supported, but the work to make this happen would be fairly significant (every option would have to be examined to understand how it could be enabled/disabled on the fly) and until that happens there is almost certainly a way to work around it (as my team has).

[shark0der]

@nmielnik that makes sense, perhaps I'll try instantiating the editor on click as well.

Regarding cursor position, somebody already implemented this in the react wrapper:
https://github.com/wangzuo/react-medium-editor/pull/19/commits/d66b9e033d6dbb709f1a7862a291e7883479b354 but somehow it worked for me before the pull-request and I've experienced some other issues after it was merged, but that's another story.

Regarding the feature request itself, while there isn't a high demand for it yet, I suggest to leave this ticket open until more people would show interest in having this feature implemented.

[karellm]

Is there any update on this feature? I found myself using the editor in a project that support i18n and I need to change the placeholder text between two languages when the locale changes. Thanks!

[kdoggthebus]

New to Github so not sure if this is right the thread to do it, but +1 on interest in this feature