DjangoBB LoFi version

Полная версия: Настройка django-ckeditor

Начало » Django » Настройка django-ckeditor

blazer-05

Дек. 13, 2015 15:40:48

Установил и настроил этот визуальный редактор - все вроде работает. Но тут нужно было сделать загрузку видео с ютуба и настроить стили отображения кода. Скачал для этого два модуля youtube и codesnippet вроде работают, но только по отдельности.
Проблема в том, что на панель выводится только один элемент это либо codesnippet либо youtube а как их вместе отобразить на toolbare я не пойму?
Если ставлю ютуб, то исчезает codesnippet, если ставлю codesnippet, то пропадает ютуб.
Все регулировал в файле конфигурации скедитора а также в settings.py тоже менял настройки скедитора - но ничего не получилось, что в тулбар можно всего добавить один элемент !

Подскажите куда копать?

terabayt

Дек. 14, 2015 09:05:13

blazer-05
Подскажите куда копать?

вставьте и codesnippet и ютуб
откройте код страницы в браузере и скиньте
скорее всего или вы что-то не так сделали или они не совместимы (используют один и тот же иди и т.п.)

blazer-05

Дек. 14, 2015 10:23:51

terabayt

В файле конфигурации скедитора config.js я подключал ютуб и codesnippe

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
       config.uiColor = '#AADC6E';
       config.extraPlugins = 'youtube';
       //config.toolbar = [{ name: 'insert', items: ['Youtube']}];
       config.skin = 'moono';
       //config.skin = 'moonocolor';
       //config.extraPlugins = 'codesnippet';
};
config.protectedSource.push(/<[a-z]*[a-z\s\=\"\']*><\/[\s\S][^/]*?>/g);

Сейчас у меня на тулбаре отображается ютуб, если раскомментить codesnippet, то ютуб уйдет куда то гулять и codesnippet будет вместо него!

В settings.py делал тоже настройки. Брал дефолтные настройки скедитора и добавлял в строку insert ютуб и codesnippet но не прокатывало!

Исходный код страницы.

<!DOCTYPE html>
<html lang="ru-ru" >
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Добавить blog post | Мой практикум</title>
  
  <link rel="stylesheet" type="text/css" href=""/>
  <link rel="stylesheet" type="text/css" href="/static/suit/bootstrap/css/bootstrap.min.css" media="all"/>
  <link rel="stylesheet" type="text/css" href="/static/suit/css/suit.css" media="all">
  
  
  
  <script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>
  <script src="/static/suit/js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">var Suit = { $: $.noConflict() }; if (!$) $ = Suit.$; </script>
  <script src="/static/suit/bootstrap/js/bootstrap.min.js"></script>
  
  <style type="text/css">.required:after { content: '*'; margin: 0 0 0 5px; position: absolute; color: #ccc;}</style>
  
  
  
  <script type="text/javascript" src="/admin/jsi18n/"></script>
  <script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/related-widget-wrapper.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/ckeditor/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/static/ckeditor/ckeditor-init.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript" src="/static/admin/js/inlines.js"></script>
  
    <meta name="robots" content="NONE,NOARCHIVE"/>
</head>
<body class="blog-blogpost change-form">
<!-- Sticky footer wrap -->
<div id="wrap">
  <!-- Container -->
  
    <div id="container">
      
        
          <!-- Header -->
          <div id="header" class="header">
            <div id="branding">
              <a href="/admin/"><h1 id="site-name">Мой практикум</h1></a>
            </div>
            
            <div class="header-content header-content-first">
              <div class="header-column icon">
                <i class="icon-time"></i>
              </div>
              <div class="header-column">
                <span class="date"> Понедельник, 14th Декабрь 2015</span><br>
                <span class="time" id="clock">11:38</span>
              </div>
            </div>
            
            
              <!--<div class="header-content">
                <div class="header-column icon">
                  <i class="icon-comment"></i>
                </div>
                <div class="header-column">
                  <a href="" class="grey"><b>2</b> new messages</a>
                </div>
              </div>-->
            
            
              <div id="user-tools">
                
                  Добро пожаловать,
                  <strong>
                    
                      blazer</strong>.
                
                <span class="user-links">
                
                  
                  
                  <a href="/admin/password_change/">Изменить пароль</a>
                  <span class="separator">|</span>
                  <a href="/admin/logout/">Выйти</a>
                
                </span>
              </div>
            
            
          </div>
        
        <!-- END Header -->
      
      <div class="suit-columns two-columns">
        
          <div id="suit-center" class="suit-column">
            
              
    <ul class="breadcrumb">
      <li>
        <a href="/admin/">Начало</a>
        <span class="divider">&raquo;</span>
      </li>
      <li>
        <a href="/admin/blog/">Blog</a>
        <span class="divider">&raquo;</span>
      </li>
      <li>
        
          <a href="/admin/blog/blogpost/">
            Blog posts</a>
        <span class="divider">&raquo;</span>
      </li>
      <li class="active">
        Добавить blog post
      </li>
    </ul>
  
            
            
              
            
            <!-- Content -->
            <div id="content" class="colM row-fluid">
              
              
                <h2 class="content-title">Добавить blog post</h2>
              
              
  <div id="content-main" class="inner-two-columns">
    <form enctype="multipart/form-data" action="" method="post"
          id="blogpost_form" class="form-horizontal">
      <div class="inner-right-column">
        <div class="box save-box">
          
<div class="submit-row clearfix">
  <button type="submit" class="btn btn-high btn-info" name="_save">Сохранить</button>
  <button type="submit" name="_continue" class=" btn btn-high">Сохранить и продолжить редактирование</button>
  
  <button type="submit" name="_addanother" class="btn">Сохранить и добавить другой объект</button>
  
</div>
        </div>
        
          
        
      
      </div>
      <div class="inner-center-column">
        <input type='hidden' name='csrfmiddlewaretoken' value='0HvSV1NtXd5nulPPT5mXVBN1Z7vD7hpf' />
        
          
        
        <div class="tab-content tab-content-main">
          
          
          
          
          
            
              
<fieldset class="module aligned first ">
    
  
    
      <div class="control-group form-row field-category ">
        
          <div><div class="control-label"><label class="required" for="id_category">Раздел:</label></div><div class="controls"><div class="related-widget-wrapper"><select id="id_category" name="category"><option value="" selected="selected">---------</option><option value="10">Apache</option><option value="6">Django</option><option value="8">MySql</option><option value="9">Pycharm</option><option value="7">Python</option></select><a class="related-widget-wrapper-link change-related" id="change_id_category"
            data-href-template="/admin/blog/category/__fk__/?_to_field=id&amp;_popup=1"
            title="Изменить выбранный объект типа "category""><img src="/static/admin/img/icon_changelink.gif" width="10" height="10"
                alt="Изменить"/></a><a class="related-widget-wrapper-link add-related" id="add_id_category"
            href="/admin/blog/category/add/?_to_field=id&amp;_popup=1"
            title="Добавить ещё один объект типа "category""><img src="/static/admin/img/icon_addlink.gif" width="10" height="10"
                alt="Добавить"/></a></div></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-title ">
        
          <div><div class="control-label"><label class="required" for="id_title">Заголовок:</label></div><div class="controls"><input class="vTextField" id="id_title" maxlength="150" name="title" type="text" /></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-slug ">
        
          <div><div class="control-label"><label for="id_slug">Транслит:</label></div><div class="controls"><input class="vTextField" id="id_slug" maxlength="150" name="slug" type="text" /></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-text_redactor ">
        
          <div><div class="control-label"><label for="id_text_redactor">Краткое описание:</label></div><div class="controls"><div class="django-ckeditor-widget" data-field-id="id_text_redactor" style="display: inline-block;"><textarea cols="40" id="id_text_redactor" name="text_redactor" rows="10" data-processed="0" data-config='{"filebrowserWindowWidth": 940, "toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "language": "ru-ru", "allowedContent": true, "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "filebrowserUploadUrl": "/ckeditor/upload/", "height": 300, "width": 628, "filebrowserBrowseUrl": "/ckeditor/browse/", "skin": "moonocolor", "filebrowserWindowHeight": 725, "toolbar": null}' data-external-plugin-resources='[]' data-id="id_text_redactor" data-type="ckeditortype"></textarea></div></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-text_redactor_full ">
        
          <div><div class="control-label"><label for="id_text_redactor_full">Полное описание:</label></div><div class="controls"><div class="django-ckeditor-widget" data-field-id="id_text_redactor_full" style="display: inline-block;"><textarea cols="40" id="id_text_redactor_full" name="text_redactor_full" rows="10" data-processed="0" data-config='{"filebrowserWindowWidth": 940, "toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "language": "ru-ru", "allowedContent": true, "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "filebrowserUploadUrl": "/ckeditor/upload/", "height": 300, "width": 628, "filebrowserBrowseUrl": "/ckeditor/browse/", "skin": "moonocolor", "filebrowserWindowHeight": 725, "toolbar": null}' data-external-plugin-resources='[]' data-id="id_text_redactor_full" data-type="ckeditortype"></textarea></div></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-tag ">
        
          <div><div class="control-label"><label class="required" for="id_tag">Теги:</label></div><div class="controls"><div class="related-widget-wrapper"><select multiple="multiple" id="id_tag" name="tag"><option value="7">Apache</option><option value="6">Django</option><option value="3">MySql</option><option value="5">Pycharm</option><option value="2">Python</option></select><a class="related-widget-wrapper-link add-related" id="add_id_tag"
            href="/admin/blog/tag/add/?_to_field=id&amp;_popup=1"
            title="Добавить ещё один объект типа "tag""><img src="/static/admin/img/icon_addlink.gif" width="10" height="10"
                alt="Добавить"/></a></div><span class="help-inline">Удерживайте "Control" (или "Command" на Mac), чтобы выбрать несколько значений.</span></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-timestamp ">
        
          <div><div class="control-label"><label class="required" for="id_timestamp_0">Дата:</label></div><div class="controls"><p class="datetime">Дата: <input class="vDateField" id="id_timestamp_0" name="timestamp_0" size="10" type="text" /><br />Время: <input class="vTimeField" id="id_timestamp_1" name="timestamp_1" size="8" type="text" /></p></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-autor ">
        
          <div><div class="control-label"><label for="id_autor">Автор:</label></div><div class="controls"><input class="vTextField" id="id_autor" maxlength="100" name="autor" type="text" /></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-body ">
        
          <div><div class="control-label"><label class="required" for="id_body">Описание:</label></div><div class="controls"><textarea class="vLargeTextField" cols="40" id="id_body" name="body" rows="10"></textarea></div></div>
        
      </div>
    
  
    
      <div class="control-group form-row field-likes ">
        
          <div><div class="control-label"><label class="required" for="id_likes">Лайки:</label></div><div class="controls"><input class="vIntegerField" id="id_likes" name="likes" type="text" value="0" /></div></div>
        
      </div>
    
  
</fieldset>
            
          
          
          
          
          
            
              
<div class="inline-group " id="comments_set-group">
  <h2>Commentss</h2>
<input id="id_comments_set-TOTAL_FORMS" name="comments_set-TOTAL_FORMS" type="hidden" value="1" /><input id="id_comments_set-INITIAL_FORMS" name="comments_set-INITIAL_FORMS" type="hidden" value="0" /><input id="id_comments_set-MIN_NUM_FORMS" name="comments_set-MIN_NUM_FORMS" type="hidden" value="0" /><input id="id_comments_set-MAX_NUM_FORMS" name="comments_set-MAX_NUM_FORMS" type="hidden" value="1000" />
<div class="inline-related" id="comments_set-0">
  <h3><b>Comments:</b>&nbsp;<span class="inline_label"></span>
    
    
  </h3>
  
  
    
<fieldset class="module aligned first ">
    
  
    
      <div class="control-group form-row field-comments_text ">
        
          <div><div class="control-label"><label class="required" for="id_comments_set-0-comments_text"></label></div><div class="controls"><textarea class="vLargeTextField" cols="40" id="id_comments_set-0-comments_text" name="comments_set-0-comments_text" rows="10"></textarea></div></div>
        
      </div>
    
  
</fieldset>
  
  <input id="id_comments_set-0-id" name="comments_set-0-id" type="hidden" />
  <input id="id_comments_set-0-comments_blogpost" name="comments_set-0-comments_blogpost" type="hidden" />
</div><div class="inline-related empty-form last-related" id="comments_set-empty">
  <h3><b>Comments:</b>&nbsp;<span class="inline_label">#2</span>
    
    
  </h3>
  
  
    
<fieldset class="module aligned first ">
    
  
    
      <div class="control-group form-row field-comments_text ">
        
          <div><div class="control-label"><label class="required" for="id_comments_set-__prefix__-comments_text"></label></div><div class="controls"><textarea class="vLargeTextField" cols="40" id="id_comments_set-__prefix__-comments_text" name="comments_set-__prefix__-comments_text" rows="10"></textarea></div></div>
        
      </div>
    
  
</fieldset>
  
  <input id="id_comments_set-__prefix__-id" name="comments_set-__prefix__-id" type="hidden" />
  <input id="id_comments_set-__prefix__-comments_blogpost" name="comments_set-__prefix__-comments_blogpost" type="hidden" />
</div>
</div>
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        var rows = "#comments_set-group .inline-related";
        var updateInlineLabel = function(row) {
            $(rows).find(".inline_label").each(function(i) {
                var count = i + 1;
                $(this).html($(this).html().replace(/(#\d+)/g, "#" + count));
            });
        };
        var reinitDateTimeShortCuts = function() {
            // Reinitialize the calendar and clock widgets by force, yuck.
            if (typeof DateTimeShortcuts != "undefined") {
                $(".datetimeshortcuts").remove();
                DateTimeShortcuts.init();
            }
        };
        var updateSelectFilter = function() {
            // If any SelectFilter widgets were added, instantiate a new instance.
            if (typeof SelectFilter != "undefined"){
                $(".selectfilter").each(function(index, value){
                  var namearr = value.name.split('-');
                  SelectFilter.init(value.id, namearr[namearr.length-1], false, "/static/admin/");
                });
                $(".selectfilterstacked").each(function(index, value){
                  var namearr = value.name.split('-');
                  SelectFilter.init(value.id, namearr[namearr.length-1], true, "/static/admin/");
                });
            }
        };
        var initPrepopulatedFields = function(row) {
            row.find('.prepopulated_field').each(function() {
                var field = $(this);
                var input = field.find('input, select, textarea');
                var dependency_list = input.data('dependency_list') || [];
                var dependencies = [];
                $.each(dependency_list, function(i, field_name) {
                  dependencies.push('#' + row.find('.form-row .field-' + field_name).find('input, select, textarea').attr('id'));
                });
                if (dependencies.length) {
                    input.prepopulate(dependencies, input.attr('maxlength'));
                }
            });
        };
        $(rows).formset({
            prefix: "comments_set",
            addText: "Добавить еще один Comments",
            formCssClass: "dynamic-comments_set",
            deleteCssClass: "inline-deletelink",
            deleteText: "Удалить",
            emptyCssClass: "empty-form",
            removed: updateInlineLabel,
            added: (function(row) {
                initPrepopulatedFields(row);
                reinitDateTimeShortCuts();
                updateSelectFilter();
                updateInlineLabel(row);
                Suit.after_inline.run("comments_set", row);
            })
        });
    });
})(django.jQuery);
</script>
            
          
        </div>
        
        
        
        
            <script type="text/javascript">
                (function($) {
                    $(document).ready(function() {
                        $('.add-another').click(function(e) {
                            e.preventDefault();
                            showAddAnotherPopup(this);
                        });
                        $('.related-lookup').click(function(e) {
                            e.preventDefault();
                            showRelatedObjectLookupPopup(this);
                        });
                    
                        $('form#blogpost_form :input[type!=button][type!=submit]:visible:enabled:first').focus()
                    
                    });
                })(django.jQuery);
            </script>
        
        
        
<script type="text/javascript">
(function($) {
    var field;
    field = {
        id: '#id_slug',
        dependency_ids: [],
        dependency_list: [],
        maxLength: 150
    };
    
    field['dependency_ids'].push('#id_title');
    field['dependency_list'].push('title');
    
    
    $('.empty-form .form-row .field-slug, .empty-form.form-row .field-slug').addClass('prepopulated_field');
    $(field.id).data('dependency_list', field['dependency_list'])
               .prepopulate(field['dependency_ids'], field.maxLength);
})(django.jQuery);
</script>
      </div>
    </form>
  </div>
              
            </div>
            <!-- END Content -->
          </div>
        
        
          
            <div id="suit-left" class="suit-column">
              
                
                  
                    <form class="form-search nav-quick-search" autocomplete="off" action="/admin/auth/user/" method="GET">
                      <input type="text" name="q" class="input-medium search-query" id="quick-search">
                      <i class="input-icon icon-search"></i>
                      <input type="submit" class="submit" value="">
                    </form>
                  
                
              
              
<div class="left-nav" id="left-nav">
  <ul>
    
      
      <li>
        <a href="/admin/"><i class="icon-home"></i>Начало
        </a>
      </li>
    
    
    
      
        
          <li class=active>
            <a href="/admin/blog/blogpost/"><i class="icon-chevron-right"></i>Blog
            </a>
            
              <ul>
                
                  <li class=active>
                    <a href="/admin/blog/blogpost/">Blog posts</a></li>
                
                  <li>
                    <a href="/admin/blog/category/">Categorys</a></li>
                
                  <li>
                    <a href="/admin/blog/tag/">Tags</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/formsactive/post/"><i class="icon-chevron-right"></i>Formsactive
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/formsactive/post/">Posts</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/index/reminder/"><i class="icon-chevron-right"></i>Index
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/index/reminder/">Reminders</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/info/mysiteinfo/"><i class="icon-chevron-right"></i>Info
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/info/mysiteinfo/">Mysite infos</a></li>
                
                  <li>
                    <a href="/admin/info/slider/">Sliders</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/myforms2/article2/"><i class="icon-chevron-right"></i>Myforms2
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/myforms2/article2/">Article2s</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/auth/group/"><i class="icon-lock"></i>Пользователи и группы
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/auth/group/">Группы</a></li>
                
                  <li>
                    <a href="/admin/auth/user/">Пользователи</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/flatpages/flatpage/"><i class="icon-chevron-right"></i>Простые страницы
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/flatpages/flatpage/">Простые страницы</a></li>
                
              </ul>
            
          </li>
        
      
        
          <li>
            <a href="/admin/sites/site/"><i class="icon-leaf"></i>Сайты
            </a>
            
              <ul>
                
                  <li>
                    <a href="/admin/sites/site/">Сайты</a></li>
                
              </ul>
            
          </li>
        
      
    
  </ul>
</div>
            </div>
          
        
      </div>
    </div>
  
  
  <!-- Sticky footer push -->
  <div id="push"></div>
  
</div>
  
  <div id="footer" class="footer">
    <div class="content">
      <div class="tools">
        
          <a href="http://djangosuit.com/support/" target="_blank" class="icon"><i class="icon-question-sign"></i>Support</a>
          <a href="http://djangosuit.com/pricing/" target="_blank" class="icon"><i class="icon-bookmark"></i>Licence</a>
          <a href="http://github.com/darklow/django-suit/issues" target="_blank" class="icon"><i class="icon-comment"></i>Report a bug</a>
        
      </div>
      <div class="copyright">
        
          Copyright &copy; 2013 DjangoSuit.com<br>Developed by <a href="http://djangosuit.com" target="_blank">DjangoSuit.com</a>
        
      </div>
      <div class="branding">
        
          Мой практикум
          
        
      </div>
    </div>
  </div>
  
  <script src="/static/suit/js/suit.js"></script>
  
  
  
    <!-- Warn on leaving unsaved form -->
    <script src="/static/suit/js/suit-form-confirm.js"></script>
    <script type="text/javascript">
      confirmExitIfModified('blogpost_form', 'You have unsaved changes.');
    </script>
  
  
        
  <script>
    (function ($) {
      $(function () {
        $("#blogpost_form").suit_form_debounce();
      });
    }(Suit.$))    
  </script>
</body>
</html>