Tinymce: расположение панели инструментов внизу редактора

Я использую TinyMCE 4 с современной темой. Я хочу установить расположение панели инструментов в нижней части редактора (так же, как, где строка состояния)Tinymce: расположение панели инструментов внизу редактора

Вот код, но он не работает:

tinymce.init({ 
       selector: 'textarea#editor', 
       menubar: false, 
       statusbar: false, 
       resize: false, 
       height: textEditHeight, 
       theme_modern_toolbar_location : "bottom", 
});

источник

2013-10-13 Devesh Kumar

на основе документации TinyMCE, вы может использовать только theme_modern_toolbar_location: «bottom»

при использовании расширенной темы.

theme : "advanced",

Полный пример:

<script type="text/javascript"> 
// O2k7 skin 
tinyMCE.init({ 
     // General options 
     mode : "exact", 
     elements : "elm1", 
     theme : "advanced", 
     skin : "o2k7", 
     plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 

     // Theme options 
     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
     theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true, 
     theme_advanced_toolbar_location : "bottom" 
}); 

</script> 

<form method="post" action="dump.php"> 
     <textarea id="elm1" name="elm1" style="width:100%"> 
     </textarea> 


</form>

источник

2013-10-13 15:43:08 kdureidy

Но расширенная тема удалена из TinyMCE 4. Таким образом, я не могу использовать theme_modern_toolbar_location: «bottom», –

, как в документации , это свойство можно использовать только с устаревшей версией 3.x. Я не вижу никакого контроля над расположением панели инструментов в новом 4.x – kdureidy

Извините, что ожил очень старый пост, но есть ли какие-либо изменения с 2013 года по этой проблеме? Я действительно хочу, чтобы панель инструментов TinyMCE была внизу текстового поля. –

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

источник

2013-10-19 02:38:57

Я знаю, что это старый пост, но я решил, что поделюсь своим решением.

Я добавляю обработчик событий для события «init», а затем с помощью jQuery изменяю порядок панели инструментов и разделов редактора.

tinyMCE.init({ 
... 

    setup: function (ed) { 
     ed.on('init', function (evt) { 
      var toolbar = $(evt.target.editorContainer) 
          .find('>.mce-container-body >.mce-toolbar-grp'); 
      var editor = $(evt.target.editorContainer) 
          .find('>.mce-container-body >.mce-edit-area'); 

      // switch the order of the elements 
      toolbar.detach().insertAfter(editor); 
     }); 
}

источник

2015-02-24 22:04:19 Andy

Я выяснил путь с чистым CSS. Просто добавьте этот код в свой собственный файл css или в тег стиля в html.

#mceu_5-body{ 
    display: flex; 
    flex-direction: column-reverse; 
}

Что она делает это изменить направление, в котором дивы расположены т.е. снизу вверх. Единственным недостатком является то, что flex является современным свойством CSS, поэтому он не поддерживается в старых браузерах.

источник

2016-10-06 07:10:48

Tinymce: расположение панели инструментов внизу редактора

ответ

Смежные вопросы