2017-01-21 4 views
0

Я следовал учебнику по How to build a blog with Rails 5 and Bootstrap 4 - Part 5, инициализированному редактором Tinymce, но я не могу изменить размер шрифта по умолчанию в этом редакторе. У меня есть этот код в application.js:Стили по умолчанию Tinymce в приложении Rails

document.addEventListener("turbolinks:load", function() { 
    tinymce.remove(); 
    tinymce.init({ 
     selector: 'textarea#post_body', 
    height: 500, 
    plugins: [ 
     "advlist autolink autosave link image lists charmap", 
     "wordcount media code", 
     "table contextmenu textcolor paste" 
    ], 
    toolbar1: "undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "cut copy paste | bullist numlist | outdent indent blockquote | link image media | forecolor | table | subscript superscript | charmap | code", 
    menubar: false, 
    content_css : "/assets/application.css" 
}); 

})

В application.css:

*= require_tree . 
*= require_self 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "font-awesome"; 

И есть другие два файла со стилями (custom.scss и posts.scss). Я попытался положить в custom.scss:

Я также попытался следующие: кэш браузера

-clearing несколько раз

-copying custom.scss и ссылающихся на новый файл в content_css согласно this suggestion

-при content_style: ".mce-content-body p { font-size: 16px;}"

этот файл добавляется в голове IFRAME и его цвет фона меняется, но стили для абзацев всегда заменяются встроенными стилями по умолчанию: <p style="box-sizing: border-box; margin: 0px 0px 1.1em; padding: 0px; border: 0px; font-size: 19.35px; line-height: 32.895px; font-family: Lato, sans-serif; color: #444444;" data-mce-style="box-sizing: border-box; margin: 0px 0px 1.1em; padding: 0px; border: 0px; font-size: 19.35px; line-height: 32.895px; font-family: Lato, sans-serif; color: #444444;">...</p>

Другая проблема заключается в том, что даже если я изменяю фоновый цвет при редактировании сообщения, стили по умолчанию возвращаются при отправке форму и показать все записи в блоге :(

Любые идеи, пожалуйста?

+0

У вас есть git-репо вашего проекта? – Blackcoat77

+0

[здесь это] (https://github.com/IoPhoenix/svetlana_stupina/) – Olga

ответ

0

Я думаю, что нашел. Проблема была в 16px вместо 16pt :-) Tinymce4 использует стиль pt по умолчанию. Так что просто изменить custom.scss к 16pt:

/* TinyMCE specific rules */ 
body.mce-content-body { 
font-family: $raleway; 
background-color: gray; 
font-size: 16pt; 
} 

body.mce-content-body p { 
    font-size: 16pt; 
} 

Хотя вы можете изменить значение по умолчанию style format, но я не пробовал.

+0

Спасибо за советы! Оказалось, мои предыдущие решения отлично работают, когда я создаю новый пост, но они не делали, когда я пытался редактировать старые сообщения ... – Olga

+0

Добро пожаловать! Работает ли он сейчас? – Blackcoat77

+0

Пожалуйста, не забудьте отметить ответ, принятый, если помог в решении проблемы. Пожалуйста, проверьте эту ссылку: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Blackcoat77