7

「一般的な」WYSIWYG を Rails で動作させるのに問題があります。しばらくの間、RedCloth を使用して自分で作成する必要さえありました。

tinymce-railsを使おうとしましたが、うまくいきませんでした。nicEditも試してみましたが、これはオンライン ライブラリを呼び出した場合にのみ機能しました (また、放棄されたように見えます)。

jQuery と Rails 3.1 (Sprockets) に適した優れた WYSIWYG で作業した人はいますか?

4

6 に答える 6

13

Rails 3.1 アプリでckeditorを使用しています。

フォルダーを lib/assets/javascripts に入れるだけで、必要なときにいつでも次のように参照できます。

= javascript_include_tag "ckeditor/ckeditor.js"

そしてJavaScriptで：

:javascript
  $(function(){
    CKEDITOR.replace( 'input',
      {
        // Optional params:
        skin : 'office2003',
        height: '700px'
      });
  })
于 2011-09-11T08:24:33.210 に答える
8

かなり長い間この問題と格闘した後、Rails 3.1 とアセット パイプラインで標準の tinyMCE を使用するための解決策を思いつきました。

  1. tinyMCE jQuery パッケージから始めました。
  2. vendor に tinyMCE 用のディレクトリを作成します。/vendor/assets/javascripts/tiny_mce
  3. jquery.tinymce.jsの内側にのみ配置/vendor/assets/javascripts/tiny_mce
  4. 残りの tinyMCE ファイルを、/public/javascriptsフォルダ内のディレクトリに配置します。tiny_mce

  5. application.jsあなたのようにtinyMCEを追加してください：

    //=require jquery
...
//=require tiny_mce/jquery.tinymce.js

  6. application.js同様にtinyMCEを初期化し、script_urlパスを設定してtinyMCEにファイルをサポートしていることをpublic/javascripts/tiny_mceディレクトリに保存します：

    $('.tinymce').each(function(i){
$(this).tinymce({
  script_url : '/javascripts/tiny_mce/tiny_mce.js',
   ...

それはうまくいくはずです。これで、資産パイプラインを使用して tinyMCE をロードし、パブリック ディレクトリからサポート資産と JavaScript を提供しています。

于 2011-09-23T00:47:35.600 に答える
3

Mercury Editor は有望に見えます。次のRailsプロジェクトで試してみるつもりです。

http://jejacks0n.github.com/mercury/

于 2011-09-02T19:35:56.053 に答える
0

アロハエディター

http://aloha-editor.org/

それと Mercery の間では難しいですが、Aloha の方が「感触」が良く、ブラウザのサポート範囲が広くなっています。

于 2012-06-05T02:07:29.283 に答える
0

マークアップを試す

http://markitup.jaysalvat.com/home/

于 2011-09-11T02:20:04.120 に答える
0

Luuf はすでに Aloha-Editor について言及しました。まだ大規模な開発中ですが、非常に有望に見えます。

aloha-config.js ファイルをアセット パスの任意の場所に置くだけで、aloha-files は (つまり) vendor/assets に移動します。

構成例:

    (function(window, undefined) {
        if (window.Aloha === undefined || window.Aloha === null) {
        var Aloha = window.Aloha = {};
            }

    Aloha.settings = {
      logLevels: {'error': true, 'warn': true, 'info': true, 'debug': false,    'deprecated': true},
      baseUrl: "/assets/lib",
      errorhandling: false,
      plugins: false
    };
    })(window);

「baseUrl」行が最も重要です。/assets/lib に設定すると、アセット パイプラインとの互換性が確保されるようです。

連結はまだ試していませんが、どのように動作するかがわかったらコメントを投稿します。

よろしく！

于 2011-11-03T08:43:29.517 に答える