At.js with froala issue

At.js is a Javascript library for having Github like mentions in an app. The library is here. It’s a very good library and simple to use however when I tried it, it didn’t work out of the box for froala editor. The problem is At.js surrounds the range with spans and since WebKit browsers insert spans, the editor accepts spans only if


is set to true. So to counter this, when initiating the function, a small tweak is required.

at: “@”,
editableAtwhoQueryAttrs: {“data-fr-verified”: true},

data:[‘Peter’, ‘Tom’, ‘Anne’]

This should get it working as it did for me.


Reference: Github issue


Hope  it helps

What are sprockets ?

I was looking at the new rails 3.1 release and I frequently came across the term sprockets

This is what it means:

Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation. Specially formatted lines act as directives to the Sprockets preprocessor, telling it to require the contents of another file or library first or to provide a set of asset files (such as images or stylesheets) to the document root. Sprockets attempts to fulfill required dependencies by searching a set of directories called the load path.

It helps you turn messy JavaScript into clean modules for development and a single .js file for deployment.

Here are some of the benefits of Sprockets:

Extract reusable code and share it across multiple web sites or applications. Sprockets makes it easy to extract JavaScript plugins from your site or application and share them across your portfolio. Use your SCM to check out plugin repositories directly into your site or application. Then tell Sprockets to add the plugins to your load path. Support for asset provisioning lets you bundle CSS and images with JavaScript plugins, too.

Speed up your site by automatically concatenating JavaScript into a single file for production. Concatenating your site’s JavaScript means all your source code is cached in the browser on the first hit. It also means you reduce the number of HTTP requests necessary to load a single page. When combined with gzip compression on the web server, concatenation is the fastest way to serve JavaScript to your users.

Organize your JavaScript source code into multiple commented files and directories. Finally, an end to navigating long, difficult-to-maintain JavaScript source files. With Sprockets, JavaScript source code can live anywhere on your system, even outside your site’s or application’s document root. You’re free to split source code up into multiple files and organize those files into directories during development. You can also add as many comments as you want—they’ll be stripped from the resulting output.

Use bleeding-edge framework and library code in your application. If you use and contribute to open-source JavaScript frameworks and libraries that use Sprockets, like Prototype and, the build processes for those scripts can be integrated directly into your application. That makes it possible to track the latest development versions of your framework and library dependencies by adding their repositories to your application’s Sprockets load path.

Sprockets is compatible with the PDoc JavaScript documentation system and the JavaScript framework of your choice. If you document your JavaScript source code with PDoc, Sprockets will automatically strip documentation comments from the resulting concatenated output. You can use any JavaScript framework you like in your site or application—Sprockets is framework-agnostic.