Выравнивание изображений Froala не работает
Я успешно установил Froala на свой веб-сайт, но расположение изображений, похоже, не работает.. Они всегда слева, даже если я выровняю их по центру / правому краю..
Так что в режиме редактирования текста он работает нормально..
Но после просмотра результата все 3 значения выглядят одинаково.
Изображения имеют следующие классы:
class="fr-dib fr-draggable fr-fil" // this should be left align
class="fr-dib fr-draggable" // this should be center align (doesn't work)
class="fr-dib fr-draggable fr-fir" // and this should be right align (doesn't work)
Я нашел способ исправить это, создав собственный CSS с такими строками: (Но, если честно, я думаю, что должен быть другой способ)..
.fr-draggable {
display: block;
margin-left: auto;
margin-right: auto
}
.fr-fil {
display: block;
margin-left: 0;
margin-right: 0;
}
.fr-fir {
display: block;
margin-left: auto;
margin-right: 0;
}
Может ли кто-нибудь помочь мне?
РЕДАКТИРОВАТЬ: мой сайт выглядит так:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" href="common/css/main.css" />
<link rel="stylesheet" type="text/css" href="common/css/custom.css" />
<link rel="stylesheet" type="text/css" href="common/css/adminPOST.css" />
<!-- FROALA CSS -->
<link href="common/plugins/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/colors.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/file.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/quick_insert.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/table.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/video.css">
<!-- JS -->
<script src="common/js/jquery-1.11.1.min.js"></script>
<script src="common/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="common/js/jquery.elastic.source.js"></script>
<script src="common/js/main.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script src="common/js/adminPOST.js"></script>
<!-- FROALA JS -->
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/languages/hu.js"></script>
</head>
<body>etc...</body></html>
ОБНОВИТЬ:
Я нашел стили изображений Froala в css / froala_style.css (или в минимальной версии):
/**
* Image style.
*/
a.fr-view.fr-strong {
font-weight: 700;
}
a.fr-view.fr-green {
color: green;
}
/**
* Link style.
*/
img.fr-view {
position: relative;
max-width: 100%;
}
img.fr-view.fr-dib {
margin: 5px auto;
display: block;
float: none;
vertical-align: top;
}
img.fr-view.fr-dib.fr-fil {
margin-left: 0;
}
.fr-fir {
margin-right: 0;
}
img.fr-view.fr-dii {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
}
img.fr-view.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
img.fr-view.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
img.fr-view.fr-rounded {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
img.fr-view.fr-bordered {
border: solid 10px #CCC;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Но что теперь? Должен ли я что-то изменить?: /
4 ответа
ОБНОВЛЕНИЕ 2:
Проблема решена.. пришлось написать class="fr-view" в div, где я показываю контент. Я такой тупой... извините, ребята!
Я думаю, что вы просто добавьте эту голову
<!-- Include external CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<!-- Include Editor style. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include external JS libs. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/js/froala_editor.pkgd.min.js"></script>
<!-- Initialize the editor. -->
<script> $(function() { $('textarea').froalaEditor() }); </script>
И твой тег тела
<div class="fr-view">
<!-- where you display your data -->
</div>
Для меня проблема не была в том числе froala_style.min.css файл. Однажды я включил, что выравнивание начало работать.
Я предполагаю, что вы используете Froala внутри серверной CMS; Вы также включили таблицу стилей Froala в таблицу стилей вашего приложения и все необходимые классы пространства имен?