basecamp / wysihat Goto Github PK

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.

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"});
});

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

<ul>
    <li>
        <label>Test</label>
        <textarea id="content"></textarea>
    </li>
</ul>

toggleUnorderedList() and toggleOrderedList() methods then end up interacting with the outer list elements.

Hi,
I added jQuery library and these error appeared in prototype.js file:

• Object [object Object] has no method 'attachEvent'
• Object [object Object] has no method 'dispatchEvent'

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.

Title says it all.

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.

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.

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

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.

When I create two instances of Wysihat in the same page, IE7 crashes. It works fine in firefox and chrome.

http://github.com/josh/wysihat is not relevant.

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

Google's Closure library has a nice range implementation. PID

This method seems to always return false in IE7. For expected behavior, do the following in Firefox or Safari:

1. Precondition: You have an "Insert Link" toolbar button to insert links via a JS prompt.
2. Insert a link into the editor.
3. Put your cursor anywhere in the link text, the "Insert Link" button should be highlighted indicating that you have a link selected.
4. If you click the "Insert Link" button at this point, the link will be un-linked since WYSIHAT detects that a link is already selected via that WysiHat.Commands#linkSelected method

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.

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!

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.

hey,

there' s a small nitpicky typo in the README. "run rake the root directory" should read "run rake in the root directory".

thanks.

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.

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?

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.

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?

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.

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.)

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?

The color helper methods are super nasty. This should be wrapped up in a Color class.

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.

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.

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:inrequire'
/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:inexecute'
/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:inexecute'
/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:insynchronize'
/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:ininvoke_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:insend'
/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:ininvoke_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:insynchronize'
/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:ininvoke_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:insend'
/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:ininvoke_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:insynchronize'
/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:ininvoke'
/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:intop_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:intop_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:intop_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:instandard_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:inload'
/opt/local/bin/rake:19

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:

My Text is bold in some parts

Wysihat doesn't recognize being inide a link when the cartes is inside the word bold.