v-model for contentEditable about vue HOT 27 CLOSED

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

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

from vue.

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

from vue.

tears up from the beauty

from vue.

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.

from vue.

@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'

from vue.

💝

from vue.

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

compatible with vue1 and vue2 🍏

@Nobi322 you need a plugin

from vue.

9ec0259

from vue.

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.

from vue.

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!

from vue.

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

from vue.

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 :).

from vue.

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.

from vue.

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!

from vue.

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!

from vue.

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?

from vue.

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

from vue.

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.

from vue.

+1 for @CJLees01 request, any news?

from vue.

I have one, let me get source.

from vue.

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

from vue.

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

from vue.

Great, thanks @robertleeplummerjr

from vue.

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

from vue.

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

from vue.

nice

from vue.

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

from vue.