This adds a mode that shows hints of the markdown that was used to create the tags. This is a really useful way to teach people markdown.

It is all just generated with :before and :after selectors on the elements.

Wanna know, How can I destroy Pen function ?

Example :

When I hover A element so

var penA = new Pen({editor: document.querySelector('.A')});

When mouseover how to destroy that ?

This change adds a title attribute to each toolbar icon so that users can get a better idea what that icon will do. The title attribute is included in the options.list, separated from the command name by a vertical bar. list: [ 'blockquote|Blockquote', 'h3|Heading 3', 'h4|Heading 4', 'code|Code', 'insertunorderedlist|Unordered list', 'bold|Bold', 'italic|Italic', 'createlink|Hyperlink', 'insertimage|Image' ],

I want to use it with angularjs, hence, would want to extend the prototype of Pen with events and functions specific to angularjs.

would you be interested in such a PR? do you have any suggestion regarding design?

Added a config element for 'input' to make it easier to integrate with forms in a site. It is supposed to be configured the same way other such config elements use like 'editor'.

1. 隐藏 Pen 所有的私有方法，通过闭包函数实现私有方法；
2. 完善事件机制，destroy/rebuild 不再产生内存泄露；
3. 优化 menu 激活机制；
4. 增加标签、属性黑名单，可以自动清理黑名单的标签、属性；
5. 增加 change 事件，监听编辑器内容变化；
6. 增加 placeholder；
7. 增加多个使用方法；

具体见下面代码解释。

This set of commits adds a few additional build targets to make development easier, and it also switches to using Sass for generating the CSS. This will allow for some abstractions down the road and also make the project more extensible.

D:\test\pen>grunt
Running "jshint:files" (jshint) task
Linting src/pen.js ...ERROR
[L817:C5] W089: The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
    for(var p in regs) {

Warning: Task "jshint:files" failed. Use --force to continue.

Aborted due to warnings.

And the test passed ;) would be happy if merged

Heya,

Basically, I have a problem where Pen won't allow me to edit my content as it unfocuses my current <div> when i hover on the tooltip (you can tell by the green / grey border change) e.g.

The reason for this is because Pen is being appended onto the document body...

    <div class="info ng-scope pen pen-placeholder"  contenteditable="true">...</div>
    <div class="pen-menu pen-menu">...</div>
</body>

... rather than injecting somewhere such as inside this current <div>:

    <div class="info ng-scope pen pen-placeholder"  contenteditable="true">
        <div class="pen-menu pen-menu">...</div>
        ....
    </div>
</body>

For reference, here is my initialisation code:

console.log($element[0]);
var pen = new Pen({
    editor: $element[0], // <div class="info ng-scope pen pen-placeholder"  contenteditable="true">...</div>
    debug: true,
    list: ['bold', 'italic', 'underline', 'insertunorderedlist', 'createlink']
});

I believe the solution to this is to add a property which defines where the Pen element will be injected (document body by default).

In some browsers the toolbar briefly flashes in the top left corner before being correctly placed when the user double clicks. This is because the range rectangle has all of its values set to 0. Here we detect if the offset defined has a width and height of 0, if this is so we can safely assume the toolbar should not yet be rendered. Works as expected.

<link rel="stylesheet" type="text/css" href="/assets/pen/pen.css" />
<script src="/assets/pen/pen.js"></script>
<script src="/assets/pen/markdown.js"></script>

<script type="text/javascript">
  var editor = new Pen(document.getElementById('my_elem'));
</script>

Error:

pen.js:485 Uncaught Error: Can't find config
    at new Pen (pen.js:485)
    at edit:102

There's an issue in the rendering of Markdown for Bold, Italic or Bold-Italic.

The Markdown clearly specification states that *Italic* should produce italic, **bold** will produce bold, and therefore ***bold-italic*** produces bold-italic .

However, there is code in pen.js that states 'italic' is ***italic*** and bold-italic is **bold-italic** which is wrong (it produces Bold-Italic and Bold respectively).

If you pasted the result of the generated code into any markdown processor it would not reproduce what you'd typed correctly.

Use touch events to detect selection as well as mouse events. Always display the toolbar at the bottom because the browser's built-in toolbar appears at the top most of the time.

(BTW, I'm also working on a Custom Elements wrapper for Pen.)

Improved toMd output quality. Regex-based converter doesn't work well on recursive nodes like nested lists, code, etc. Now it replaced with DOM visiting.

Please review code accurately: I'm C++ programmer and I don't know best practicies and coding style in Javascript.

Hi, seems like this is the best editor fitting my needs, however I can see that it hasn't been maintained in almost a year, issues and PRs are ignored. Is this project abandoned?

Thanks :)

Hey,

I wanted to initialize pen on a textarea, but the toolbar doesn't show up.

after having investigated the problem, it seems that selection.isCollapsed is always true if you select text in a textarea.

that seems more like a chrome bug, but I can't get it working this way.

no push, I'll use another MD editor, just letting this issue here.