basecamp / wysihat Goto Github PK
View Code? Open in Web Editor NEWA WYSIWYG JavaScript framework
Home Page: http://github.com/josh/wysihat/
License: MIT License
A WYSIWYG JavaScript framework
Home Page: http://github.com/josh/wysihat/
License: MIT License
Hi,
On IE8, in formatHTMLOutput method, Element("body") return document.body (body of parent window) instead of a new body element. I had some "DispHtmlSelectElement" in my document.body and it made crash my IE...
To fix this, add "new" before: new Element("body").
Do the same for formatHTMLInput func ;-)
Had a big headache to find out how to resolve this bug... =)
Guillaume
FYI, your list example references editor.toggleUnorderedList();
, but editor.insertUnorderedList();
is the right call. Ditto with ordered lists.
https://github.com/josh/wysihat/blob/master/examples/list.html#L44
http://github.com/josh/wysihat is not relevant.
It seems that when I try to select(click) an inserted image into the WysiHat Editor, it will not allow me to scale the image in Safari 4. However, this does work with Firefox. I am basically not even able to select the image in Safari 4. So the only way to reduce the image's size is by opening the HTML editor and manually adding the width/height attributes to the "img" tag.
<ul>
<li>
<label>Test</label>
<textarea id="content"></textarea>
</li>
</ul>
toggleUnorderedList()
and toggleOrderedList()
methods then end up interacting with the outer list elements.
hey,
there' s a small nitpicky typo in the README. "run rake the root directory" should read "run rake in the root directory".
thanks.
Hi,
I added jQuery library and these error appeared in prototype.js file:
The color helper methods are super nasty. This should be wrapped up in a Color class.
I have JS debugging turned on in IE for other reasons and the WYSIHAT editor is unusable when the browser is configured like this.
There is constant popups about an error whenever the editor has focus.
The error is from the method WysiHat.Commands#queryCommandState on this line:
return document.queryCommandState(state);
If you, for instance, create a link, and after that make part of the link bold, so the markup looks like this:
Wysihat doesn't recognize being inide a link when the cartes is inside the word bold.
Hi all,
Do any of you plan on removing the prototype dependency? If not, that may be something I'll look into if I can't find a similar library.
If you use ctrl+a in the contenteditable div and then select bold, the style is applied to the contententeditble div.
Other browsers wrap around the selection and then apply the style.
After 'rake' ! get warning:
WARNING: 'require 'rake/rdoctask'' is deprecated. Please use 'require 'rdoc/task' (in RDoc 2.4.2+)' instead.
But .js was generated fine.
I change:
git diff
diff --git a/Rakefile b/Rakefile
index 2258128..63baf0c 100644
--- a/Rakefile
+++ b/Rakefile
@@ -1,6 +1,6 @@
require 'rake'
require 'rake/testtask'
-require 'rake/rdoctask'
+require 'rake/task'WYSIHAT_ROOT = File.expand_path(File.dirname(FILE))
WYSIHAT_SRC_DIR = File.join(WYSIHAT_ROOT, 'src')
And no warning. And still .js was generated fine.
I downloaded both the ZIP and TAR files and both are missing /vendor/sprockets/lib/sprockets, thus rake will not build the artifacts. (I suppose this could be some kind of rake issue on Mac Tiger... I installed the latest rake using ports just in order to do this build though.)
cue:~/src/37signals-wysihat-7c8fb7d5efcd33128aa25eed61df62b321110f39 rachel$ rake --trace
(in /Users/rachel/src/37signals-wysihat-7c8fb7d5efcd33128aa25eed61df62b321110f39)
** Invoke default (first_time)
** Invoke dist (first_time)
** Invoke sprocketize:prototype (first_time)
** Invoke update_submodules (first_time)
** Execute update_submodules
** Invoke sprocketize:dist_dir (first_time)
** Execute sprocketize:dist_dir
** Execute sprocketize:prototype
rake aborted!
no such file to load -- /Users/rachel/src/37signals-wysihat-7c8fb7d5efcd33128aa25eed61df62b321110f39/vendor/sprockets/lib/sprockets
/opt/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:27:in gem_original_require' /opt/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:27:in
require'
/Users/rachel/src/37signals-wysihat-7c8fb7d5efcd33128aa25eed61df62b321110f39/rakefile:53
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:546:in call' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:546:in
execute'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:541:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:541:in
execute'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:508:in invoke_with_call_chain' /opt/local/lib/ruby/1.8/thread.rb:135:in
synchronize'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:501:in invoke_with_call_chain' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:518:in
invoke_prerequisites'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in
send'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:515:in
invoke_prerequisites'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:507:in invoke_with_call_chain' /opt/local/lib/ruby/1.8/thread.rb:135:in
synchronize'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:501:in invoke_with_call_chain' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:518:in
invoke_prerequisites'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in
send'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1183:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:515:in
invoke_prerequisites'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:507:in invoke_with_call_chain' /opt/local/lib/ruby/1.8/thread.rb:135:in
synchronize'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:501:in invoke_with_call_chain' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:494:in
invoke'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1931:in invoke_task' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1909:in
top_level'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1909:in each' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1909:in
top_level'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1948:in standard_exception_handling' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1903:in
top_level'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1881:in run' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1948:in
standard_exception_handling'
/opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/lib/rake.rb:1878:in run' /opt/local/lib/ruby/gems/1.8/gems/rake-0.8.1/bin/rake:31 /opt/local/bin/rake:19:in
load'
/opt/local/bin/rake:19
Hi, thanks for this work !
I'm having an issue when i try creating a link on my iphone ( /exemples/link_selection.html) :
The text selected is unselected and the prompt not shows up
Thanks in advance,
François.
This method seems to always return false in IE7. For expected behavior, do the following in Firefox or Safari:
Repeat the same steps in IE7 and you will never see the "Insert Link" button highlighted, nor will you be able to un-link an inserted link.
I can provide a test page demoing this functionality if needed.
Hi Josh,
I don't think sanitizing is working as expected; when you added tagsToSkip, you don't properly check to see whether the current node matches.
see my comment here:
https://github.com/josh/wysihat/commit/332a2721b25ac1ca466da93ffdd731eaad5bdfa8#diff-1
I would like to fix this, but I'm not sure how you envisioned it working... in the tests you're trying to skip "[_moz_dirty]" (you do the same in Basecamp), but you'd need entirely new code to process a string like "[_moz_dirty]" and turn it into something you could check a node against to see whether to skip it.
I'm not sure why you need to skip the moz-dirty elements, either, so I'm not sure if I need to add the fix myself or not?
Could you tell me how to change the editor's text color on focus? Event.observe
isn't happy, because the selector returns null
.
This seems to be closest.. is it?
editor.focus(function() {
editor.setStyle({color: "#000"});
});
Hi guys,
This has been driving me nuts for a while and my lack of javascript knowledge isn't helping me I'm sure.
I'm able to get wysihat to function correctly (I copied most of the code from the example simple.html to tie with my textarea id of 'post-description' and it works great). However, when I go to save the entry, rails kicks back a validation error saying that the description is empty.
So somehow wysihat's div isn't "copying" the text entered into the actual 'post-description' textarea field. I've looked into the documentation and I MAY need to add some extra javascript, but I have no clue where to begin.
Before others suggest wysihat-engine, I tried it and it's good but it's overkill for what I need. All I need is the bold, underline, and unordered stylings. No attachments, links, etc.
Any help is GREATLY appreciated (this is the second to last thing I need before I launch my personal project!)
Thanks!
-Tony
I am trying to implement a "no color" button that will remove any color styling. It appears that wysihat can only modify a selection's color by applying a new color. Looking through what contentEditable docs I can find, I don't see any built in way to remove all color formatting, so this may be a lot of work.
When I create two instances of Wysihat in the same page, IE7 crashes. It works fine in firefox and chrome.
Hi Josh, just wondering if it's possible to prevent wysihat from making an iframe and instead just turning on contentEditable on the object passed?
Google's Closure library has a nice range implementation. PID
Given the following text that is preloaded into a wysihat editor:
<h2>Hello there</h2>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Once you save this content you will end up with the following:
<h2>Hello there</h2><br />
This is a test
<ul><br />
<li>item 1</li><br />
<li>item 2</li><br />
</ul>
Note the p tag wrapping the first paragraph has been stripped, but more importantly is the excessive insertion of HTML breaks after each line. There is no reason for the break, since a closing tag for a heading or a list item already has this effect. The end result is excessive whitespace without any user interaction.
In browsers, you can usually use the up/down arrow keys (or the spacebar) to scroll the page if it's too long to fit everything in the visible window. In Firefox, when wysihat is on the page, those keys don't work.
You can see this in action by opening "examples/simple.html" in Firefox and Safari at the same time. If you make the window very small in Safari and press the up/down arrow keys, you'll see it scroll the window. The same doesn't happen in Firefox, even though it normally does (if you visit, say http://github.com, you can see it working.)
Title says it all.
In Firefox, editor.selection.getRange().startOffset breaks down if the cursor moves past character 4095 in a long paragraph. It looks like some kind of integer overflow: startOffset wraps around to 0. That said, that would be a 12 bit unsigned integer which is odd.
I created a functional test case demonstrating the problem:
http://github.com/aljungberg/wysihat/commit/b3160afd952ad927e66617ecb842071a752d8e80
Tested in Safari 4.0.4, Opera 10.10, Chrome 4.0.249.30 and Firefox 3.5.5 on the Mac. The test passes in all browsers except Firefox.
Adding the following lines to the editor.css let the editor go crazy
.editor i {
font-style: normal;
color: #B33333;
}
The 'i' tag is no longer removed when you click the button, it just keeps adding and adding 'i' tags.
I have a very basic rich text editor constructed as follows:
Event.observe(window, 'load', function() {
window.wysihat_editor = WysiHat.Editor.attach('appointment_description');
var toolbar = new WysiHat.Toolbar(window.wysihat_editor);
["bold","italic","InsertOrderedList","InsertUnorderedList"].each(function(item) {
toolbar.addButton({name: item});
});
});
The submit button for my form looks like this:
<%= f.submit submit_text, :onclick => "this.disabled = true; window.wysihat_editor.save(); this.form.submit();" %>
When I try to save a piece of content with overlapping strong and em tags, Firefox 3.5.3 hangs. This works fine on Safari 4.0.3. I'd be happy with just about any outcome other than the current one: whether wysihat simply bails on malformed XHTML, or anything else is preferable to the browser hanging.
Known issue? Any known workaround? thx!
While Im editing text and in Preview it shows just fine. When I publish the article and visite the show.html.erb file, all html tags are displayed as text having no effect at all.
Howdy,
I'm trying to get the current cursor postion, and possibly enter content at it's location. wysihat:cursormove hints at functionality like this, but the event trigger doesn't seem to be in the wysihat source anymore.
Hi. I ran into some problems today, trying to use the wysihat for editing html pages (stored in a database). Editing the html, some tags are kept but some are removed. For instance object tag for quicktime and form tag for paypal forms are somehow removed when saving to the database (using rails and wysihat-engine).
Any ideas? Possibly how to disable this sanitizing?
var editor = WysiHat.Editor.attach('content');
var editor1 = WysiHat.Editor.attach('content1');
<textarea id="content" name='content'></textarea>
<textarea id="content1" name='content1'></textarea>
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.