Добавление границы-радиуса в текстовую область TinyMCE

Question

Можно ли добавить радиус границы в текстовые области TinyMCE? Это своего рода убийство, что у меня есть закругленные углы в моих полях ввода и т. Д., Но я не могу заставить его работать с моей текстовой областью .. Возможно, потому что TinyMCE превращает его в IFRAME? Есть ли способ обойти это? Большое спасибо!

Answer 1

Одним из решений является использование параметра editor_css . Этот CSS применяется после загрузки CSS по умолчанию, поэтому перезаписывает файл по умолчанию.

Я создал файл с именем editor.css, содержащий следующее

.defaultSkin table.mceLayout {border:1px solid black}

и установите параметр tinymce, используя editor_css

editor_css : 'path_to_css'.'/editor.css',

Это создает красивую тонкую черную линию вокруг редактора.

Answer 2

Другой способ - программно добавить классы в контейнер TinyMCE при инициализации:

textarea.tinymce({
    setup: function(editor) {
        editor.on('init', function() {
            editor.getContainer().className += ' with-border';
        });
    }
});

CSS:

.with-border {
    border: 1px solid black;
}

См. Интеграция и настройка | Документация TinyMCE

Параметр setup позволяет указать событие, которое будет выполнено до отображения экземпляра редактора TinyMCE.

Answer 3

Чтобы добавить радиус границы в текстовую область tinyMCE, вам необходимо добавить в файл следующие правила css внизу файла: /themes/advanced/skins/default/ui.css.Примечание. Если вы используете собственный скин, вам нужно будет добавить эти правила в файл css, созданный для этого скина.

#article_tbl, #article_ifr{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

$article_tbl{
  border: 1px solid silver;
}

#article_ifr{
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;    
}

#article_tbl{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

.mceToolbar{         
  -webkit-border-top-left-radius: 12px;
  -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.defaultSkin table.mceLayout tr.mceLast td {
  border-bottom: 1px solid silver;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}