Получить значение Tinymce Textarea с помощью селектора jquery - PullRequest
Новая
       7

Получить значение Tinymce Textarea с помощью селектора jquery

23 голосов
/ 27 августа 2011

Я хочу получить значение tintace textarea 

<textarea id="thetextarea"></textarea>

при включении ключа, чтобы передать его в сценарий предварительного просмотра, используя: 

function showPreview(value) {

    $("#preview-container").load("/material-preview.php", {s:value});

}
$('thetextarea').live("keyup",function (e) {

        var material = this.value;
        showPreview(material);

        return false;

    });

Если я попытаюсьчтобы выбрать идентификатор текстовой области thetextarea, он не работает (работает, если я не делаю это поле tinymce).

с firebug Я вижу, что текст, когда текстовая область преобразуется в tinymce, находится в: 

<body id="tinymce" class="mceContentBody"></body>

, но это также не работает (и не $('#tinymce')) 

 $('mceContentBody').live("keyup",function (e) {

            var material = this.value;
            showPreview(material);

            return false;

        });

HTML-код (из firebug) после применения tinyMCE в соответствии с запросом 

 <textarea id="material-input" class="mceEditor text" style="width: 310px ! important; height: 250px ! important; display: none;" name="material" aria-hidden="true"></textarea>
      <span id="material-input_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="material-input_voice">
      <span id="material-input_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
      <table id="material-input_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 310px; height: 250px;">
        <tbody>
          <tr class="mceFirst" role="presentation">
          <tr>
          <td class="mceIframeContainer mceFirst mceLast">
            <iframe id="material-input_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text Area. Press ALT F10 for toolbar. Press ALT 0 for help." style="width: 100%; height: 206px;">
            <html>
             <head xmlns="http://www.w3.org/1999/xhtml">
               <body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr">
                  <!-- the text inside tinymce textarea -->
                </body>
            </iframe>
           </td>
           </tr>
           <tr class="mceLast">
         </tbody>
       </table>
    </span>

Ответы [ 7 ]

58 голосов
/ 06 сентября 2013

Позвоните 

tinyMCE.triggerSave();

, после этого вы сможете использовать селектор jquery 

$("#yourtextareaID").val();
14 голосов
/ 07 августа 2013 
tinyMCE.get('yourTextAreaId').getContent();
3 голосов
/ 27 августа 2011

См. Следующую ссылку для определения события onKeyUp для работы с TinyMCE:

http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp

По сути, когда вы инициализируете tinyMCE, вы определяете обработчик события onKeyUp. Я думаю, что обычный селектор не будет работать здесь, так как текст находится внутри отдельного фрейма. TinyMCE API перечисляет метод .getContent(), который может работать. то есть. Примерно так: 

tinyMCE.init({
   setup : function(ed) {
      ed.onKeyUp.add(function(ed, e) {
          //showPreview ( $('.mceContentBody').val() );
          showPreview (tinyMCE.activeEditor.getContent({format : 'raw'}) );

      });
   }
});

Также см .: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Ваша проблема больше связана с TinyMCE, чем с jQuery или Javascript. Если вышеперечисленное не работает, вам нужно прочитать документы и / или API TinyMCE, чтобы понять, как сделать то, чего вы хотите достичь.

2 голосов
/ 04 апреля 2016

Вы можете использовать это тоже.

tinyMCE.activeEditor.getContent();

2 голосов
/ 21 октября 2012

TinyMCE предоставляет плагин jQuery , который можно использовать вместе с командой onKeyUp в API 

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'path/to/tiny_mce.js',

    theme : "simple",

   setup : function(ed) {
      ed.onKeyUp.add(function(ed, l) {
          console.debug('Key up event: ' + e.keyCode);
   });
  }
});

Существует также плагин для предварительного просмотра, , который, как я подозреваю, делает то, что вы искали более напрямую.

0 голосов
/ 28 июля 2016

tinymce.innerHTML дает мне требуемый результат

0 голосов
/ 27 августа 2011

Ваш выбор неправильный в приведенном выше примере.Это должно быть: 

$('#thetextarea').live("keyup",function (e) {

not 

$('thetextarea').live("keyup",function (e) {

Это просто опечатка в вашем вопросе?

Если вы не уверены, какой элемент имеет текст, который вынужно, вы можете попробовать добавить свой обработчик событий для обоих элементов.Также я думаю, что вы должны использовать $(this).val() против this.val: 

$('#thetextarea, .mceContentBody').live("keyup",function (e) {
    var material = $(this).val();
    showPreview(material);
    return false;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...