fastmail / squire Goto Github PK
View Code? Open in Web Editor NEWThe rich text editor for arbitrary HTML.
License: MIT License
The rich text editor for arbitrary HTML.
License: MIT License
Hi !
I'm aware this is not the most useful issue ever haha. In https://neilj.github.io/Squire/, just replace
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
by
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Any chance of markdown support being added?
This editor should generate <em>
and <strong>
rather than <i>
or <b>
, as the latter aren't semantic as well as the fact that screen readers won't distinguish any difference between a text that's inside <b>
tags, but will do so if it's inside a <strong>
.
This topic has a great discussion around this issue.
Javascript doesn't keep information if meta key was pressed when keyup
event happens. But it does when keydown
event happens.
If you undo text changes and press Cmd key there is no way to redo changes.
I've prepared a simple demo for that case
function test(event) {
console.log(event.metaKey);
}
document.addEventListener('keydown', test);
document.addEventListener('keyup', test);
At the end of the editor, if you have a tag running (say a span) around the text, there is no intuitive way to escape out of it.
Suggested route, would probably to escape the tag on enter?
Hey guys, I stumbled upon this bug while playing with Squire on the demo site.
Currently on http://neilj.github.io/Squire/ if you type in the following text:
Hello this is
a test message.
You can't then go and highlight the entire text then center/right align this text. "Selecting All" then doing the alignment doesn't work either.
A single line message like the message below however does work as intended.
Hello this is a test message.
When the current selection does not contain a text node (e.g., if you hit enter a few times and then select the empty lines), executing one of the formatting commands (e.g., bold()) will throw an exception.
This occurs when Squire tries to restore the selection, as startContainer will be null in _addFormat because we use the first node from TreeWalker if the startContainer is not a text node:
// Make sure we start inside a text node.
walker.currentNode = startContainer;
if ( startContainer.nodeType !== TEXT_NODE ) {
startContainer = walker.nextNode();
startOffset = 0;
}
Since the selection doesn't contain any text nodes, walker.nextNode() returns null here.
Just throws an undefined.
It is possible to select text on Windows phone 8.1 bit clicking bold etc doesn't do anything
Hi ,
Tab and shift+tab -> for increasing and decreasing list level respectively.
So that every time I need not go to the toolbar for doing this.This feature is available in many standard editors.
I think it will be very useful if this feature is provided in Squire too.
Also for eg:
1.sample1
2.sample2
3.sample3
4.sample4
In the above case if i select the entire ordered list and apply makeOrderedList , It should remove the list structure (removeList should work). More like toggling .This also seem to be available in many editors.
It would be really nice if these features are available in Squire .
Thank you.
Hello
I make web page to use demo page resources.
http://neilj.github.io/Squire/
Demo page squire-raw.js is old.
I change it to latest version.
I was confirmed the operation in safari and chrome.
But firefox can't work.
I check browser error log.
TypeError: sel is null. sel.removeAllRanges();
This is demo page repository.
https://github.com/cndlhvn/my-squire-demo
How to solve this problem.
Thank you
More informations http://bower.io/docs/creating-packages/
I'm running Squire within a web view on iOS. The OS seems to be preventing keydown events for certain key combinations from making it through to the editor (and the JS context in general) - the tab key, ctrl-[ and ctrl-] don't trigger their assigned commands, for example.
Because of this I've had to reimplement the shortcuts for list indentation etc. Now there's two places in code where shortcuts are defined, which isn't ideal. It'd be really nice if there were a way to access Squire's shortcut map so I could add to/override the defaults. Cheers!
Right now, images that get inserted only get an src attribute. However, for accessibility reasons, alternative text, specified in the alt attribute, is required to make images properly accessible. I therefore request that insertion of an image be enhanced to also require and insert alternative text along with the image src itself.
https://github.com/neilj/Squire/blob/master/README.md#lightweight :
Instead, you get a component you can drop >>in<< in place
Hi!
It is possible in Squire to set defaults (attributes, classes) for the default block tag and the tag itself. What do you think about the ability to set attributes and classnames for all the other main tags: ul
, ol
, blockquote
, for which Squire has built-in constructing API? Something like
editor.defaults = {
ul: {
'class': 'editor-list',
...
},
blockquote: {
'class': 'editor-quote',
...
},
}
Having classes on some these tags may be very convenient in that if one have given ul
some stiles, he|she doesn't have to override all the other lists' styles.
Hello! If the range is collapsed we can not increase/decrease the font size. For example, if the user want to start from the current caret position with a bigger font size...
Thanks!
Hi,
Just wanted to let you know that I wrote a wrapper directive for squire.
The UI was based on your gh-pages code, but adds a bit more functionality (and removes some).
http://hourlynerd.github.io/angular-squire/
Thanks for your work on squire :)
This bug does not show up in your demo page (http://neilj.github.io/Squire/), but it does show up if I try using Squire in a custom document or even in the Demo.html from your repository.
To reproduce the bug: type a few letters on the 1st line in a fresh editor window then delete one letter and you'll see that a new empty line was just appended below (press down arrow and the cursor will step down one line).
Hello! thanks for this great editor, I love its API.
I am working on a project where I can not use an iframe, I have to use a content editable DIV in the body of an html page.
Is it very difficult to modify Squire for this goal? Any clue?
Thanks in advance,
Best regards,
Frankai
I'm working on a Dart project, and I'd love to use Squire in it. My only problem is that I need all dependencies to be Dart native (to be able to run natively up to 4x the speed of javascript on browsers supporting Dart natively). Dart syntax is not too different from javascript, very easy to convert, so I wonder if you can port this lib in Dart. Thank you.
It looks like I can accomplish same with changeFormat
, but it would be nice if makeLink
allowed me to set target='_blank'
on the links.
On the Squire demo, you can click the same button (e.g. bold) to both bold AND unbold.
From the API docs I can't tell the appropriate way to detect the text state (is it bold or not?) therefore, can't match this behavior easily...
Suggesting this be added to the doc ...
Any chance this can be made to work on mobile Safari?
Hello.
I like this editor.
Now I'm coding rails gem using example squire js and css.
I get source code from this sample site.
http://neilj.github.io/Squire/
And I use Squire-UI.js , Squire-UI.css , Squire-UI.html for my gem.
But I can't find out license in that.
Please tell me. What kind of license it that?
Thank you.
Wrong repo
I'm using squire in a way that loads multiple (commonly tens, possibly a hundred or so) iframes onto a single page.
To try to reduce script loads (though, I think the cached copy would be used?) I've changed the code to make a squire object instead of using a self-executing function: function Squire( doc ) { ... }
instead of (function(doc) { ... }( document ) );
and then in each iframe executing new parent.Squire(document)
This required I change var RangePrototype = Range.prototype;
to var RangePrototype = win.Range.prototype;
I'd like to try to further reduce duplication of function/object definitions (for example, not having a Range object per iframe). Is there an easy way to do this, or will I have to break apart things so they're attached to the main window object?
Are there any things that need their own instance, or do all functions use only what's passed to them?
It seems like there ought to be an npm package in for this editor. Many front-end libraries use it, and support for including npm packages is improving (see systemjs for an excellent example). So would such a thing be possible? There already exists a squire
package - a front-end build tool of some sort - but this could be named squire-rte
, or squire-editor
?
For my own purposes, I could get around this by maintaining a private package on our closed npm repository, but it would be far better for everyone if the package was public.
Right now, when starting text or pressing ENTER, Squire inserts a new div tag for a new paragraph into the contentEditable. However, the semantically appropriate tag to use for any paragraph-style block of text would be p instead of div. Also, the initial element to type into should be a p. Screen readers for the blind use semantic tags to identify page elements such as headings, paragraphs, lists, block quotes etc. While other tags Squire uses are appropriate, I think div is too generic and should be replaced by p elements where possible.
Hi, first of all squire is awesome, I saw this one bug though .
1.I inserted a blockquote in the editor.
2.I copied some content from GEdit or notepad which has more than one lines.
3.When I pasted that inside that blockquote , it gets inserted after that blockquote.
Also please see that if I paste that in an empty blockquote , the blockquote gets removed.
Thanks neilj.
is there plugins or demos? thanks.
maybe we need some functions like:
getSelectedNode()
, returns current selected node;selectNode(node)
, select node (in range)There is no way to completely reset all of the text attributes of text pasted into the text area. Gmail has "clear formatting" button which does that. I propose we add this to the editor.
Are there technical difficulties preventing implementation of clear formatting feature?
I really miss this in fastmail. I usually have notepad open just to paste text into it and immediately copy it into fastmail.
I am using the editor but i did not see the option of embedding the slideshare code and youtube code.
OR to see the source code.
Can you tell me how to sort out these feature into squire.
We are using Squire to implement an editor to which different modules could send arbitrary HTML fragments to insert into the editor. I believe it would be helpful to add an insertHTML method to the Editor.
Hi Guys,
I just found squire from keystonejs project issue
keystonejs/keystone#1112
It looks awesome.
I have been using
The reason I tried is they have rails combination. But they can't fulfill my requirements easily.
I like ckeditor but the complexity isn't fit for my projects.
Don't know why I haven't get into squire before until now. Probably since it has not rails gem.
Can I ask how easy to _upload images_ and _insert code snippet in squire_
I'm running Chromium 41.0.2272.76 (Developer Build) Ubuntu 14.04. Lately I noticed that the HTML output of the editor ends up with an empty link if there is a link somewhere else in the document. To recreate with the provided Demo.html file:
You should end up with the following text in the editor, where the middle line is a link:
asdf
google.com
asdf
editor.getHTML()
in the console returns the following:
"<div>asdf<br></div><div><a href="http://www.google.com">google.com</a><br></div><div>asdf<a href="http://www.google.com"></a><br></div>"
Notice the empty link (<a href="http://www.google.com"></a>
) at the end. This happens every time I follow these steps. It does not happen when I type all three lines first then add the link on the second line. Also, it does not happen in Firefox 37.0.
$("body").append("<textarea rows='60' cols='150'>"+$("iframe")[0].contentWindow.editor.getHTML()+"</textarea>")
It would be nice if this feature was available on bower. All you need to do is add another tag.
Thanks
There are a lot of rich text editors out there, most of which are not accessible. Some have limited accessibility. As it stands now there isn't a way for a keyboard or screen reader user to navigate to the buttons controlling the formatting. Additionally, the letters being typed aren't spoken out.
Providing this functionality would put Squire in a rare atmosphere and make it a goto product for people looking to build accessible form implementations (and these are growing rapidly due to new laws and lawsuits).
I am getting a the wrong text in Squire when I use getSelectedText() on an empty line.
Assuming content of the editor is the following html block, getSelectedText() returns "456" if the selection is an empty line
<div>123<br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<div>456<br></div>
jshint flips out during my build because your package is not yet on bower and i had to pull it into my codebase:
I can open a pull request if you are too busy to fix this right now
squire-raw.js: line 122, col 46, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 151, col 14, Unexpected use of '--'.
squire-raw.js: line 217, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 229, col 27, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 232, col 48, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 265, col 14, Unexpected use of '--'.
squire-raw.js: line 279, col 9, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 330, col 26, Unexpected use of '--'.
squire-raw.js: line 444, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 464, col 14, Unexpected use of '--'.
squire-raw.js: line 505, col 24, Unexpected use of '--'.
squire-raw.js: line 638, col 1, Empty block.
squire-raw.js: line 790, col 14, Unexpected use of '--'.
squire-raw.js: line 844, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1011, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1244, col 5, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 1250, col 14, Unexpected use of '--'.
squire-raw.js: line 1285, col 18, Unexpected use of '--'.
squire-raw.js: line 1390, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1647, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1931, col 49, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2020, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2072, col 19, Unexpected use of '--'.
squire-raw.js: line 2152, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2155, col 49, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2253, col 9, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 2344, col 14, Unexpected use of '--'.
squire-raw.js: line 2476, col 14, Unexpected use of '--'.
squire-raw.js: line 2546, col 18, Unexpected use of '--'.
squire-raw.js: line 2629, col 53, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3011, col 46, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3125, col 43, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3136, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3147, col 18, Unexpected use of '--'.
squire-raw.js: line 3173, col 41, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3179, col 36, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 21, col 10, 'navigator' is not defined.
squire-raw.js: line 1191, col 5, 'console' is not defined.
squire-raw.js: line 1443, col 5, 'top' is not defined.
squire-raw.js: line 2525, col 5, 'setTimeout' is not defined.
squire-raw.js: line 2605, col 5, 'setTimeout' is not defined.
squire-raw.js: line 2950, col 13, 'setTimeout' is not defined.
squire-raw.js: line 2998, col 13, 'setTimeout' is not defined.
squire-raw.js: line 3425, col 6, 'top' is not defined.
squire-raw.js: line 3435, col 4, 'document' is not defined.
Love the editor and the merge of insertHTML
. Currently using this for a product and would love for the bower config to be updated so that the latest is available :) Let me know if there is a way to help @neilj
Apparently, the defaultBlockTag option only applies to lines after the first line in the editor. I can reproduce this bug consistently like so:
Step 1. Instantiate the editor:
var iframe = document.getElementbyId('editor'),
editor = new Squire(iframe.contentDocument),
editor.defaultBlockTag = 'P';
Step 2. Type a line, hit enter, type another line, then view HTML:
<div>This is a test.<br></div><p>This is only a test.</p>
It looks like the 'select' event is only fired when a selection spans multiple nodes, while the documentation states that the select event should be fired when "[t]he user selected some text." Based on the documentation, I would expect that we would get a select event whenever the selection changes, regardless of the boundaries of the selection.
I believe these events are getting filtered out in Editor.js, line ~344-346:
if ( anchor !== focus ) {
this.fireEvent( 'select' );
}
This is essential for an RTE IMHO =)
I spent some time debugging today what ended up me using both the advanced init and basic init at the same time. I bound the plugin 2 times to the same iframe and it started doing really weird things.
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.