v-model for contentEditable

[yyx990803]

No description provided.

[yyx990803]

9ec0259

[yjkogan]

Hey @yyx990803,

Is there a follow-up PR for this? Having an element with contenteditable="true" and the v-model directive doesn't work well with filters. (Here's a js fiddle).

For work I made a directive v-editable-text that both applies the contenteditable attribute and does all the v-model stuff (it's modeled after v-model). I'd be happy to roll that into this code base, or just fix v-model to work with filters.

For what it's worth, my solution is largely just incorporating the solution presented in this stack overflow post: http://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376.

[yyx990803]

Thanks @yjkogan ! I'm about to get to the directives part for 0.11, and v-model is one of the directives that need some major refactoring. Would love to take a look at your v-editable-text directive to incorporate your fix.

[yjkogan]

Sounds good! What's the best way for me to get that to you? I can send you the three relevant files (directive, helper utility, tests for the utility) whenever but to open a PR I'd need to set aside part of my work day next week. Happy to do that though!

[yyx990803]

You can just put them in a gist. No pressure about the PR if you don't have time for it.

[yjkogan]

I'm having a hard time making sure the gist has the right amount of context, so I'll probably put in the time to make a PR early next week :).

[yjkogan]

Hey!

So, I opened a half-baked PR into our fork which you can see here. As I mention there, I'm having trouble with the unit tests and don't have time yet to dig in and figure out what's going wrong. I'd also like to add more tests and write some casperJS integration tests. We use casper as well so when I write them internally I'll port them over.

[yyx990803]

Just curious, what filters are you guys using on contenteditables? Are they mostly for input validation? If you don't need to modify the contents, you can use write-only filters which will be available in 0.11.

I feel that we shouldn't put this amount of extra code into Vue core for the specific use-case of contenteditable + filters, maybe it should be a separate plugin. Thanks for working on the PR though!

[yjkogan]

We're not using any filters at the moment, I just wanted the implementation to be "correct." It felt weird to have a directive so close to v-model that you couldn't use a filter on. If you accept that it contenteditable wont work with filters, then this is pretty much just v-model with a couple UX changes (escape to reset value and enter to blur()).

Definitely makes sense to not add so much code for something so specific. Makes me wish getting the cursor was easier for contenteditable elements, haha. When I have more time I'll look into making this a plugin :). Hope this was helpful!

[robertleeplummerjr]

Just thought I'd chime in, it would be VERY easy to do this with: https://github.com/jakiestfu/Medium.js/
In fact, I'm working on a project right now with Knockout that uses Medium.js. Thoughts?

[yyx990803]

@robertleeplummerjr definitely, if you want full control over a contenteditable it's very simple to wrap medium.js in a custom directive.

[CJLees01]

Does anyone have a working gist of such a custom directive wrapping medium.js please? Spent hours now trying to make it work, but no luck.

[straps]

+1 for @CJLees01 request, any news?

[robertleeplummerjr]

I have one, let me get source.

[robertleeplummerjr]

https://github.com/Enpowi/Enpowi/blob/master/src/client/Enpowi/directives.js#L145

[robertleeplummerjr]

I just realized that is the source editor, which uses codemirror. Let me see if I can put a sample together.

[robertleeplummerjr]

Done: http://robertleeplummerjr.github.io/vue-medium.js/

[straps]

Great, thanks @robertleeplummerjr

[janwirth]

@robertleeplummerjr I built a more complete version:
https://github.com/FranzSkuffka/innovant/blob/firebase-wip/app/directives/medium.coffee

You need the fixed medium.js version available in the same repository to enable modes other than 'inline'

[robertleeplummerjr]

💝

[robertleeplummerjr]

@FranzSkuffka mind adding a gh-pages branch for us all to fall in love with?

[janwirth]

Oh I'm too dumb to use gh-pages! Or do you have a comprehensive guide for me?

[robertleeplummerjr]

nice

[janwirth]

Done!
https://github.com/FranzSkuffka/vue-medium.js

https://franzskuffka.github.io/vue-medium.js/

[robertleeplummerjr]

tears up from the beauty

[Nobi322]

Hello, I'm still new in vue.js, but this method didn't work in vue 2.0

[janwirth]

Now available for Medium-Editor:
https://github.com/FranzSkuffka/vue-medium-editor

compatible with vue1 and vue2 🍏

@Nobi322 you need a plugin