javascript - tinyMCE keyup 直到第一个结尾

Question

我正在尝试实时捕获用户输入的内容.content textarea并将其粘贴到.intro. 我试过这样，但没有效果

.tiny_editor//所有这些都与tinymce有关，因为我使用tinymce作为具有类的文本框的富文本编辑器

//$(".content").live("keyup", function(e) {
$(".content").keyup(function(e) { //The keyup never does its thing
    var stt=$(this).val();
    console.log('content : '+stt);
    $(".intro").text(stt);
});

然后，我还需要将其限制为 first<p>中的内容.content textarea

• .content textarea, 用户写文本的地方

  <textarea name="content" class="tinymce content">
     <p>first paragraph</p>
     <p>second paragraph</p>
     <p>third paragraph</p>
  </textarea>
  

• 这里是它自动插入的地方，first<p>和</p>from之间的内容.content

  <textarea name="content" class="tinymce intro">
     <p>first paragraph</p>
  </textarea>
  

有任何想法吗？

http://jsfiddle.net/xEzAq/2/

Answer 1

在这种情况下，如果用户选择在第一段内，则必须检查每个 keydown 事件。

在您的 tinymce init 中，您需要按如下方式添加设置参数。这是代码：

setup : function(ed) {

  ed.onKeydown.add(function(ed, evt) {
    var node = ed.selection.getNode();
    while (node)
    {
        if (node.nodeName == 'BODY') { node = 0; break; }
        if (node.nodeName !== 'P')    { node = node.parentNode;}
        else { break; }
    }
    if (!node) return;
    var first_node_active = $(ed.getBody()).find('p:first').get(0) == node;
    // prevent insertion of content
    if (first_node_active){
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
  });

},
...

更新： 我明白了。事实上，tinymce 隐藏了 textare 并为内容使用了一个 contenteditable 的 iframe。解决您的问题的最简单方法是使用 setup tinymce 配置参数：

tinyMCE.init({

  mode: 'exact',
  elements: 'content',
  ...
  setup : function(ed) {
   // handler to catch keyup events
   ed.onKeyup.add(function(ed, evt) {

      // get html content of first paragraph in the editor
      var first_node_html = $(ed.getBody()).find('p:first').html();

      // copythe html content into the textarea '.intro'
      $('.intro').text(first_node_html);

      // if intro is a tinymce editor too you will need some other code
      // here it is
      //
      // // check if intro exists as tinymce editor and make sure we are not editing in it at the moment (copying makes no sense then)
      // if (ed2 = tinymce.get('intro') && ed.id != ed2.id){
      //    ed2.setContent(first_node_html);
      // }
   });

},
...