0

TinyMCE エディターのタイトルのラベルを作成しました。このラベルを移動不可、編集不可にして、テキストエリア内の一番上に残して、スクロールバーが表示された場合にスクロールバーと一緒に流れるようにしたいと思います。つまり、テキストエリアがいっぱいになって誰かが書いていると、最終的にはラベルが見えなくなりますが、上にスクロールするとラベルが見えます。

言い換えれば、これは私が欲しいものです：

tinyMCE

私はいくつかのことを試しました：

  1. 代わりに、ラベルをテキストエリアの上 (および外側) に配置します。スクロール バーには、表示されたときにラベルは含まれません。

  2. ＃1と同じですが、テキストエリアからスクロールバーを削除し、いっぱいになるとテキストエリアが大きくなり、外側のdivにスクロールバーが表示されるようにします.JavaScriptは非常に醜く、ブラウザによって動作が異なります. 入力時にテキストエリアの下部が表示されないという問題が発生します。

  3. div をテキストエリアに直接挿入しようとするすべての試み: div を編集不可にしても、ユーザーはバックスペースを数回押すことで div 全体を消去できます。JavaScript を作成して、まだそこにあるかどうかを確認して元に戻すことができますが、カーソルを元の位置に戻すときに問題が発生します。また、パディングとその配置で奇妙なことをしなければなりません。

  4. テキストエリアの外側に配置しますが、テキストエリアのパディングの内側に配置します:テキストエリアがいっぱいになったときや下にスクロールしたいときにタイトルが残ります (残ってはいけません)。div の高さが大きくなる場合があるため、パディングも再調整する必要があります。

私はここですべてを試しましたが、私がやりたいことをすることは不可能だと感じています. どんな助けでも大歓迎です。

4

1 に答える 1

0

トリックは、代わりに div をスクロール可能にすることです。設計上、テキストにフォーカスするまでツールバーは表示されません。私はあなたにそれを理解させます。

<html>
<head><!-- CDN hosted by Cachefly -->
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
  tinymce.init({selector:'div#editme', theme: 'modern', fixed_toolbar_container: 'div#tbar', inline: true});
</script>
</head>
<body>
<div id="mcewrapper">
  <div id="tbar" style="height: 60px; width: 100px;"></div>
  <div id="" style="overflow: scroll; height: 400px;">
  <h2>title</h2>
  <div id="editme" style="border:0; overflow: hidden; background: none; height: 500px;">Your content here.</div>
  </div>
</div>
</body>
</html>
于 2013-10-18T06:06:23.687 に答える