jaredreich / pell Goto Github PK
View Code? Open in Web Editor NEWπ the simplest and smallest WYSIWYG text editor for web, with no dependencies
License: MIT License
π the simplest and smallest WYSIWYG text editor for web, with no dependencies
License: MIT License
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')
}
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?
There is a much simpler one here (no dependencies) :
GitHub.com/MajickTek/WYSIWYG
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:
OnChange does not work under ie10, but editor.content.innerHTML can get the value
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?
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.
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 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.
The onChange setting works in Chrome but doesn't work in IE 11.
Are multiple editor instances possible?
Is it just a matter of calling pell.init a couple of times with different root IDs?
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)
Maybe I'm missing something but how can I show pre-existing content inside an editor istance?
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
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, this looks so amazing π
Is it possible to add support for text / background color ?
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.
how to make it work under react ?
Hi!
Good job for Pell.
But a little things make me crazy:
Thanks you for help!
How:
What happens:
What should happen:
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!
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.
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'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?
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!
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!
Living list:
How to enable for input or textarea
This option would allow HMTL output to look like this:
<span style="font-style:italic;">Blah</span>
Instead of
<i>Blah</i>
Such as Control + b to bold. It'd be useful to make this configurable.
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.
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?
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?
Hello Pell Team,
I believe a code preview action button or plugin that reflects changes in the editor preview would be a great feature.
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.
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 a section of text is highlighted, the formatting bar (Bold, Italic, Underlined, etc...) should show which formatting options are applied to the highlighted text.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.