GithubHelp home page GithubHelp logo

yabwe / medium-editor Goto Github PK

View Code? Open in Web Editor NEW
16.0K 16.0K 1.8K 10.15 MB

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Home Page: https://yabwe.github.io/medium-editor/

License: Other

JavaScript 97.47% CSS 2.53%
contenteditable editor javascript medium-editor rich-text-editor wysiwyg

medium-editor's People

Contributors

anilmaurya avatar arteconceito avatar charlgottschalk avatar daviferreira avatar dayjo avatar devalnor avatar eden-lane avatar ionicabizau avatar j0k3r avatar jarlg avatar julianxhokaxhiu avatar ksorv avatar lexderuijter avatar linkesch avatar lizraeli avatar minikomi avatar mphasize avatar nchase avatar nmielnik avatar omniagm avatar pascalpp avatar patrick-webs avatar pedronasser avatar phiggins42 avatar pixelpony avatar ppoulsen avatar rishijain avatar stefanpejcic avatar steoo avatar zuchmanski avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

medium-editor's Issues

Edit links

Just found this project. Very nice! One thing strikes me, however, with a mild level of annoyance; when you set a link (#, <a href>) to a selection, there is no way to edit that link. Clicking on the link button again clears the entire anchor. It should display the currently set link ref and have an X to dispose of it instead.

Undo misses the block-level changes.

Reproduction steps:

  1. Make a block-level change, e.g blockquote the first para.
  2. Make a word-level change, e.g. bold a letter or two, underline something.
  3. Make another block-level change, e.g. change the second para to h1.
  4. Hit Ctrl-Z (Winows/Linux) to undo.

Only the change that occurs in step 2 is undone.

PS: Great work, nonetheless! I was looking for something like this for the landing page on my site. :)

Option to disable placeholders

From #50:

"A simple solution is to give an option to turn off placeholder. It would be even better if it was possible to add/remove the placeHolder manually without affecting the innerHTML content. I could then add / remove it depending on my bound content..."

Enable editor on Textarea

Hello, is it possible to enable the editor on Textarea?

The issue is referenced to getSelectionCoords function.

Thanks.

Link bug in Firefox

I'm getting this linking bug in Firefox on a Mac when i create a link and continue writing - the link doesn't stop...
It's working fine in Chrome...

screen shot 2013-09-25 at 4 34 55 pm

Support for Heading Tags <h1> through <h6>

While the current header1 and header2 for heading tags makes sense in situations where I have to give options for users to create headings but want them to use only few headings.

But, there are some limitations to current approach.

  • Currently only two headers are supported
  • It nags me everytime I click on H1 knowing its really <h3> that I'm entering

While I actually think header1 and header2 approach has its advantages, I have two suggestions that may improve current situation

  1. Increase the number of headers supported to about four.
  2. Give access to low level heading tags with different set of option labels, probably like <h1> <h2> <h3> etc.

PS: I love this project. Thanks a ton for making this wonderful editor.

<shift+enter> wrong behaviour

When hitting <shift+enter> it does a line break <br> but then wraps the new line into a paragraph such as:

<p>Now that there is the Tec-9, a crappy spray gun from South Miami.
    <br>
    <p>This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
</p>

License

What is the License for this project?

Any appetite for tables?

It seems that most 'medium-style' editing experiences eschew HTML tables. I think I get the reasoning, but I also think there's certainly a place for one that includes simplified table management. Is there any appetite for this in your project?

i get this error "Uncaught TypeError: Cannot call method 'toLowerCase' of undefined medium.editor.js?da833dcf63a62ae704445479a4bbdc13fb4538d5:317"

when i select text of first line, then click h1 or h2 button, this error show up at console

i use this with meteor.js and my code is like

Template.editDocument.rendered = ->
    editor = new MediumEditor '.editable'

<template name="editDocument">

    {{#with document}}
        <div id="main-head">
            <a href="{{pathFor 'viewDocument'}}" class="title">{{title}}</a>
        </div>

        <div id="main-body">
            <div class="content editable" data-placeholder="开始写文档。。。">{{content}}</div>
        </div>
    {{/with}}

</template>

this is part of error codes indicate around 317

 while (this.parentElements.indexOf(tagName) === -1) {
            selectionEl = selectionEl.parentNode;
            tagName = selectionEl.tagName.toLowerCase();
        }

Return key change H1 into p

Hi, I just get started with this project. It looks great!

I found that the behevior has changed in the lastest version compared to the github demo version.

In latest version, if I set a title with <H1> and press enter to move the the next line and start typing a paragraph, the <H1> is transformed in a <p>. Demo version is not doing it and I think its the good behaviour.

This commit e3e6c5c changed from "keyup" to "keypress" the event to create a paragraph. Reverting to "keyup" fixes the issue but I wonder why its been changed in the first place... If it need to stay "keypress", its possible to perform document.execCommand('formatBlock', false, 'p'); after a small timeout. It feels more like a hack though.

Jeff

Pluggable actions

Create a pluggable template for button actions and convert medium default actions to the new standard (yet to be defined, something like a JS object with pre-defined methods like label, icon, action, etc.).

[Proposal] Disable returns and/or Toolbar on elements

Disable the availability for the user to use return-key on element(s).

This would disable the use of return-key on a specific element.

<div class="editable" data-disable-returns="true"></div>

This will disable the use of return keys on all elements.

var elements = document.querySelectorAll('.editable');
new MediumEditor( elements, { enableReturn: false });

Disable the toolbar when user selects text

This would disable the toolbar on a specific element.

<div class="editable" data-disable-toolbar="true"></div>

This will disable the use of the toolbar on all elements.

var elements = document.querySelectorAll('.editable');
new MediumEditor( elements, { disableToolbar: true });

__

Let me know if you want the pull-request.

p tags instead of divs

Starting with an empty editor and then inserting content will cause it to use <div> tags instead of a <p> tags. This seems to break the block level functions
Also pressing enter after a heading tag will do the same thing.

Possible solution is using a Mutation Observer to be notified when a new child element is added and if its a <div> change it to a <p>.

Control over pasted content

When HTML is pasted you might want to have a control over which tags or attributes to ignore.

Use case: When a user pastes content that contains

<p style="font-size: 40px; color: purple; background: green;">
    Lorem Ipsum is <b>important</b>
</p>

I would obviously want to ignore style attribute, but to preserve <b>, so it would rendered according to my stylesheet.

Copy-pasting from another topic: Hallo.js uses https://code.google.com/p/jquery-clean/ which is pretty powerful.

<ul> & <ol> support

List support would be good to have. Either Hallo.js way via buttons on the toolbar or Medium way via intelligent number/dash parsing.

default to <p> tag

when i start typing in an empty editor, the content isn't wrapped in a < p > tag.

it works fine after a line-break...
screen shot 2013-09-26 at 10 51 35 am

Yet another broken WYSIWYG editor

The problem with contenteditable is that it does whatever it likes to do.

I played with the editor and quote features a while, and managed to get multiple paragraphs inside each other like this:

<p><q>idm</q><p><q>idm</q><p><q>idmidmidmmid</q><p><q>dimidmimd</q><p><q>t comes with it: the most popular gun in American crime. Like they're actually proud of that shit.  </q><p><p>idmidm</p></p></p></p></p></p></p>

But it looked as if it all was correct. though.

I think your editor is as fucked as the rest of them in this category.

Make it possible to disable the editor

Currently you can start the editor, but there is no easy way to turn it off after user has finished editing. This would be helpful for Create.js integration where users can switch between editing and browsing mode.

Provide change events

Font-face

Since font-faces can be slightly bigger than regular fonts after rendering, we need to verify that when checking the selection dimension to avoit toolbar mislocation.

Themes

Document and implement new themes.

PlaceHolder remove innerHTML

The setPlaceholders function empty the innerHTML when textContent is void (https://github.com/daviferreira/medium-editor/blob/master/src/js/medium-editor.js#L528).
It creates a problem if the content is not really void but contains some <script> tags. For instance, Ember.js with Handlebars will add those to provide bindings.

A simple solution is to give an option to turn off placeholder. It would be even better if it was possible to add/remove the placeHolder manually without affecting the innerHTML content. I could then add / remove it depending on my bound content...

Thanks and continue your good work.

Jeff

Proper handling of ctrl-a

Currently, selecting text using ctrl-a and manually selecting everything using the mouse, produce different results.

For example if all text is italic, and you select everything using ctrl-a, the "i" in the toolbar is not highlighted (signifying the selected text is already italic). The behaviour, however is correct and will undo the italics. It will also highlight the "i" while undoing it, which is backwards.

The worst issue I've encountered is when starting with an empty .editable:

<div class='editable'></div>

Then start to write the first line, ctrl-a, select h1. This transforms the div into:

<h1> Text you entered </h1>

i.e. a non-editable element. Which means you can't write more. Proper behaviour should result in:

<div class='editable'>
    <h1> Text you entered </h1>
</div>

I am not sure how to tackle this. It seems the selection of ctrl-a is different from a manual, visual selection. For visual selection, the above works well.

Related StackExchange.

Modularize

Modularize MediumEditor components, specially util functions like getSelectionCoords etc.

End Of Line char translate to <p> or <br>

I've noticed that the behaviour is not the same when I type a bunch of paragraphs and when I paste the same content (using forcePlainText).

Typing:

<p>
paragraph1
</p>
<p>
paragraph2
</p>

Pasting:

<p>
paragraph1
<br>
paragraph2
</p>

I think it would be better to have the same behaviour.

To create <p> instead of <br> while pasting, the change would be:

document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain').replace(/[\r\n]/g, '<br>'));
becomes
document.execCommand('insertHTML', false, '<p>' + e.clipboardData.getData('text/plain').replace(/[\r\n]/g, '</p><p>') + '</p>');

Jeff

[Request] When hitting return key 2 or x times insert element and disable return-key

Like on Medium when you hit the return key 2 times a <hr> element is inserted on the empty line just above and return-key are disabled until text has been typed.

The <hr> could perhaps be any element set through the options object and the number of allowed empty lines could be as well.

Medium example:

Medumm Example

It's helping the user to create nicely formatted and a schematic layouts.

Toolbar for images

It would be nice with an action/toolbar for images. One similar to the link-toolbar (basically just the src of the image) to be shown upon clicking on an image would be a good start.

More understandable buttons

Hello,

This editor seems to be pretty good, but in my opinion the buttons are too much technical.

Personally I known what is a h1, a h2, or a b tag, but my grand-mother (and maybe a lot of people) doesn't.

It could be a good improvement to have understandable buttons for everyone.

Better demo

We need a new demo page with on the fly feature switching and a better UI.

paste

remove formatting when paste

functionality breaks when using bootstrap

Hi first off super project.

I'm a bit afraid to post this because it might as well be me, my platform or something third.

But I have noticed that the functionality of the editor breaks when I add bootstrap.css. to the project.

Bootstrap 2x - 3, Firefox 24, Linux 3.10.10-1-ARCH

small issue with toolbar

hey @daviferreira
when u select a text which is near to the scrollbar breaks the toolbar element. saw in chrome.

UPDATE: i also noticed this behaviour.

Also Georgiana Wife of the Above,

select "above" from this sentence(second para, somewhere in the middle), toolbar covers that word when u apply H1.
also, selecting text near the scrollbar, toolbar hides the text. cant specify exactly where. one has to just try that to find it. most notably in the last para without scrolling that down, else it wont come into notice.

i guess it just css problem.

thanks

npm publish?

This has a package.json, but isn't published to npm - do you plan to? Looks like this would only require a few tweaks to export MediumEditor and insert CSS with insert-css and you'd be good to go.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.