2

デザイン中の Web ページに WYSIWYG エディターを組み込みたいと考えています。bootstrap-wysihtml5 に出くわしました。見た目からして、まさに私が求めているもの (シンプルでエレガント) です。例を見たかったのですが、設定方法を示す良い例はあまりありません。これまでのところ、私はこれを行ってきました：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Editor</title>
    <link rel="stylesheet" type="text/css" media="screen" href="bootstrap-wysihtml5.css"/>
    <script src = "bootstrap-wysihtml5.js" type = "text/javascript"></script>
    <script src = "wysihtml5-0.3.0.min.js" type = "text/javascript"></script>
    <script src = "bootstrap.min.js" type = "text/javascript"></script>
</head>
<body>
   <textarea class="textarea" id="ta1" placeholder="Enter text ..." style="width: 810px; height: 200px">
   </textarea>
   <script>$(".textarea").wysihtml5();</script>
<body>
</html>

Chrome コンソールのエラーは次のとおりです。

Uncaught TypeError: Cannot read property 'fn' of undefined             bootstrap-wysihtml5.js:368
Uncaught TypeError: undefined is not a function                        bootstrap.min.js:6
Uncaught TypeError: Object [object Object] has no method 'wysihtml5'   editor.html:14

これらのエラーを解決する方法がわかりません。どこが間違っていると思いますか?

ありがとう。

4

1 に答える 1

7

これを機能させるには、最初のスクリプト要素として jQuery を含める必要があります。

Bootstrap は jQuery に大きく依存しており、おそらく "wysihtml5" プラグインにも依存しているため、それらの前に jQuery を含める必要があります。

これは、エラー ログからも確認できます。

最初のヒントはfn次のとおりです。

Uncaught TypeError: Cannot read property 'fn' of undefined

fn基本的にはprototypejQueryの「ラッパー」であり、ブートストラップはその行のjQueryのプロトタイプに何かを追加しようとします。

2 番目のヒント:

Uncaught TypeError: Object [object Object] has no method 'wysihtml5'

$デフォルトでは Chrome のセレクター関数にバインドされているため、この場合は jQuery オブジェクトではなく、通常の HTML 要素を返します。wysihtml5 は、それ自体を jQuery プロトタイプにバインドする可能性が最も高いため、この方法で jQuery 要素で呼び出すことができます。ObjectjQuery が存在しないため、この場合は存在しない通常の関数を呼び出そうとします。

于 2013-04-18T10:46:05.097 に答える