포럼

Froala Editor에 대한 사용의견을 남기는곳 입니다.
데모는 edit mode demo, inline mode demo에서 체험해 보실 수 있습니다.

컴포넌트를 통한 이미지 삽입 시 class가 자동으로 붙는 문의

novelic 2018.01.05 조회 수 212 추천 수 0

미솔의 책 검색 컴포넌트 (알라딘 api 변경 버전)을 테스트 중입니다. 컴포넌트를 통한 이미지가 삽입될 시 fr-fil fr-dii 가 자동으로 붙는데, 혹시 이에 대한 설정 변경이나 설명을 찾아볼 수 있을까요? 



문제확인 url: https://lightnovel.kr/gamsang/467065

비밀글 기능이 안 되네요. 테스트 계정은 쪽지로 보내겠습니다.



Profile
novelic

환상소설과 SF소설을 좋아합니다.

12개의 댓글

Profile
라르게덴
2018.01.05

fr-fil fr-dii 등은 제거 할 수  없습니다. 이미지 플러그인을 사용하지 말아야 삽입이 안됩니다.

일단 급하신대로 아래의 style 정의를 제거 하시면 해결 됩니다.(제거 하셔도 다른 영향이 없습니다.)

추후 해당 문제는 개선해서 배포해보도록 하겠습니다.

modules/editor/styles/froalaeditor_style/style.css

@media (min-width: 1024px) {
.xe_content span.fr-img-caption.fr-dii.fr-fil,
.xe_content img.fr-dii.fr-fil,
.fr-view span.fr-img-caption.fr-dii.fr-fil,
.fr-view img.fr-dii.fr-fil
{
margin: 5px -15px 30px 0;
width: 50%;
-webkit-transform: translate(-50px, 20px);
-ms-transform: translate(-50px, 20px);
-o-transform: translate(-50px, 20px);
transform: translate(-50px, 20px);
}
.fr-content span.fr-img-caption.fr-dii.fr-fir,
.xe_content img.fr-dii.fr-fir,
.fr-view span.fr-img-caption.fr-dii.fr-fir,
.fr-view img.fr-dii.fr-fir
{
margin: 5px 0 30px -15px;
width: 50%;
-webkit-transform: translate(50px, 20px);
-ms-transform: translate(50px, 20px);
-o-transform: translate(50px, 20px);
transform: translate(50px, 20px);
}
}


댓글
Profile
novelic
2018.01.05
@라르게덴

네 일단 스타일 제거하였습니다. 감사합니다. 

댓글
Profile
novelic
2018.01.05
@라르게덴

아 그리고 &copy를 ©로 바꾸는 거 url엔 적용 안 되게 하려는데 special_characters.min.js 파일을 수정해야 하나요? 파일을 잘 못 찾겠네요.

https://www.froala.com/wysiwyg-editor/docs/options#specialCharactersSets


댓글
Profile
라르게덴
2018.01.05
@novelic

죄송합니다. 이해를 못했어요.

조금 더 자세히 설명 부탁합니다.

댓글
Profile
novelic
2018.01.05
@라르게덴

주소상에서 &copy가 ©로 치환됩니다. ( http://www.aladin.co.kr/shop/wproduct.aspx?ItemId=106747439%C2%A9Paper=1&ttbkey=ttblitale31608001&start=api ) 찾아보니 specialCharactersSets 부분 옵션의 문제였고, 지금 더 찾아보니 plugin.pkgd.min.js 파일 내에서 { 'char': '©', desc: 'COPYRIGHT SIGN' } 부분을 지우면 해결되는 문제 같네요.


 

댓글
Profile
라르게덴
2018.01.05
@novelic

그 옵션은 특수문자 고요. 아래를 수정해서 재적용 해야합니다.

https://www.froala.com/wysiwyg-editor/docs/options#entities


댓글
Profile
novelic
2018.01.05
첨부 (2)
@라르게덴

index.php?module=admin&act=dispEditorAdminIndex

추가설정에서 entities:&copy를 누르고 저장하면 아래처럼 바뀝니다.

 (작은따옴표로 감싸도 같은 증상입니다.)

그리고 잘못된 추가 설정값으로 저장되었으니 게시판 에디터는 뜨지 않습니다. 파일을 직접 수정해야 하는 건가요.

댓글
Profile
novelic
2018.01.05
@라르게덴

아 파일 이것저것 수정하다가 뭔가 꼬인 것 같네요...; 원본 파일로 다시 덮어씌우고 좀 더 자세하게 알아보겠습니다.

댓글
Profile
라르게덴
2018.01.05
@novelic

웹상에서 앤티티를 바꿀 수 없다면 스크립트로 수정해볼 수 있습니다. 아래의 주소에 마지막 줄의 코드를 특정 스크립트 안에 삽입하시고 그곳에서 수정해보세요.

https://romanesque.me/tutorial/6426

댓글
Profile
novelic
2018.01.05
@라르게덴

window.fr_custom_opts = jQuery.extend(window.fr_custom_opts,
{
entities: '©¥¦'
});

이렇게 js 파일을 만들어서 레이아웃 단에서 로드했는데 안 되네요. 뭔가 잘못되었나요. 그리고 코드하이라이터 어떻게 쓰나요... 

댓글
Profile
novelic
2018.01.05
@novelic

아 완전히 새로 다 지우고 새로 설치해서 해보니 상기한 문제가 없이 의도했던대로 제대로 작동하네요. 저도 대체 무엇이 문제였는지 도통 모르겠습니다... 라르게덴 님의 시간을 뺏아서 죄송합니다. 관련 오작동이 다시 발생하거나 상황 재현이 될 때에 다시 말씀드리겠습니다. (ㅠ ㅠ)

댓글
Profile
라르게덴
2018.01.05
@novelic

상황은 인지했고요. entities 라는 기능은 소스코드 상에서 &나 특정기호가 입력 시 발생한 기호대로(즉, © 대로) 변환해주는 기능입니다. 하지만 link나 url 플러그인이 사용될때 이 기능과 연계되지 못하고 있어서 화면 표기가 특수기호로 변환되어 버립니다. 또 href안의 값은 아예 entities로 변환을 안하는 것을 보니 해당 내용은 froala의 버그 같습니다.

일단 링크 삽입 기능을 통해 한번 생성 한 뒤 수정해주면 입력된 내용이 유지되니 그렇게 사용해보시고요. 이 문제는 ckeditor와 비교해 봐도 명확히 차이가 있으니 한번 보고 froala로 이슈 올리겠습니다.

댓글
에디터 에디터
에디터
쓰기
번호 제목 글쓴이 날짜
98 ro.blog.js도 어마어마했네요 1 profile 이온디 2018.01.12
97 썸머노트의 이미지 붙여넣기 기능 중에서 6 profile 이온디 2018.01.12
96 혹시 글이 너무 길어지면 잘리는 증상이 있나요? 1 Artistudy 2018.01.12
95 데모 체험해보다가 의견남겨봅니다! 8 톡시 2018.01.11
94 특정 에디터 컴포넌트를 밖으로 빼내는 방법 있을까요? 5 profile novelic 2018.01.07
컴포넌트를 통한 이미지 삽입 시 class가 자동으로 붙는 문의 12 profile novelic 2018.01.05
92 로마네스크 블로그 v1.1.0에서 새로운 기능 imagePasteProcess profile 라르게덴 2018.01.02
91 자바스크립트 모음 사이트 1 profile 이온디 2018.01.01
90 인비저블 캡차 배포는 혹시 안하시나요? 6 profile 이온디 2017.12.26
89 소식 3개(내년 과제) profile 라르게덴 2017.12.25
88 [해결] 레이어에 인비저블 리캡챠 작동시키기 3 profile 이온디 2017.12.22
87 [해결] Invisible reCAPTCHA - XE 질문드립니다. profile 이온디 2017.12.22
86 프로알라 에디터 구매 문의 입니다 2 마인드핵 2017.12.15
85 이미지 업로드 질문 드립니다. 1 마인드핵 2017.12.13
84 현재 진척 상황 보고(프로알라 2.7.3이 배포되었습니다.) 4 profile 라르게덴 2017.12.12
83 테이블 삽입시 border=0 적용문제 1 비여 2017.12.04
82 수개월 프로알라 에디터를 사용하면서 두가지 의견. 3 pock 2017.11.26
81 포스타입의 글쓰기 화면입니다. 1 profile 이온디 2017.11.21
80 print 시 글자 색이 회색으로 나옵니다. 1 비여 2017.11.10
79 pasteAllowedStyleProps을 사용하지 않고 소스스타일이 그대로 적용할 방법은 없을까요? 3 profile 이온디 2017.11.02
쓰기
Find Account

  • 이메일 주소로 계정 찾기

    아이디/비밀번호는 가입시 등록한 메일 주소로 알려드립니다. 가입할 때 등록한 메일 주소를 입력하고 "ID/PW 찾기" 버튼을 클릭해주세요.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.

  • 인증메일 재발송

    인증 메일을 받지 못한 경우 다시 받을 수 있습니다.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.