<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl"  href="/xslt/final.xslt"?><html>
  <head>
    <title>Динамичеческая загрузка jWYSIWYG</title>
    <meta name="css" content=""/>
    <meta name="js" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="id" content="38"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  </head>
  <body>
    <div class="main">
      <div class="wrap">
        <div class="L">
          <h1><a href="/">..</a> / Динамичеческая загрузка jWYSIWYG</h1>
          <ol class="tags big">
            <li>
              <a href="/wysiwyg">wysiwyg</a>
            </li>
            <li>
              <a href="/jquery">jquery</a>
            </li>
            <li>
              <a href="/fckeditor">fckeditor</a>
            </li>
          </ol>
          <div class="myContent">Поскольку те кто сюда попал уже знакомы с jQuery (или аналогичных
библиотек), им должно быть совершенно очевидно, как правильно
подгружать компоненты, избегая мешанины javascript и HTML.
 Методика обычная и привычная: <br/>
<br/>
1. Каждому компоненту  textarea, к которому нужно
подлключить  jwisiwig присваивается определенный класс,
например .jwisiwig<br/>
2. После загрузки  дерева всем элементам с классом  
jwisiwig скопом подключается jwisiwig-редактор: <br/>
<br/>
<span style="font-weight: bold;">HTML:</span>
<pre class="brush: plain">......<br/>&lt;textarea class="jwisiwig" name="one"&gt;&lt;/textarea&gt;<br/>........<br/>&lt;textarea class="jwisiwig" name="next"&gt;&lt;/textarea&gt;<br/>........<br/>&lt;textarea class="jwisiwig" name="last"&gt;&lt;/textarea&gt;<br/>........<br/></pre>
<span style="font-weight: bold;">Javascript</span>
<pre class="brush: plain">$(function(){$('.jwisiwig')});<br/></pre>
Точно так же подключаются и другие компоненты - файловые загрузчики,
suggest-подсказки, tooltips и прочая. В результате как правило в header
выносится куча нужных и ненужных  javascript -блоков. Чтобы
избежать ненужного - строится какой-нибудь умный шаблонизатор,
позволяющий из 100 ненужных плагинов отобрать 10 и засунуть их в
header. Уже лучше, но тоже не очень. <br/>
Мне больше нравится динамическая загрузка. Благо при наличии jquery
 это делается легко и непринужденно. Рассмотрим подробнее.<br/>
HTML-код остается без изменений. А JavaScript будет следующим: <br/>
<pre class="brush: plain">$(function(){<br/>if ($('.jwisiwig').size())<br/>{<br/>   $.getScript('js/common/jwysiwyg/jquery.wysiwyg.js',<br/>   function(){$('.jwisiwig').wysiwyg();});<br/>}<br/>});</pre>
В самом начале проверяется наличие  компонентов  с
классом jwisiwig. Если такие компоненты есть, производится
Ajax-загрузка необходимого плагина для компонента (подробнее см.<u class="external" title="api.jquery.com/jQuery.getScript/">
http://api.jquery.com/jQuery.getScript/</u>)
. После того как плагин  будет загружен вызывается
функция, в которой к  jwisiwig-компонентам применяется
загруженный плагин. <br/>
<br/>
<a href="#" title="2.x9.ru/wysiwyg-dynamic.htm" rel="nofollow" class="external">Демонстрационный
пример</a><br/>
Коды можно найти в архиве <u class="external" title="2.x9.ru/wysiwyg.zip">wysiwyg.zip</u><br/>
<br/>
<span style="font-weight: bold;">Прим.
</span><br/>
<ol>
  <li>По умолчанию в jquery
 getScript работает без кэширования.
Чтобы отключить кэширование необходимо его выключить принудительно.
Делается это следующей командой:<br/>
jQuery.ajaxSettings.cache=true; </li>
  <li>Рассмотренный
 способ работает во всех броузерах, кроме ie6. В ie6 необходим
немного другой подход. </li>
</ol></div>
          <ol class="tags big">
            <li class="date">2010-02-12</li>
            <li>
              <a href="/wysiwyg">wysiwyg</a>
            </li>
            <li>
              <a href="/jquery">jquery</a>
            </li>
            <li>
              <a href="/fckeditor">fckeditor</a>
            </li>
          </ol>
          <ol class="see">
            <li>
              <a href="#"><span>erum.ru/article/39</span> - <b>динамическая загрузка FCKEditor</b></a>
            </li>
            <li>
              <a href="#"><span>code.google.com/p/jwysiwyg/</span> - <b>Домашняя страница jWYSIWYG</b></a>
            </li>
          </ol>
          <ul class="comment">
            <li id="a442" title="a0">
              <a name="Le capitaine Nemo" title="" rel="12.02.10"/>
              <div>На ie6 давно пора забить. По статистике сейчас 8-10% и каждый год аудитория снижается в два раза.<br/>В конце концов есть условные комеентарии в них можно по умолчанию вставить все плагины без разбора.</div>
            </li>
            <li id="a444" title="a0">
              <a name="&#x422;&#x430;&#x440;&#x430;&#x441;" title="" rel="12.02.10"/>
              <div>Динамическая загрузка - тема модная. Но ее нужно задействовать с умом. Вы пишите про XSLT и надо полагать пишете шаблонизаторы на XSLT. Вылавливать необходимые плагины можно на уровне шаблонизации. XSLT позволяет это делать очень просто. В этом случае вы получите только то набор плагинов, который нужен без всякой динамической загрузки. В результате - сокращение времени загрузки из-за того что не нужно дожидаться построения дерева и его парсинга.</div>
            </li>
            <li id="a445" title="a444">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="12.02.10"/>
              <div>Увы. С XSLT, я давно практически не работаю. Рад бы, да нет такой возможности.  <br/>По поводу ускорения - да вы правы. <br/>Использование XSLT может дать такие возможности, но возникает проблема. То о чем вы сказали можно реализовать только в двухпроходном XSLT. А это опять же не во всех проектах может быть реализовано.</div>
            </li>
            <li id="a457" title="a0">
              <a name="Le capitaine Nemo" title="" rel="20.02.10"/>
              <div>При  таком подходе дополнительные js грузятся после построения дерева. Это задержка по времени. Зачем?</div>
            </li>
            <li id="a458" title="a457">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="20.02.10"/>
              <div>Задержка существенно меньше времени подгрузки. Нет? <br/>Для меня смысл как минимум в двух моментах: <br/>1) существенно проще делать  движок для всякие сложные форм - в CMS, CRM и пр. Не нужно мешать программный код разных языков (можно посмотреть например хелперы для визивиг в YII или Codeigntiter) В результате проще работать ппрограммисту<br/>2) в сгенерированном файле нет мешанины из JS и HTML все скрипты вынесены в head - проще становится верстальшику<br/>3) вы забыли динамическией страницы FullAjax - там неизвестно какой плагин потребуется.</div>
            </li>
            <li id="a488" title="a0">
              <a name="rtf" title="" rel="28.03.10"/>
              <div>В IE не работает H1-H6. <br/>Поправьте пожалуйста</div>
            </li>
            <li id="a489" title="a488">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="28.03.10"/>
              <div>Спасибо, что заметили. Выложу правленную верстю в ближайшее время.</div>
            </li>
            <li id="a501" title="a0">
              <a name="Max89" title="" rel="28.04.10"/>
              <div>Посмотрите на досуге nicedit. Он намного более интересный. Немного тяжелее, но в пределах 40К. Если почистить то и до 30К можно довести.</div>
            </li>
            <li id="a502" title="a501">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="28.04.10"/>
              <div>Смотрел когда-то но особых преимуществ не нашел.</div>
            </li>
            <li id="a503" title="a502">
              <a name="Max89" title="" rel="28.04.10"/>
              <div>Он здорово обновился. Там теперь нормально вводятся ссылки, картинки. Можно даже CSS-форматирование приладить.</div>
            </li>
            <li id="a622" title="a618">
              <a name="!@$!@$#!@$!@" title="" rel="29.10.11"/>
              <div>adf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf adf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf asd fasdf asdfasdf asdfasdfa sdfasf ds asdfa sadf</div>
            </li>
            <li id="a670" title="a445">
              <a name="&#x425;&#x443;&#x441;&#x430;&#x438;&#x43D; &#x428;&#x430;&#x431;&#x430;&#x448;" title="" rel="18.12.11"/>
              <div>Не работает ничего у вас Не работает ничего у вас Не работает ничего у вас Не работает ничего у вас Не работает ничего у вас</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="R">
        <a href="/" title="&#x41D;&#x430; &#x433;&#x43B;&#x430;&#x432;&#x43D;&#x443;&#x44E;"/>
      </div>
    </div>
    <div id="li"/>
  </body>
</html>

