Froala 이미지 정렬이 작동하지 않습니다.

Froala가 제 웹 사이트에 성공적으로 설치되었지만 이미지 배치가 작동하지 않는 것 같습니다. 왼쪽/오른쪽으로 정렬해도 이미지가 왼쪽에 있습니다.Froala 이미지 정렬이 작동하지 않습니다.

잘 작동 그래서 텍스트 편집 모드에서

는 ..

그러나 결과를보고 한 후

, 모든 3 aligments 같은 보인다.

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>

업데이트 : 나는 CSS/froala_style.css에서 Froala 이미지 스타일을 발견 (또는 분 버전)

/** 
* 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; 
}

하지만 이제 어떻게해야합니까? 뭔가를 바꿔야합니까? :/

출처

2016-09-01 Jacob Grahn

응용 프로그램에 대한 링크를 공유하거나 현재보고있는 문제를 재현 할 수있는 샘플 응용 프로그램을 만들 수 있습니까? – pdoherty926

백 엔드 CMS 내부에서 Froala를 사용하고있는 것으로 추측합니다. 응용 프로그램의 스타일 시트 및 필요한 네임 스페이스 클래스에 Froala의 스타일 시트도 포함 시켰습니까?

출처

2016-09-01 22:17:41 pdoherty926

나는 내 게시물을 편집했습니다. 다음과 같이 Froala의 스타일 시트를 모두 포함 시켰습니다 :/ –

코드에 필요한 네임 스페이스 클래스가 있습니까? 예 : 'img.fr-view.fr-dii'? [src] (https://github.com/froala/wysiwyg-editor/blob/7975753fd722b2358c6b64e3f25d9e24a13a3891/css/froala_style.css#L264-L272) – pdoherty926

아니요, 표시되지 않습니다. 나는 모든 파일 (notepad ++)에서 그들을 찾았습니까? 어떤 파일에 있어야합니까? 그리고 아마도 이러한 누락 된 스타일에 적합한 CSS 코드를 게시 할 수 있습니까? 나는 공식 사이트에서 froala를 다운로드했습니다. 어떻게이 스타일이 빠져 있다는 가능성이 있습니까? –

업데이트 2 : 해결

문제는 .. 제가 내용을 표시하고 있습니다 사업부에 클래스 = "FR-보기"를 작성했다. 나는 너무 바보 같아. 미안해!

출처

2016-09-03 15:57:30

예, 그게 "... 및 필요한 네임 스페이스 클래스"입니다. – pdoherty926

Froala 이미지 정렬이 작동하지 않습니다.

답변

관련 문제