0

I have created a label for the title of a TinyMCE editor. I would like to have this label be unmovable, uneditable and remain at the very top, inside the textarea so that it flows with the scroll bar if/when it appears. In other words, when the textarea becomes full and someone is writing, the label will eventually be out of sight, but if someone were to scroll back up, they could see it.

In other words, this is what I want:

tinyMCE

I have tried a few things:

  1. Put the label on top (and outside) of the textarea instead: The scroll bar does not include the label when it appears.

  2. Same as #1, but remove the scroll bar from the textarea, and let the textarea grow as it becomes full and have the scroll bar appear on the outer div: The javascript is very ugly and acts differently in different browsers. You run into problems with seeing the bottom of the textarea as you type.

  3. All of my attempts to insert the div into the textarea directly: Even if you make the div uneditable, a user can still erase the entire div by hitting backspace a few times. You can create javascript to check if it's still there and put it back but you run into troubles with putting the cursor back to its original position. You also have do strange things with the padding and positioning of it.

  4. Place outside the textarea, but position it inside the textarea padding: The title remains when the textarea becomes full and when you want to scroll down (it should NOT remain). Sometimes the div height may get larger, so that means you also have to readjust the padding.

I feel that I have tried everything here and it's not possible to do what I want. Any help would be appreciated.

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 回答