jaredreich / pell Goto Github PK

Firefox on Win10

After trying to open the editor on IE the console throws an error:

The same happens for IE 9 and 10, console throws the same exact error for both of those browsers.

Hi
Can you provide an option of adding more commands to default actions on initialization?
I suggest you use a different variable example (extend) which is an object that will eventually be merged with actions. That way we can add other commands like h3 h4 etc.
thanks

Hey,

I was using SweetAlert to retrieve input in custom actions:

actions: [
  {
    name: 'link'
    result: () => {
      swal('Enter Image URL', { content: 'input' })
        .then(url => pell.exec('createLink', ensureHTTP(url))
    }
  }
]

This doesn't seem to do anything? The URL does get returned properly though. I'm guessing it has to do with document.execCommand() and trusted events... but I'm not so sure.

Thanks!

Keyboard trapping occurs due to the tab key feature (#13). When a keyboard user tabs through an the interface and reaches the Pell editor, they will be stuck inside it if they are without mouse control. There's also the issue of missing WAI-ARIA support in the editor's markup but I'll open a separate issue for that 😄 .

There's a short discussion regarding how to handle keyboard trapping with regards to the text fields: 'What keyboard input makes sense for tabbing out of a rich text field?', and also a case study from the WCAG 'No Keyboard Trap'.

I can see two fixes for this issue:

1. Add config property to permanently disable tab key input, or
2. Binding the esc key to temporarily disable the tab key input until the user starts typing again to allow them to hit tab again to leave the text area

Hi, this looks so amazing 👍

Is it possible to add support for text / background color ?

Hi!
Good job for Pell.
But a little things make me crazy:

1. Can't remove the horizontal line.
2. Can't white under the horizontal line.
3. adding undo et redo doesn't works.

Thanks you for help!

Hi there!

I've got a Cloud PaaS I've been working on and I've figured out a way for pell to load/save files to/from a users Cloud Drive. It's still in the very early stages and I haven't got a working version yet. I am getting very close though, and I'll get it eventually.

In the meantime, I've added a bunch of PHP code to start Unoconv, take in inputs from the user, and display primitive options and a table full of compatible files from the users Cloud Drive.

What I've found is that the pell textbox is very fragile and disappeared on me while developing around it. I've been unable to repeatably pinpoint the offending code. Maybe the pell experts could take a look and tell me what I broke? I am eager to provide whatever info I can to help get past this hurdle. Let me know if I forgot anything important.

Thanks, guys!
zelon88

The comparison table currently indicates that CKEditor depends on jQuery. That's not correct. CKEditor is pure JavaScript, with no dependencies.

CKEditor has instead a jQuery integration, which can be used by those who prefer to use the jQuery lingo when integrating CKEditor into their pages.

Hi guys
I think it would be nice to add the option of undo, remove or clear formats.
What about the ability to preview editor code
thanks

I realize that eventually a "Clear Formatting" feature might be added later, however, I wonder if there's a way to (on paste) clear all formatting except what is allowed by the interface buttons. I get I can "cmd shift alt v", but the specific thing I'm looking for is a filtered paste instead of just removing all formatting.

This option would allow HMTL output to look like this:

<span style="font-style:italic;">Blah</span>

Instead of

<i>Blah</i>

The onChange setting works in Chrome but doesn't work in IE 11.

I tried to put pell in a form, and i found each pell-button press will perform a form submit
how could i avoid that?

Hello Pell Team,

I believe a code preview action button or plugin that reflects changes in the editor preview would be a great feature.

Hi,

If the focus is on the text and you press one of the format buttons, the text loses focus.

Maybe there could be a way to return focus to text once the format button press finishes?

how to make it work under react ?

How to enable for input or textarea

When a section of text is highlighted, the formatting bar (Bold, Italic, Underlined, etc...) should show which formatting options are applied to the highlighted text.

Hello again!

I was reading this issue and it did not seem to help.

I am trying to pre-populate the Pell textbox with content loaded by PHP. So far I've tried using PHP to generate a Jscript function that will change the innerHtml of the "pell" div with a PHP variable.

Here's the code...

if (isset($_POST['pellOpen']) && $pellOpen !== '') {
echo ('
function pellOpenData() {
document.getElementById('pell').innerHTML = ''.str_replace('"', '', json_encode($pellOpenFileData)).''; }

window.onload = pellOpenData;'); }

and the Jscript function it generates...

function pellOpenData() {
document.getElementById('pell').innerHTML = 'fs<b/>dfsda</b/>\n'; }

What I get for an output is a textbox with no styles and no options bar at the top. It's just pre-formatted text from the textfile I'm feeding it.

Any advice would be greatly appreciated.
Thanks guys!

UPDATE:
1ca5f79
https://github.com/jaredreich/pell#example-markdown

When the highlighted text is applied with H1 or H2 button in the formatting bar. There is no option for user to restore back to original size of that particular text. The indication or toggle-able buttons on the formatting bar might be an enhancement to mitigate this issue.

Such as Control + b to bold. It'd be useful to make this configurable.

Hi, would you consider to remove gulp and use just plain npm scripts to lighten the project development too?
And what do you think about using the new class syntax for this module?

Living list:

• ProseMirror
• Squire
• Trix
• Trumbowyg

How:

• type something
• press button (e.g. bold)

What happens:

• can't type anymore, cursor is gone

What should happen:

• cursor should stay where it was

Maybe I'm missing something but how can I show pre-existing content inside an editor istance?

Are multiple editor instances possible?
Is it just a matter of calling pell.init a couple of times with different root IDs?

Timeout and killed process when running nuxt build on node 8 / npm 5

@jaredreich Has the problem been solved? I've had the same problem. What caused it?

I'm really keen on this plugin. However, when using your demo version I add a link there doesn't seem to be a way to remove it. I highlight the linked text, then click on the link icon again (usual UI behaviour) but it brings up another modal box.

Am I missing something?

What do you think to implement two buttons to increment / decrement font-size?

PS. of course I will personally make PRs for all of the issues I'm opening if you'll accept them.

Related: #35

@jaredreich Do you think we can have a type for button?

PS: I am using the following fix right now:

const pellButtons = document.getElementsByClassName('pell-button')
for (let i = 0; i < pellButtons.length; i++) {
  pellButtons[i].setAttribute('type', 'button')
}

such as
#include <header>
?
its all good the time you wrote them, but when you store them somewhere and restore them back to the editor, them disappeared(they are filtered?)

When the mouse cursor is overtop of a button on the formatting bar (Bold, Italic, Underlined, etc...), the button's background color should change to indicate that it will be used when the user clicks.

It's a little difficult to tell which option is selected until you click, in some cases.

OnChange does not work under ie10, but editor.content.innerHTML can get the value

Hello Pell Team,

When you type in the pell editor and press enter, the html output adds a div with text in it. Can you change this to be another element (like a p tag) instead or have all text be wrapped by a p tag? Currently, it sets it to <div></div>.

Example, http://recordit.co/O5dBRBdKbw

Hi, is it possible to change the behavior of the return key? In particular I would like to create a "p" tag instead of a "div".

Thanks!

I found something interesting when I was using pell. I clicked the action button, then execCommand API worked with current selection, it seems everything is OK.But, as far as I know, clicking buttons means blur, blur means losing selection.

If I write a rich editor, I prefer to save the selection on blur and restore it on focus, however, I found handlers like this nowhere in the source code of pell.

How can pell do that?

Hi, awesome minimal library! I was playing around with pell and found that the root option only takes an id string as its value. I think it would be great if it supports HTMLElements as well. That way it's easily pluggable into any framework/library.

Just to make a point, I am working on a library called cell, and currently the only way to integrate pell into cell is by using the default syntax, I have to have an id set to the pell element. Here's an example https://jsfiddle.net/ps91th2L/2/

However if we allow an HTMLElement to be passed as root (See the commit here: https://github.com/gliechtenstein/pell/blob/master/src/pell.js#L118), we can get rid of the id, resulting in something like this: https://jsfiddle.net/ps91th2L/1/ (Note that I'm passing this as root, which in this case is the node itself instead of an id string)

But anyway I'm pretty sure you don't want to add all kinds of features to bloat up the library so just wanted to create an issue instead of sending a PR (it's just that one line change I linked to above)

It seems has some style problem in demo page

There is a much simpler one here (no dependencies) :
GitHub.com/MajickTek/WYSIWYG

    button.innerHTML = action.icon

I see this line in your code.

and if I did this:

...
actions: [
    name: 'attack',
    icon: '<button onclick="console.log(\'you are under attack\')">attack<\/button>',
]
...

When I click the attack button, I will see "attack" in my console.

I think it's dangerous to render the string from users in our website.