jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)

Home Page:http://jakiestfu.github.io/Medium.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Browsers generate different html

cico88 opened this issue · comments

In short, it doesn't work at all. It generates completely different results from Chrome, FF, IE. I tried many options, to restrict what tags I want, but it doesn't work at all.
Examples:

Browser1:
line1



line2


Browser2

line1


line2

Browser3

line1

line2

After 3 weeks fighting with various HTML WYSIWYG editors - it's waste of time.. don't bother guys...

commented

I feel your pain and have struggled endlessly throughout the years trying to find something that works, or even just kind of works, and please believe me when I say that medium.js is as close as you're going to get. contenteditable is just a mess - range selection is a mess - with that in mind, medium.js is best of breed for contenteditable and Tim Downy's rangy is best of breed for range selection. W3 and the browser vendors really need to sort this out, the lib authors are doing their best.

Can you clarify what actions you took to enter the html? What needs to
happen is to intercept the events, and force the browser to obey by
stopping the event and carrying out the inserting of html manually. This
may sound like a lot, but if it was worked into the core, and we create
unite tests, test in all major borwsers, it becomes very easy. I look
forward to being able to have you say: "I love contenteditable... with
medium.js".

On Thu, May 28, 2015 at 5:52 AM, Nik Coughlin notifications@github.com
wrote:

I feel your pain and have struggled endlessly throughout the years trying
to find something that works, or even just kind of works, and please
believe me when I say that medium.js is as close as you're going to get.
contenteditable is just a mess - range selection is a mess - with that in
mind, medium.js is best of breed for contenteditable and Tim Downy's rangy
is best of breed for range selection. W3 and the browser vendors really
need to sort this out, the lib authors are doing their best.


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

I need the same html code results from all browsers, contenteditable mess up everything, it's totally out of control. DIV/P/BR chaos, plus Shift+Enter doesn't work well too. Also, I wanted to restrict shortcuts (Ctrl+B/I/U). I don't understand why contenteditable does not allow us to have full control over the inner html, it adds extra stupid tags :) I was about to create own editor, take control over contenteditable inner html, update it on keypress and other events to keep it clear, just to keep cursor position... but I think it's waste of time. I ended up with markdown style editor, it's bit techy for clients, which I didn't want initially, but still better then any other wysiwyg editor nowadays. In short: wysiwyg sucks. It's like, I type "A" and browser shows "B"...

What You See Is What You Don't Get :)

I believe medium.js handles all of the use cases you are talking about. In
fact, you can run the unit tests in your browser:
http://jakiestfu.github.io/Medium.js/test/

On Thu, May 28, 2015 at 8:14 AM, cico88 notifications@github.com wrote:

I need the same html code results from all browsers, contenteditable mess
up everything, it's totally out of control. DIV/P/BR chaos, plus
Shift+Enter doesn't work well too. Also, I wanted to restrict shortcuts
(Ctrl+B/I/U). I don't understand why contenteditable does not allow us to
have full control over the inner html, it adds extra stupid tags :) I was
about to create own editor, take control over contenteditable inner html,
update it on keypress and other events to keep it clear, just to keep
cursor position... but I think it's waste of time. I ended up with markdown
style editor, it's bit techy for clients, which I didn't want initially,
but still better then any other wysiwyg editor nowadays. In short: wysiwyg
sucks. It's like, I type "A" and browser shows "B"...

What You See Is What You Don't Get :)


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

I don't know, it simply does not work for me, http://jakiestfu.github.io/Medium.js/docs/ - Rich - type:
line1 (Shift+Enter)
line2 (Shift+Enter)
line3 (Shift+Enter)

tried in Chrome, FF, strange behaviour

Which of the editor instances are you using?

On Thu, May 28, 2015 at 8:34 AM, cico88 notifications@github.com wrote:

I don't know, it simply does not work for me,
http://jakiestfu.github.io/Medium.js/docs/ - Rich - type:
line1 (Shift+Enter)
line2 (Shift+Enter)
line3 (Shift+Enter)

tried in Chrome, FF, strange behaviour


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

Rich, when I use Rich with Insert Html, it adds DIV in Chrome, but not in FF. Live preview of actual html code below editor would be fine, to see what it actually does in demo.

Very cool idea! I will take a look today if I get time.

On Thu, May 28, 2015 at 8:53 AM, cico88 notifications@github.com wrote:

Rich, when I use Rich with Insert Html, it adds DIV in Chrome, but not in
FF. Live preview of actual html code below editor would be fine, to see
what it actually does in demo.


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

@cico88 I agree with @nrkn , I've tried all existing solutions, and medium.js is as close as it gets. And it does work, as I've incorporated it into a front-end editor that I've built for WordPress. Unfortunately, there are a few existing issues with medium.js, which I would love to see patched for the benefit of everyone.

I would personally sponsor development time to help this project along.

I didn't set out to become the best editor out there, nor would I say we
have achieved that, I simply took a look at others feeble attempts, and
html5 execCommand method, which is stupid, rolled my eyes, pulled up my
sleeves, and set out for a proper abstraction to solve these issues,
extending Jake's already stellar vision. Let's identify the biggest 10
challenges, assemble a team of at least 4, and let's execute in terms of
importance and least difficulty, and solve in that order.

My schedule is, like everyone else's, ridiculously tight, but this project
is important. I would like to serve as a technical lead, finding simple
ways to solve the biggest issues.

Before we execute, let's find at least two financial backers, we might
already have one, any takers?

Those who would like to help solve, please do so, track your hours, and we
will try and find financing that works.
On Jun 28, 2015 10:16 AM, "Nick Haskins" notifications@github.com wrote:

@cico88 https://github.com/cico88 I agree with @nrkn
https://github.com/nrkn , I've tried all existing solutions, and
medium.js is as close as it gets. And it does work, as I've incorporated it
into a front-end editor that I've built for WordPress. Unfortunately, there
are a few existing issues with medium.js, which I would love to see patched
for the benefit of everyone.

I would personally sponsor development time to help this project along.


Reply to this email directly or view it on GitHub
#153 (comment)
.

@robertleeplummerjr, I like the sound of your plan! I can provide some financial backing; my preference would be to do that through Bountysource as I have done in the past. Pointed in the right direction, I might be able to provide some development manpower too.

Excellent! As I mentioned above, I'd be happy to provide some financial backing for this. Should we create a new label to track any issues that are going to be fixed as a collective, and perhaps a milestone with an arbitrary date to keep us in pace?

If you could go through the issues, and give them a "+1", that'd be
awesome, then we could see from your perspective what is important, and
naturally the ones with the most +1's are the higher priority.

On Tue, Jun 30, 2015 at 12:45 PM, Nick Haskins notifications@github.com
wrote:

Excellent! As I mentioned above, I'd be happy to provide financial backing
for this. Should we create a new label to track any issues that are going
to be fixed as a collective, and perhaps a milestone with an arbitrary date
to keep us in pace?


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

Agree with the suggestion for a custom label and a milestone (2.1?) to attach those issues to. At this stage, I'm happy to be guided by others on what the priorities should be. Seems that @bearded-avenger has had the experience using medium.js in production to make him well placed to provide that guidance.

Is there still an appetite to do sprint along the lines of what we discussed above?

There is, there are just limitations on my time right now. Could we
possibly a few bounty's on the important issues? Some of them would take
20 or so hours to resolve, create a unit test for, and to test and further
debug. Would you consider a larger bounty to attract interest?

On Sun, Aug 9, 2015 at 6:28 PM, Nokome Bentley notifications@github.com
wrote:

Is there still an appetite to do sprint along the lines of what we
discussed above?


Reply to this email directly or view it on GitHub
#153 (comment)
.

Robert Plummer

Sure, completely understand; I have no time available right now either. Just wanting to touch base to see if this might still be a possibility some time in the next 6 months or so.

I haven't done enough testing of Medium.js yet to know what the real pain points are. Once I have a better feel for that I will have a better feel for how much funding I could contribute to see those resolved. I'll come back here when I am more ready to do that.