voog / wysihtml Goto Github PK
View Code? Open in Web Editor NEWOpen source rich text editor for the modern web
Home Page: http://wysihtml.com
License: MIT License
Open source rich text editor for the modern web
Home Page: http://wysihtml.com
License: MIT License
when caret is inside bold and bold formating is removed, firefox returns an error:
Error: Range error: Range is no longer valid after DOM mutation
If the editor is placed in a scrollable element other than the document or body, focusWithoutScrolling behaves incorrectly. We place Wysihtml5 in a scrollable modal, but focusWithoutScrolling uses the underlying <body>
element's scroll position, which is incorrect.
I'm not sure the best solution. It seems this may require a recursive DOM traversal saving every element's scroll property, then focusing, then setting each element back to its original value.
IE11 creates paragraphs instead of <br> tags when hitting Enter
Tested on:
Windows 8.1
IE 11.0.9600.17107
I went to update to v0.4.11 and v0.4.12 and have reserved three errors. Two of them are fatal errors in Firefox and one in chrome.
Here is how I am initializing the wysiwyg.
$(document).ready(function () {
var editor = new wysihtml5.Editor("id", { // id of textarea element
toolbar: "wysihtml5-toolbarid", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
name: 'form-control',
style: true,
useLineBreaks: true
});
The first two errors are in Firefox. Is there something I need to set up or is there a fix?
TypeError: sel.nativeSelection is null
sel._ranges.length = sel.rangeCount = sel.nativeSelection.rangeCount;
wysiht...3409491 (line 3453)NS_ERROR_FAILURE:
that.doc.execCommand("enableObjectResizing", false, "false");
wysiht...3409491 (line 12547)
The last error is in Google Chrome which only happens when you refresh the page.
The given range and the current selection belong to two different document fragments. wysihtml5x-toolbar.js?v=635399841143409491:2982
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:2982
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:3017
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:411
Module.init wysihtml5x-toolbar.js?v=635399841143409491:383
init wysihtml5x-toolbar.js?v=635399841143409491:311
loadHandler wysihtml5x-toolbar.js?v=635399841143409491:469
Thanks or the help.
This came up recently when the page is loaded. It gives me this error from firebug:
TypeError: b.nativeSelection is null
wysiht...2581355 (line 299)
After the page loads it does not show anything where the text area is supposed to be. An help would be nice.
In 0.4.3 rangy was exported to window. Now it is exported to global.
May there an option to have rangy as own dependency via bower and provide a version for amd without rangy embedded?
You can see that behaviour in the advanced example.
Steps to reproduce:
Probably the same issue:
Once entered a link, beginning a new line, the caret is not blinking after pressing enter.
And the third one, probably again the same issue:
Type some text, start a bunch of new lines until at the end of the textarea. Type some text, press Enter. The new line is not visible. The scrollable element is not moving. Type some text, the new line is showing.
This all is not happening in the demo: http://edicy.github.io/wysihtml5/
What is different here?
The predefined set of methods available when using parserRules
is usually sufficient, but sometimes you need to perform some work on attribute value. Unfortunately attributeCheckMethods
is not exposed as a wysihtml5 attribute/configurable/extensible.
It would be nice if you could implement rules by your own by augmenting parserRules
or by specifying functions directly in check_attributes
as in:
a: { check_attributes: { href: function(av) { return [some elaboration on av]; } } }
Hi,
I have some page where i construct this editor and where socket.io is listening in the background. The content of the element that i transformed in this "wysihtml5" could be changed on one of the sochet.io calls and i want to visible in the editor without emiting change.
On a first glance i can do one crude way: destroy the current Editor from the textarea, update the textarea and re-create an Editor. It smells a bit heavy so i hope there is some other magical way to change the content. It is important that the "change" signal is not emitted again when i update it.
Best regards,
Mark
I'm getting a
NS_ERROR_DOM_NOT_OBJECT_ERR: Parameter is not an object
caretPlaceholder.parentNode.removeChild(caretPlaceholder);
wysihtml5x-0.0.0-beta2.js (line 4446)
whenever I try to add a link. I'm using wysihtml5x-advanced.js (unchanged). In fact, I get the same error at the demo http://edicy.github.io/wysihtml5/examples/advanced.html
NS_ERROR_DOM_NOT_OBJECT_ERR: Parameter is not an object
var node = this.createContainer(range.endContainer.ownerDocument);
wysiht...eta1.js (line 5041)
This happens on FF17.0.8. Any ideas why? Could it be related to this one: jhollingworth/bootstrap-wysihtml5#138
I've found that the editor is a tab trap when using the keyboard to navigate through a form. I can tab through preceding elements, but upon reaching the editor the "TAB" key will insert tabs. It would be nice if there was a way out of the editable area via keyboard navigation, or a way to turn on an "ignoreTabs" setting.
(Close one, open another.)
On the iphone (iOS 7) when clicking on a link added to the wysihtml5x iframe, the linked page loads inside the iframe, instead of showing the toolbar with the http address of the link.
With 38176a4 IE8 cannot load the editor anymore. The reason for that is that 1. compareDocumentPosition
is not supported by IE8 and 2. the Node
interface is not available in IE8.
Thus _detectedInlineRangeProblems
in selection.js cannot be processed.
When I'm navigating a table with the up and down arrows, the newly entered cells don't get the wysiwyg-tmp-selected-cell class. Only selecting cells with the mouse will do so.
Likewise the data-wysihtml5-hiddentools="table" element gets only shown if I select a table with the mouse. If I enter it by keys, nothing happens.
I have written a command to format a text as <small>
. This works as expected.
But removing the tag does not work because <small>
is declared as a different nodetype than for instance <b>
.
The command can be seen here: https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/blob/v0.3.0-wip/src/commands/small.js
I have written a test: https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/blob/v0.3.0-wip/test/bootstrap_editor_commands_test.js
The two last assertions do not work.
When you press enter key, if you reached bottom of the editor, previously typed content will not scroll up.
It will only scroll up when you type any other letter.
Expected is to move all content up and see cursor (blank)
It would be very useful to use version 0.4.x with bower.
The editor stops working after adding, deleting and then adding list again. Steps to reproduce:
Tested with 0.4.0 and master, Safari 7.0.1, examples/advanced_div.html
Any idea how to disallow new lines, paragraphs and divs? I can set the rules to unwrap/remove them and that tidies them away while pasting content, but it doesn't stop them from being added by typing.
I have a use-case where I need to create multiple editors. When the second editor is created, the following console error is logged:
Uncaught TypeError: Cannot read property 'document' of null wysihtml5x-toolbar-0.4.5.js:6712
getDocument wysihtml5x-toolbar-0.4.5.js:6712
wysihtml5.views.Composer.wysihtml5.views.View.extend._create wysihtml5x-toolbar-0.4.5.js:11514
sandbox.dom.Sandbox.stylesheets wysihtml5x-toolbar-0.4.5.js:11489
(anonymous function) wysihtml5x-toolbar-0.4.5.js:6746
If parser rules has set attributes target _blank rel="nofollow" for link, the auto created link does not format links accordingly.
In Chrome I get an warning which reads:
'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).
It appears to be in wysihtml5x-toolbar.js at line 2989
I have code such as:
$(text).keyup(function() {
console.log("called");
updateCountdown(text, countdown, chars);
});
which I use to count characters in a text box. However, once adding the 'wysihtml5' class to the textbox, it is no longer called, even though it worked perfectly fine without it. Is it possible that wysi is intercepting this regular method, and not dispatching a new one?
If you use a placeholder in textarea-tag, the IE can't delete the text, if the focus on the editor.
Click on empty editable area (with placeholder) removes placeholder but sometimes does not focus caret
Disclaimer: This is not a bug in wysihtml5 per se, but it took me some time to track it down and it is in place in the code with some "hack" comments.
Bug: if you open a page with wysihtml5 in Selenium (tested with Firefox and Selenium 2.39.0), it crashes the test with
6:08:42.377 WARN - Exception thrown
java.lang.IllegalArgumentException: Required attributes are not set or any non-null attribute set to null
at org.openqa.selenium.Cookie.validate(Cookie.java:140)
at org.openqa.selenium.Cookie.<init>(Cookie.java:86)
at org.openqa.selenium.Cookie$Builder.build(Cookie.java:225)
at org.openqa.selenium.remote.RemoteWebDriver$RemoteWebDriverOptions.getCookies(RemoteWebDriver.java:665)
at org.openqa.selenium.support.events.EventFiringWebDriver$EventFiringOptions.getCookies(EventFiringWebDriver.java:519)
at org.openqa.selenium.remote.server.handler.GetAllCookies.call(GetAllCookies.java:33)
at org.openqa.selenium.remote.server.handler.GetAllCookies.call(GetAllCookies.java:1)
at java.util.concurrent.FutureTask.run(FutureTask.java:262)
at org.openqa.selenium.remote.server.DefaultSession$1.run(DefaultSession.java:170)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:724)
16:08:42.377 WARN - Exception: Required attributes are not set or any non-null attribute set to null
This can be fixed by commenting this line (this._unset):
// This doesn't work in Safari 5
// See http://stackoverflow.com/questions/992461/is-it-possible-to-override-document-cookie-in-webkit
this._unset(iframeDocument, "cookie", "", true);
It seems to me that this line is not necessary (looking at it and the comments above this code), but someone who understands wysihtml better should take a look.
When you make a nested list (especially of another type) you must do:
<ul>
<li>blah
<ol>
<li>blah</li>
</ol>
</li>
</ul>
Where right now it's producing:
<ul>
<li>blah </li>
<ol>
<li>blah </li>
</ol>
</ul>
This issue is causing my emails to all parse incorrectly when I using the 2 different types of lists together. Any way around this?
See this jsfiddle: http://jsfiddle.net/C87zP/5/
See this video: https://dl.dropboxusercontent.com/u/26776187/wysihtml5-fontSizeStyle-2.mov
Steps:
contentEditable
Editor
.editor.composer.commands.exec('fontSizeStyle, '54px')
editor.composer.commands.exec('fontSizeStyle, '36px')
Expected: Selected text in step 6 has a font-size of 36px
Actual: Only the text that was made larger in step 4 has a font-size of 36px; the rest of the selection stays at the original size.
It works if all the text is wrapped in span
s, which I am using as a not-very-nice workaround for the moment.
Thanks!
I suggest adding 'code' to BLOCK_ELEMENTS_GROUP:
https://github.com/edicy/wysihtml5/blob/master/src/commands/formatBlock.js
Also, is there a way to add a class to the target when calling formatBlock? This could be very useful.
As the title says, the QUnit test suite fails for several tests in my current environment.
(Firefox 30.0, Fedora 20 x64)
Chrome passes the tests 100%, PhantomJS fails some test and then times out on the Blockquote tests.
What browsers did you execute the tests with? Is it just my current system that's at fault?
Also, would you be interested in setting up a connection to Travis CI and/or SauceLabs for automated cross-browser test execution?
When using a DIV, the change_view action is not showing the HTML markup. When using an iframe it does.
The advanced demo shows the HTML in an alert (yikes!). Is there a technical hurdle to getting the div to switch and show the markup?
Steps to reproduce:
Expected result: The bullet list appears in the same fashion as it was after step 1.
Actual result: Only the first line appears as bullet list. The other lines remain selected. After a second click on insertUnorderedList, the other lines will correctly set as bullet list, however, they are now wrapped in a second <ul>
.
I have this bug, when press enter key once, then press it again, the cursor will first move down, then move up to the line before. and this is only affecting Chrome, anybody help? this is not from sysihtml5, but this http://jhollingworth.github.io/bootstrap-wysihtml5/
I'd like to open my own dialog from a button in the toolbar and open a dialog of mine, which will use ajax etc. When the dialog closes I can return the HTML I'd like to insert. Is there a short guide somewhere explaining how to create a new command? I'm reading the source, but some tips would be appreciated.
row 1
row 2
row 3
becomes:
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.