고기능 WYSIWYG'Frala'의 간단한 소개.

운영하는 서비스에는 루마니아산 고성능 WYSIWYG'프라라'가 활용됐다.
편집기에서 고민하시는 분들은 꼭 참고하세요.언어를 JA로 지정하면 일본어화돼 현지화가 끝까지 관철된다.
프레젠테이션 화면 & 공식 사이트 여기 있습니다https://www.froala.com

가장 우수한 점은 실제 디스플레이 화면에 사용된 CSS를 읽어 미리 보기 화면 겸 입력 형식을 형성하는 것이다.뷰를 미리 볼 필요 없이 표시된 상태로 공개할 수 있습니다.
무료 및 유료
요금을 받으면'공짜 이용자'라는 표시가 사라지기 때문에 유료로 이용된다.1만 엔 정도를 매진하다.필드 단위이기 때문에 하위 필드도 마음대로 사용할 수 있다.
개발상들을 위한 지원도 받아들일 수 있지만 이 시간은 정해져 있다.연장하려면 별도의 요금이 필요합니다.버그나 기능이 설치되지 않은 경우'다음 TODO에 넣기'를 느끼며 진지한 대응을 할 수 있다.
그나저나 Rails에 게임이 발표됐는데 플로라 호스트의 작은 업그레이드 정도면 2, 3일 뒤에도 게임이 업데이트됩니다.
설계
다음은 Frala 공식 사이트의 샘플 형식입니다.디자인은 민낯입니다.민낯이라도 부츠트랩, 머티리얼 UI와 친숙하기 쉬워 기본적으로 직접 사용할 수 있다.

초기에는 Font Awesome의 아이콘을 사용했지만 자유롭게 변경할 수 있습니다.Glyphicon을 사용하는 사람도 비교적 빨리 모두 교체할 수 있다.
맞춤형 디자인
기본적으로 검은색 편집기나 흰색 편집기만 사용자 정의할 수 있습니다.
UI를 유지하려면 CSS로 덮어써야 합니다.이곳은 좀 고전적이다.여러가지 버튼을 누르면 해당 풍선이 나타납니다↓

예: 이미지 삽입 버튼→파일 업로드 버튼 또는 외부 URL에 지정된 텍스트 필드 또는 이미지 관리자 표시 버튼
이게, F12를 누르는 순간 DOM 자체가 리모브가 된다.너는 나에게 어떤 어려움이 있느냐고 물었다. 예를 들어 상술한 이미지의 허선틀을 실천틀로 바꾸려고 했지만 상응하는 학급 명칭을 찾지 못했다.JS에 뭐가 적용됐는지 조사하는 게 힘든 일이야.Slashdot을 조사하면서 선택기가 효율적이라는 것을 확인했다.
기능면

이미지는 클립보드에서 풀로 수신할 수 있음

스펀지 패드로 맞춤형 디스플레이 버튼

테이블에 삽입되거나 들여쓰기

화이트를 빼는 타이틀 스타일

을 준비했습니다.

색깔 구덩이 있음

잠깐만요.많은 일을 할 수 있다.각 기능은 각각 미니fy의 js에 의해 분할된다.사용하지 않는 기능은 읽기만 삭제하면 된다.
예: 응용 프로그램.js
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js← 그림 텍스트 기능이 필요하지 않으면 삭제 후 UI에서 사라짐
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/image.min.js
//= require plugins/line_breaker.min.js
//= require plugins/inline_style.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
//= require languages/ja.js
내가 운영하는 서비스는 표준 기능보다 20~30% 정도 삭감되었다.
특히 스펀지 스펀지 대응이 수월하다.
LG = ['fontFamily', 'fontSize', 'color', 'inlineStyle', 'bold']
XS = ['color', 'inlineStyle', 'bold']
이렇게 하면 각 화면 너비에 대한 표시 버튼을 정의할 수 있습니다.여기에는 Bootstrap이 말하는visible-lg과visible-xs의 처리를 통일시켰다.대체로 LG=대화면, MD=보통, SM=태블릿PC, XS=스마트폰의 느낌은 각자의 버튼을 미리 정의할 수 있다.
맞춤형 버튼은 간단하게 좋은 느낌을 줄 수 있다
사용자 정의 버튼은 비교적 간단하다.내가 운영하는 서비스에는 회원 자체의 미리 보기 그림 삽입 단추를 도구막대에 추가하고 그림 자체도lazylad용 (지연 읽기) 분류를 추가합니다.

① 대화를 표현할 때 업로드할 때마다 이미지 가용성이 떨어진다
② 회원이 프로필 이미지를 변경한 경우에도 자동으로 변경
이 문제를 해결하기 위해 설치된 사용자 정의 단추입니다.비록 상당히 제한된 기능이지만 그래도 비교적 간단하게 소개하였다.
또 표준 장비의 버튼에는 여러 가지 옵션이 있다.강제 nofollow, 강제 blank.이것은 손이 가려운 곳에 닿을 수 있는 정교한 편집기다.
그냥 직관적이지 않은 부분이 있어요.
업로드된 이미지의 초기 표시를 지정할 수 있습니다.다음 두 개를 보충하면 삽입된 이미지는width:100% 를 사용합니다.
imageResizeWithPercent: true
imageDefaultWidth: 100
정말%, 가짜 px, 좀 애매모호하다.너비를 100%로 설정하려면 세분화된 옵션을 조합해야 합니다.고기능이라는 것을 알아차렸다면, 알아차릴 때까지 시간이 걸렸다.깨닫기 전에 "image DefaultWidth:"100%"같은 것도 했어요(^^;)
곰곰이 생각해 보면 마우스의 크기를 조절할 수 있는 옵션도 있는데 문자열이라면 불편할 수도 있다.jQuery의 animate 함수처럼 문자열도 잘 만들어 주시면 감사하겠습니다.
뭐, 이렇게 비디오 버튼과 fontStyle 버튼 등 모든 기능의 옵션이 세분화되었다.프로라 개발자가 생각하는 유니버설성은 어떤 형식인지, 그 사고방식을 엿볼 수 있다.
Sticky 기능
점성이란 화면을 따라가는position:fixed보다 높은 기능으로 바닥까지 스크롤하면 바닥으로 들어가지 않는 위치에서 빠르게 멈출 수 있다.페이스북 사이드바도 끈적끈적하네.
이 점성 기능은 표준 장비로 도구 모음에 사용할 수 있다.

화면 맨 위에 초기 구성

스크롤 후 화면에 붙이기

화면에 textarea의 맨 아래가 표시되는 경우 따라가지 않음

그리고 스마트폰의 스크롤 값도 완전히 대응

이상의 소개는 아직 끝나지 않았으니 이번에는 먼저 소개하겠습니다.