web-dev-qa-db-ja.com

サマーノートで表示されないアイコンrails

enter image description here

私は Summernote-Rails 公式に従って、Railsプロジェクトにリッチテキストエディターを追加しました。

次に、edit.html.erbで、クラスplace_editorをtext_areaに追加しました。

<%= f.text_area :text, class: "place_editor form-control col-md-7 col-xs-12", rows: "15j ,placeholder: "Text", required: "required"%>

次にJavaScriptとして：

<script type="text/javascript">
 $(function() {
      $('.place_editor').summernote();
      var edit = function () {
        $('.click2edit').summernote({ focus: true });
      };
      $("#edit").click(function () {
        $('.click2edit').summernote({ focus: true });
      });
      $("#save").click(function () {
        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
        $('.click2edit').destroy();
      });
      // Adding Css to give border to text editor
      $(".note-editor").css("border", "solid 1px #e7eaec");

    });
</script>

アイコン以外はすべて正常に動作します。

javascriptcssruby-on-railstwitter-bootstrap-3summernote
10
Muhammad Faisal Iqbal

私は時間を検索し、最終的にそれを解決しました。実際、summernoteはアイコンをローカルに保存せず、代わりにダウンロードします

このリンクをヘッダーに追加しました

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">

そして、誰かがそれをさらに詳しく説明することができれば、私は歓迎する仕事をしました

6
Muhammad Faisal Iqbal

簡単です

ダウンロードするだけです summernote compile Zip fileここをクリックしてください 。

ファイルを解凍します。 fontフォルダをコピーします。 summernote.cssルートに貼り付けます。 summernote.cssファイルがfontフォルダーにあることを確認してください。次に、を使用してブラウザを更新します Ctrl + F5。

フォルダの場所のデモ： enter image description here

デモ出力： enter image description here

9
Obaidul Haque

回答はすでに受け付けていますが、それでも問題の解決策を探している人々のために、より良い回答を投稿したいと思います。

もちろん、これは機能します。

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">

しかし、私はアセットをローカルに保存することを好みます。埋め込まれたページの読み込み時間に影響を与えるCDNの必要性を排除します。

デフォルトでは、「summernote」はディレクトリ/css/font/でfont-awesomeアイコン（およびその他のsummernoteフォント）を検索します。

//=================== The style-sheets stacking 
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/summernote.css">

//=================== The font goes here 
 /css/font/

だからあなたがする必要があるのは：

  1. ダウンロード fontawesome 、
  2. ダウンロードしたアーカイブからfontsフォルダーを取り出し、名前をfontに変更します。
  3. プロジェクトのcssディレクトリ内にディレクトリfontを配置します。

そして、これはうまくいくはずです。

あなたの資産がこのように利用可能であることを考えるとhttp://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

これがお役に立てば幸いです。

ありがとう

4
Siddhartha Chowdhury

フォントファイルをインポートすると、機能します。 CSS @ font-faceルールでインポートしてみました。 javascriptでインポートすることもできます。

@font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
      url('/fonts/summernote.woff');
}
3
VENKATESAN RAMACHANDRAN

Summernoteディストリビューションのダウンロードを解凍した後、Fontフォルダーをsummernote.cssファイルを置いたのと同じ場所にコピーする必要があります。

この例では、ElmerはWebサイトのルートフォルダーであり、summernote.cssとFontの両方です。 フォルダが/assets/cssフォルダにコピーされます。

enter image description here

同様に、summernote.jsファイルは/assets/jsフォルダーにコピーされます。プラグインや言語を使用していない場合は、インストールする必要があるのはそれだけです。

次に示すように、これらのファイルをロードするためにヘッダーに配置するコードは次のとおりです。

<!-- include summernote css/js-->
<link rel="stylesheet" type="text/css"  charset="utf-8" href="/assets/css/summernote.css">
<script type="text/javascript" charset="utf-8" src="/assets/js/summernote.js"></script>

注：charset="utf-8"属性を含めることは重要です。

2
ElmerCat

私は同じ問題を見つけました。解決策は、summernoteconfigから「toolbar」キーを削除することでした。

$(".summernote").summernote({
    lang: 'hu-HU',
    height: 300,
    minHeight: null,
    maxHeight: null,
    toolbar: [
        ['font', ['roboto',]],
    ]
});

バージョン：summernotev.0.8.12。

0
Attila Horváth

MVCのアイコンに問題がある可能性がある人にとっては、summernoteがベースフォルダー（私の場合はContent）を調べ、フォントフォルダーをそこに入れる必要があるように見えます。これが私のプロジェクトのレイアウトのスクリーンショットです：

MVC project layout for summernote icons.

何らかの理由で、summernoteは、summernote-lite.cssがある場所ではなく、Contentの/ summernote/font /フォルダーを検索します。

お役に立てれば！

0
Alec Zorn

プロジェクトにfont-awesomeが含まれていますか？プラグインはfont-awesomeを使用していると思います。そうでない場合は、これをスクリプトタグのsrcとしてapplication.html.erbファイルに含めてみてください： https://www.bootstrapcdn.com/fontawesome/

これも読んでください： https://github.com/summernote/summernote/issues/505

0
toddmetheny

プロジェクトcssのフォントフォルダをコピーします。

     just like YourProject/css/font

それはうまくいくはずです。それは私のプロジェクトで動作します。

0
Arman H