Pen focus issue

[haydenbleasel]

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

[patrick333]

hi, Hayden I tried to reproduce the focus issue you said above, but I failed. It could be that this issue of focus is raised by some conflicts with, maybe, other js files in your project, or other libraries, e.g. angular(seems you are using it). Maybe you could provide more details to us.

[haydenbleasel]

Hey @patrick333, we fixed this eventually (not sure how) but it was due the way we modified DOM elements and stuff. Sorry for the wait :)