Как проверить, имеет ли CKEditor некоторый текст в нем?

Question

Как проверить, имеет ли CKEditor некоторый текст в нем?

У меня есть HTML-форма с несколькими полями. Один из них является текстовой областью, управляемой CKEditor.

Когда пользователь хочет отправить форму, я хочу проверить, ввел ли он значения во все поля.

Я знаю, как я могу проверить, имеет ли управление CKEditor что-нибудь в нем, но это могли бы быть "пустые" HTML-тэги без любого текста в нем.

Как я проверяю на текст?

Сторона сервера я использую что-то как обрезка PHP (strip_tags ($content)), таким образом, я хотел бы иметь то же в JavaScript.

Решение с помощью jQuery также было бы применимо.

19

javascript ckeditor fckeditor

задан Andrew Hendrie 17 February 2015 в 17:51

2 ответа

Accepted Answer

Это будет работать:

$("#editorContainer iframe").contents().find("body").text();

Это будет содержать только текст, без HTML-тегов.

ОБНОВЛЕНИЕ

Это определенно работает на демонстрационной странице CKEditor .Используйте Firefox и Firebug, перейдите в консоль Firebug и введите:

$("#demoInside iframe").contents().find("body").text();

Консоль распечатает текст в редакторе без тегов html. Убедитесь, что в вашем конкретном приложении установлен правильный селектор. Вы можете проверить свой селектор следующим образом:

$("#demoInside iframe").contents().find("body").length;

Это должно быть равно 1. Если он 0, ваш селектор неправильный.

ОБНОВЛЕНИЕ 2

Опять же, мой код все еще правильный, и он все еще работает на этой странице. Вам просто нужен правильный селектор. На странице, на которую вы ссылаетесь, это с идентификатором cke_editor1 . Эта конкретная страница не использует jQuery, поэтому требуется дополнительная работа, чтобы доказать, что этот образец работает. Установите FireQuery , выполните jqueryify »страницу, а затем сделайте это в консоли Firebug (обратите внимание, что вам нужно использовать jQuery , а не $ . Вот как работает FireQuery ).

jQuery("#cke_editor1 iframe").contents().find("body").text();

Короче говоря, убедитесь, что у вас есть правильный селектор для перехода к вашему iframe . Неважно, создаете ли вы свой CKEditor из

или

  </code>. Пока вы можете выбрать <code> <iframe> </code>, который CKEditor вводит в DOM, вы можете использовать <code> .contents (). Find ("body"). Text () </code>, чтобы получить текст этого iframe. Вы тестировали свой селектор jquery, чтобы узнать, является ли <code> .length == 1 </code>? </p>                  </div>
                  <div class="votes-answer green">
                     
                     <div class="vote-count" itemprop="upvoteCount">30</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="30 November 2019 в 02:41 ">30 November 2019 в 02:41 </span>
                  </div>
                  <a class="s-link" href="/questions/312763/kak-proverit-imeet-li-ckeditor-nekotoryj-tekst-v-nem#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-934743">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
            
         <div class="answer" id="964216" itemscope="" itemtype="http://schema.org/Answer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> Мы используем прототип с этой библиотекой и следующим дополнением: </p>

<pre><code>Element.addMethods({  
  getInnerText: function(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText
      : element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' ');
  }
});
</code></pre>

<p> (Благодаря <a href="http://tobielangel.com/2006/10/18/extending-prototype-getinnertext" rel="nofollow noreferrer"> Tobie Langel </a>) </p>

<p> Я смог использовать следующую функцию, чтобы определить был ли какой-либо текст внутри CKEditor: </p>

<pre><code>function editorEmpty(instanceName){

    var ele = (new Element('div')).update(CKEDITOR.instances[instanceName].getData()); 

    return (ele.getInnerText() == '' || innerText.search(/^(&nbsp;)+$/i) == 0);
}
</code></pre>

<p> Обратите внимание на тест для <code> </code> - часто, когда редактор кажется пустым, он фактически содержит что-то вроде: <code> <p> </p> </code> . </p>                  </div>
                  <div class="votes-answer">
                     
                     <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="30 November 2019 в 02:41 ">30 November 2019 в 02:41 </span>
                  </div>
                  <a class="s-link" href="/questions/312763/kak-proverit-imeet-li-ckeditor-nekotoryj-tekst-v-nem#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-964216">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
               <div style="margin-top: 20px;">
          Другие вопросы по тегам:          <div class="tags" style="display: inline-block; float: none;">
         <a href="/questions/tagged/javascript" class="tag"  title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/ckeditor" class="tag"  title="ckeditor" rel="tag">ckeditor</a> <a href="/questions/tagged/fckeditor" class="tag"  title="fckeditor" rel="tag">fckeditor</a>       </div>
        <h3 class="m-t-20">Похожие вопросы:</h3>

        <div class="related-block">
          <ul>
                          <li><div class='votes-answer green'><span class='vote-count'>99</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/131610/skrytye-funkcii-javascript-zakrytyj" title="Скрытые функции JavaScript? [закрытый]">Скрытые функции JavaScript? [закрытый]</a> - 23 May 2017 02:10 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>70</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82769/chto-takoe-javascript-versija-sleep" title="Что такое JavaScript-версия sleep ()?">Что такое JavaScript-версия sleep ()?</a> - 17 March 2018 18:15 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>61</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90102/kak-ja-mogu-otformatirovat-chisla-v-vide-stroki-valjuty-v-javascript" title="Как я могу отформатировать числа в виде строки валюты в JavaScript?">Как я могу отформатировать числа в виде строки валюты в JavaScript?</a> - 26 May 2019 04:14 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>44</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82794/kakoj-sintaksis-javljaetsja-predpochtitelnym-dlja-opredelenija-perechislenij-v-javascript-zakryto" title="Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]">Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]</a> - 26 December 2018 06:38 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>37</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89384/javascript-ekvivalenten-printf-string-format" title="JavaScript эквивалентен printf / String.Format">JavaScript эквивалентен printf / String.Format</a> - 31 July 2018 20:09 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82961/kak-luchshe-vsego-obnaruzhit-ustrojstvo-s-sensornym-ekranom-s-pomoschju-javascript" title="Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?">Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?</a> - 15 October 2013 16:24 </li>
                          </ul>
        </div>

      </div>
   </div>
   
</div>      </div>
      <aside class="sidebar">
        <div class="awrap">

<script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script>
<script>
    (yaads = window.yaads || []).push({
        id: "553274-2",
        render: "#id-553274-2"
    });
</script>
<div id="id-553274-2"></div>
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-2355906945027976"
     data-ad-slot="8038370725"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


        </div>
      </aside>

    </div>
  </div>
  <footer class="footer">
    <div class="wrapper wrapper--sm">
      <div class="footer-navs-col">
        <div class="footer-nav footer-nav--menu">

          <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div>
        </div>
        <div class="footer-nav footer-nav--catalog">
        </div>
      </div>
      <div class="footer-contacts-col">
        <div class="soc-widget-col">
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

  </footer>

</div>

<script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script>


<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script>

<script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>


<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123993370-1');
</script>

</div>
<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Программирование - вопросы и ответы",
  "alternateName": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "potentialAction": {
     "@type": "SearchAction",
     "target": "https://legkovopros.ru/search?search={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "logo": "https://legkovopros.ru/i/logo.png",
  "email": "info@legkovopros.ru",
   "telephone": ""

}




</script>
</body>
</html>