내가 원하는 것은 기본 전경색/배경색 대화 상자와 비슷한 것입니다. 차이점은 툴바에 직접 색상이있는 버튼이 있다는 것입니다. 따라서 하나의 플러그인에는 다양한 스타일 (색상)의 버튼이 있어야합니다. 다른 문제는이 기본 플러그인이 CSS color 및 background-color 속성을 설정한다는 것입니다. -클래스를 설정하는 CKEditor 플러그인
text <span class="fg red">colored text</span> text
과 색상으로 클릭
text <span class="bg blue">colored background</span> text
이 fg 클래스 (bg 클래스와 배경 색상)와 범위의 색상을 변경해야합니다 :이 같은 대신 클래스를 사용해야 이것을 어떻게 할 수 있습니까?
먼저 자신 만의 버튼을 추가해야합니다. 이 작업을 수행하는 플러그인의 소스를 확인하십시오. basicstyles/plugin.js. 각 버튼에 대한 명령을 작성한 다음 모든 버튼을 등록해야합니다. 단순한.
그런 다음 스타일 구현을 제안합니다. 지정된 선택/범위에서 정의 된 스타일을 적용/제거 할 수 있습니다. 스타일 정의에서 주어진 클래스에 span 요소를 적용하도록 지정할 수 있습니다. 확인 this style을 확인하십시오.
그리고 마지막 단계 -이 모든 것을 하나로 결합하십시오. 버튼과 관련된 명령은이 스타일을 적용/제거해야합니다. 하나를 사용할 준비가되었습니다. CKEDITOR.styleCommand 사용 here을 확인하십시오.
필요한 모든 것은 basicstyles 플러그인에 있으므로 참조하십시오. 당신이 인터페이스에 대한 유연한 경우
Pozdrawiam는 :
, 당신은 단지 "Styles" selector에 스타일을 추가 할 수 있습니다.
자신의 플러그인을 만드는 것보다 작업이 적을 것입니다. 특히 새로운 Stylesheet Parser Plugin을 사용할 수있는 CKEditor 3.6 이상을 사용하는 경우.
당신은 answer where you asked me to look at this question에서 플러그인을 사용하기 환영합니다.
"basicstyles"플러그인을 기반으로합니다. 내가 포함 된 주석을 보면 여러 개의 버튼과 여러 스타일을 추가 할 수 있다는 것을 알 수 있습니다.
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
addButtonCommand 메서드를 여러 번 호출해야합니다.
addButtonCommand('Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red);
addButtonCommand('Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue);
마지막 코드 줄은 구성에 추가 한 코드입니다.
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
당신은 또한 "colorbutton"플러그인을 기반으로 플러그인을 만들 수 있습니다 : 당신은 당신이 원하는 속성을 사용할 수 있습니다. 네이티브 전경색/배경색 대화 상자를 생성합니다.