When disableEditing: true, allow editing through medium toolbar?

[abijr]

Use case:
I want to prevent users from modifying the text, unless it is through the Medium toolbar.

e.g.:

• Want the user to 'highlight' text (through custom plugin), but not modify it.

Does medium-editor already have this feature? Is there a workaround if not? Should I submit a pull request?

[nmielnik]

The disableEditing option is the only feature I know of related to what you're talking about. The only workaround I can think of is calling preventDefault() on all key events...this seems like it could make sense as a feature though and we'd definitely be open to check out a PR.

[abijr]

What I ended up doing in my plugin, was toggling the attribute of the medium-editor from 'inherit' to 'true', executing the commands, and toggling back to 'inherit'.

It's working ok. But I think it resets some of the settings, such as spellcheck: off.

But this is all in the custom plugin, so it won't work for other buttons. I'll check out the preventDefault() solution.

[nmielnik]

What attribute of the medium-editor were you toggling?

[abijr]

Umm, not of the Medium Editor per se, but of the 'div' the medium-editor was hooked to. Say I have <div class="editable"></div>, and then I attached ME to it. Than what I would do in my plugin was something like:

this.base.origElements.setAttribute('contentEditable', 'true');
this.execAction(action, opts);
this.base.origElements.setAttribute('contentEditable', 'inherit');

When inspecting on the browser dev tools, the contentEditable attribute is toggled for the div element.

[nmielnik]

Interesting, good thinking as a workaround!

If you wanted to follow a safer method for grabbing the editor element(s) within your plugin to make it handle more cases , I would recommend using getEditorElements(). So your code could look something like this:

this.getEditorElements().forEach(function (element) {
    element.setAttribute('contentEditable', 'true');
});
this.execAction(action, opts);
this.getEditorElements().forEach(function (element) {
    element.setAttribute('contentEditable', 'inherit');
});

this.base.origElements isn't explicitly supported and could potentially change without a major version update. Also, the editor supports multiple elements, hence the getEditorElements() method returning array. If you know you're always going to have one element, you can just use this.getEditorElements()[0] and index in to the one element you care about.

Thanks for sharing the workaround!

[abijr]

Thanks for the feedback! Will make the changes as suggested.

[goper-leo]

Is this feature available? Thanks.

[tleewu]

@nmielnik would you be open to the solution you proposed above? Happy to open up a PR for that. Seems like this is a popular request and something I currently need. It's also addressed here: #1378

[tleewu]

@abijr were you able to find it?

[abijr]

Sorry guys, mistook the issue.
[I deleted the previous response, noting that there existed a PR for that]

[tleewu]

@abijr just created a PR above ^ mind if I assign you or @nmielnik ?

[KesavarajaRK]

Is this feature available ?