問題タブ [froala]

自分のアセット パイプライン (アマチュア アワー) に関して何が間違っているのかよくわかりません。

私は Froala エディター (rails gem) を使用しています。wysiwyg エディターでレンダリングしたいページにアクセスすると、スパゲッティがページ上に落ちてきます。(JSは適用されていません。)

init Foundation の呼び出しの横に関数を実装することで、レールのターボリンクの問題を説明しようとしましたon page:loadが、明らかに機能しません。

これが私の現在のセットアップです。

application.js:

フォーム自体は次のとおりです。

新規ページと編集ページで行っていることは次のとおりです。

また、私のfroala_editor.min.js両方の方法を無駄に含めようとしました。私は一体何を間違っているのですか？

編集：

Railsログまたは開発コンソールにエラーや何もありません。

また、ページを更新すると、js が機能し、「スパゲッティ」ではなくなりました。最初のページの読み込みではありません。

2つ編集します（@thedanottoによると、「一般」は私のその他のスクリプトがある場所です）：

次のように更新されましたが、まだ運がありません。ページの更新でも引き続き機能します。

私は Web 開発の初心者であり、これがここでの最初の質問でもあるので、十分に正確であることを願っています。私が達成しようとしているのは、Webページにテキストエディターを配置することです。もちろん、テキストを挿入および編集できますが、マウスとキーボードのイベントで編集してすべてのhtmlコンテンツを保存できる空白のギタータブ譜を挿入することもできますコレクション (ギターノートシートの作成と保存など)。

テキストは既に機能しており、コレクションにコンテンツを保存したり、エディター内でコレクションのコンテンツを表示したりできますが、ギター タブの挿入に問題があります。

次のパッケージで Meteor を使用しています。

空のタブを簡単に描画してそのコンテンツにアクセスできるので（私がやりたい編集のために）、ギターのタブにkineticjsを使用したいと思います。

テスト目的で、2 つのレイヤー (ギターのタブ行用とテキスト用) を持つ新しいキネティック ステージを静的に空の HTML ページに追加し始めたところ、正常に動作しました。ここにフィドルがあります：

https://jsfiddle.net/dsrbhayd/

しかし、エディター内のカスタム ボタンを介してキネティック div を挿入することにより、froala エディターの「insertHTML」機能と組み合わせてキネティックを使用したい場合、次の問題があります。 、しかし数秒後、両方のレイヤーのコンテンツ（var "text"と水平線、フィドルを参照）が消えます。キネティック div を挿入した直後に、キーボードで何かを入力してテキストを挿入すると、コンテンツがすぐに消えてしまいます。froala エディター内の HTML コードを表示するように切り替えると (ツールバーの [HTML を表示] ボタンを使用)、挿入されたキネティック div 要素とキャンバス要素は引き続き表示されますが、レイヤーのコンテンツは「なくなった」ようです。 . エディターの問題に関する別のフィドルを次に示します。

https://jsfiddle.net/un8sbrzd/

私は何日もそれに取り組みましたが、私はそれを得ることができません。froala エディターのオプションのいくつかを変更しようとしましたが (フィドルのコメントで述べたように)、うまくいきませんでした。

エディターのリフレッシュの問題のようなものですか？HTMLエディター内でキネティックを使用した経験のある人はいますか?

誰かが私を助けることができれば素晴らしいことです。ご挨拶

インライン エディターを破棄すると、最新バージョンの froala エディター (v2) を使用しても機能しないようです。この要素はエディター要素に残します: <i class="fa fa-code"></i>. インラインのサンプル サイトにアクセスすると、この動作を確認できます: https://www.froala.com/wysiwyg-editor/v2.0/docs/examples/inline

そして、開発者コンソールに次のように入力します: $('div#froala-editor').froalaEditor('destroy');

誰もこれを修復する方法を知っていますか? また、ドキュメントには、destroy コマンドがエディター全体を削除し、要素を初期化前の状態に戻すと記載されていても、エディター ラッパーをエディター コンテナー内に残し、エディター クラスを保持します。

どうもありがとうございました！

Froala エディターを React コンポーネントに取り込もうとしていますが、'html.set' または 'snapshot.restore' メソッドを使用してエディターのコンテンツを更新した後、キャレットの位置を保持するのに苦労しています。

目標は、(Flux ストアを使用して) React の状態で Froala のエディター コンテンツを維持することです。

HTML の取得 (およびその後の Flux ストアへの保存) は、次の場合には問題になりません。

var content = $('#editor').froalaEditor('html.get', true);

ただし、状態を Froala にフラッシュしようとすると、次のようになります。

$('#editor').froalaEditor('html.set', this.state.content);

新しい HTML は問題なく更新されますが、キャレットの点滅は止まります。エディタにはまだフォーカスがありますが、入力された新しいテキストは<p> </p>タグ コンテンツの外に挿入されます。これにより、キャレットが最後の位置から効果的に上に移動します。

または、以下を使用してスナップショットを作成および復元します。

var snap = $('#editor').froalaEditor('snapshot.get'); $('#editor').froalaEditor('snapshot.restore', snap);

キャレットをエディターの左上の位置に移動します。

HTML が設定された (またはスナップショップが復元された) 後、キャレットの位置を取得してその位置に再度フォーカスする方法はありますか?

これは Froala 2.0.0-rc2 を使用していますが、最新の 1.x リリースにも同じ動作が存在します。

ページ番号を定義するために行をカウントする方法はありますか? 誰かがこのエディターにページ番号を追加しましたか?

これを使用してイベントをキャプチャしますが、行を計算する方法がわかりません

$('#edit').on('editable.contentChanged', 関数 (e, エディター {}

アップロードした画像に新しい属性を追加しようとしています。この属性には、サーバー側でそのリソースを破棄するためにイベントafterRemoveImageによって使用されるその画像の削除 URL が含まれます。

afterImageUploadイベントを使用してみましたが、作成したイメージ タグが見つかりません。

どのイベントを使用するのが適切でしょうか?

ありがとう。

Froala エディターを使用していますが、2 番目のバージョンに移行するまで問題なく動作していました。動画プラグインを使用して YouTube やあらゆる種類の動画を挿入するたびに、ページ全体がリロードされ、すべてが失われます。ページのリロードを防ぐ方法があるかどうか疑問に思っていました。

私は froala のドキュメントに従い、メトロニックを使用して現在のレイアウトと混ぜ合わせます。

これが私のcssオーダーです。

これが私のJS注文です

そして、私はUncaught TypeError: undefined is not a functionすぐに$('textarea#content').editable({inlineMode: false});

$('textarea#content').editable({inlineMode: false});しかし、コメント欄にエラーはありません。

どうすれば修正できますか？