EzDevInfo.com

wysihat

A WYSIWYG JavaScript framework

How can you catch a contentEditable paste event?

I've got a great editable text area going with wysihat and contentEditable. I really need a way to intercept paste events to either stop them, or process their DOM before allowing insertion. It's a little crazy they people can paste entire webpages into the editable areas.

Is this possible?

Come on future, arrive on my doorstep. HTML5 gurus, fire!


Source: (StackOverflow)

WYSIHAT and rails 3

Does anyone have any advice on how to go about installing WYSIHAT in a Rails 3 app?

There's a lot of good information about getting it to work with Rails 2, there's an engine, and some decent blog posts but they're all slightly dated

Also, I would prefer to use JQuery (or MooTools) over Prototype. Am I better off sticking with jQuery WYSIWIG? I really just need to be able to add simple text formatting and hotlink images


Source: (StackOverflow)

Advertisements

Wysihat without Rake, just Javascript?

Is there a way to install and use Wysihat without running Rake? I naively tried copying source javascript-files from online examples of Wysihat, but I get the warning that I should "run Rake in the project root".

Second, I tried to get Rake (whatever it may be). But nowhere I found a decent article on how to get it up and running, let alone how to use it. I see words like 'git', 'gem' and 'command line' (at least know what that is) all over the place, but I don't know where to start.

Taken in account the problems from above, I could have asked another question instead: how to install and use Rake? But my main problem is: I want to get Wysihat to work, with or without Rake.

Thanks in advance for your reply!

Yes, I understand that I miss a certain understanding about Rake (or other build-stuff). It is there with a reason, probably. I'm a PHP-developer and never needed to use Rake.


Source: (StackOverflow)

to return the value of iframe inside the body using jquery

I'm using the wysihat-engine on my jsp. It works well, but when I tried to add a preview feature that is suppose to read from the on-fly created iFrame and put it's value inside the hidden preview div, it couldn't read the iframe's included html. Any work-around for this? Thanks! In this example i want to return the value inside the body using jquery

the following iFrame is not written inside my jsp, but it is attached to a div by WYSihat.js file:

<iframe id="iframeId" class="abc">
   <html>
      <head></head>
      <body>
        <br>
        some text here 
        </br>
    </body>
  </html>
</iframe>

How to return "some text here" and pass it to the following function: Hint, this iFrame has been created on fly by the WYSiHat.js file, as it is not hard written inside my jsp page

function preview() {
    alert("hi"+$('iframe.editor').contents().find('body').text());
}

Source: (StackOverflow)

WYSIHAT 'resonds_to_parent" undefined method - Ruby on Rails

I just successfully installed WysiHat in my rails blog. Seems that the 'add a picture' feature is not working. It successfully allows me to find and select a picture from my desktop but upon clicking save, it does nothing.

I also have Paperclip successfully installed and can attach images to records outside the WYSIHAT form field.

Any ideas? (let me know if I need to post any code).

Also, WysiHat-engine uses facebox, not sure if that is relevant.

UPDATE: Added Server Log, looks like paperclip is saving it so not sure what else is going wrong.

Processing PostsController#update (for 127.0.0.1 at 2010-04-23 16:42:14) [PUT]
  Parameters: {"commit"=>"Update", "post"=>{"body"=>"<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>", "title"=>"Rails Code for Search"}, "authenticity_token"=>"hndm6pxaPLfgnSMFAmLDGNo86mZG3XnlfJoNOI/P+O8=", "id"=>"105"}
  Post Load (0.2ms)   SELECT * FROM "posts" WHERE ("posts"."id" = 105) 
  Post Update (0.3ms)   UPDATE "posts" SET "updated_at" = '2010-04-23 21:42:14', "body" = '<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>' WHERE "id" = 105
[paperclip] Saving attachments.
Redirected to http://localhost:3000/posts/105
Completed in 12ms (DB: 0) | 302 Found [http://localhost/posts/105]

UPDATE 2 I installed ImageMagic and now I get the following error.

Processing WysihatFilesController#index (for 127.0.0.1 at 2010-04-23 23:27:57) [GET]
  Parameters: {"editor"=>"post_body_editor"}
  WysihatFile Load (0.3ms)   SELECT * FROM "wysihat_files" 
Rendering wysihat_files/index
Rendered wysihat_files/_form (1.9ms)
Completed in 4ms (View: 3, DB: 0) | 200 OK [http://localhost/wysihat_files/?editor=post_body_editor]


Processing WysihatFilesController#create (for 127.0.0.1 at 2010-04-23 23:28:09) [POST]
  Parameters: {"commit"=>"Save changes", "wysihat_file"=>{"file"=>#<File:/var/folders/F3/F3ovLEb1EMW4aZ5nsRvRlU+++TI/-Tmp-/RackMultipart20100423-43326-1mzeb3s-0>}, "authenticity_token"=>"IHF9Ghz6gYuAeNOUYhna+O0A4WrDbm4iha4Tsavu97o="}

NoMethodError (undefined method `responds_to_parent' for #<WysihatFilesController:0x10352a2c0>):
  vendor/gems/wysihat-engine-0.1.12/app/controllers/wysihat_files_controller.rb:10:in `create'

Rendered rescues/_trace (25.2ms)
Rendered rescues/_request_and_response (0.3ms)
Rendering rescues/layout (internal_server_error)

Update 3 After reading a comment below I am thinking that perhaps I am missing something in my Post model. Here is the code for the model.

class Post < ActiveRecord::Base

  has_attached_file :photo
  validates_presence_of :body, :title
  has_many :comments, :dependent => :destroy
  has_many :tags, :dependent => :destroy
  has_many :ugtags, :dependent => :destroy
  has_many :votes, :dependent => :destroy
  belongs_to :user
  after_create :self_vote
      def self_vote
       # I am assuming you have a user_id field in `posts` and `votes` table.
       self.votes.create(:user => self.user)
      end

  cattr_reader :per_page 
    @@per_page = 10

end

Source: (StackOverflow)

WYSiHat editing issue

I am currently using WYSiHat rich text editor on my java spring project. It works very well, but once I try to edit a pre-made message, the HTML is normally retrieved inside the iFrame, but I can't delete anything out of it unless I add anything inside the message like a space or something. Any suggestions?


Source: (StackOverflow)

is WYSiHat some how based on YUI

I have a simple question. IS WYSiHat WYSIWYG rich text editor some how based on YUI? As far as I understand it is not, but some how the way it is coded is very similar to YUI. Thanks


Source: (StackOverflow)

`next_migration_number': NotImplementedError (NotImplementedError) using wysihat-engine in rails

I am using following gem for editor.

gem "wysihat-engine", "~> 0.1.13"

When I run 'rails generate wysihat' it's generate all image file, but can't generate migration and giving following error

c:/Ruby193/lib/ruby/gems/1.9.1/gems/railties-3.2.3/lib/rails/generators/migration.rb:30:in `next_migration_number': NotImplementedError (NotImplementedError)
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/railties-3.2.3/lib/rails/generators/migration.rb:49:in `migration_template'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/wysihat-engine-0.1.13/lib/generators/wysihat_generator.rb:60:in `install_wysihat'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/task.rb:22:in `run'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:118:in `invoke_task'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `block in invoke_all'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `each'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `map'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `invoke_all'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/group.rb:226:in `dispatch'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/base.rb:389:in `start'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/railties-3.2.3/lib/rails/generators.rb:170:in `invoke'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/railties-3.2.3/lib/rails/commands/generate.rb:12:in `<top (required)>'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/activesupport-3.2.3/lib/active_support/dependencies.rb:251:in `require'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/activesupport-3.2.3/lib/active_support/dependencies.rb:251:in `block in require'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/activesupport-3.2.3/lib/active_support/dependencies.rb:236:in `load_dependency'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/activesupport-3.2.3/lib/active_support/dependencies.rb:251:in `require'
    from c:/Ruby193/lib/ruby/gems/1.9.1/gems/railties-3.2.3/lib/rails/commands.rb:29:in `<top (required)>'
    from script/rails:6:in `require'
    from script/rails:6:in `<main>'

Thanks for any help!


Source: (StackOverflow)

Need help getting Wysihat to work

I'm using Wysihat in a rails project and am stumped by its inability to bind to my textarea named post_description (model name Post field name description).

I have the following in my head tag:

    <%= javascript_include_tag 'prototype_1.7'%>
    <%= javascript_include_tag 'wysihat' %>

    <script type="text/javascript" charset="utf-8">
    document.on("dom:loaded", function() {
      var editor = WysiHat.Editor.attach('post_description');
      var toolbar = new WysiHat.Toolbar(editor);
      toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);

      // Hide our error message if the editor loads fine
      $('error').hide();
    });
  </script>

I'm able to see Wysihat works (the bold, italic, and underline tools are shown and when click works as intended). The following in the source of the posts/new HTML:

<div id="post_description_editor" class="editor" contenteditable="true"></div>
<textarea cols="40" id="post_description" name="post[description]" rows="20" style="display: none; "></textarea>

However, when I type something in the description field and click submit the post validation fails saying the description field is empty. Anyone have any clue on how I can get this to work?

Thanks in advance!


Source: (StackOverflow)

Wysihat jQuery fork can't add text to textarea

I use https://github.com/swilliams/jq-wysihat jQuery Wysihat fork. I ran rake to get the source code built, then copied the dist/jq-wysihat.js and editor.css over to my Rails library. It shows the Wysihat editor, and I can see that the textarea is hidden.

  1. By right, whenever I type anything to the Wysihat, I should get the same text in the hidden textarea (seen using Firebug). This is the correct implementation I saw in 37signals Basecamp project. But, I don't see the textarea get filled with anything that I typed in the editor. What have I done wrong?

  2. In the editing mode in my Rails app, how can I place the existing text into the Wysihat editor box?

Thanks.


Source: (StackOverflow)

Javascript problems in IE - object expected?

I'm using a jQuery fork of Wysihat as a Wysiwig editor in a project of mine. It works perfectly in all browsers apart from (surprise, surprise) IE (specifically IE8). I've got the example files uploaded here:

http://pezholio.co.uk/wysihat/examples/custom_buttons.html

When running the file in IE, I get the error Object expected, and it seems to be occurring within this function:

window.getSelection = (function() {
  var selection = new Selection(document);
  return function() { return selection; };
})();

Any ideas what may be causing the problem, and what I can do to fix it?

Cheers


Source: (StackOverflow)