WordPress 3.9+ TinyMCE 4 비틀기 : 스타일, 버튼, 글꼴, 드롭 다운 및 팝업 추가

WordPress 3.9에서 내가 가장 좋아하는 업데이트 중 하나는 TinyMCE 버전 4.0 코어를 만드는 것입니다. 새로운 TinyMCE는 외관이 깔끔해 보이고 (정말 WP 대시 보드와 일치) 정말 멋진 기능이 추가되었습니다. 새로운 TinyMCE와 함께 작동하려면 이전 테마와 플러그인을 많이 업데이트해야했기 때문에 API 그리고 멋진 것들을 알아내는 것. 아래에서는 TinyMCE의 기능을 확장하는 방법에 대한 몇 가지 예를 제공합니다. 모든 단계 또는 코드가 의미하는 바를 정확하게 설명하지는 않지만 (개발자를위한 것임) 테마 또는 플러그인에서 복사 / 붙여 넣기 한 후 그에 따라 조정할 수있는 정확한 코드를 제공합니다..


글꼴 크기 및 글꼴 모음 선택 추가

기본적으로 사용자 정의 글꼴 및 글꼴 크기는 TinyMCE 편집기에 추가되지 않습니다. 아래 함수는이 두 드롭 다운을 두 번째 행에서 편집기의 가장 왼쪽에 추가합니다. 다른 행에서 원하면‘mce_buttons_2’라는 위치를 변경하면됩니다 (예 : 3 번째 줄에‘mce_buttons_3’사용).

// 편집기에서 글꼴 크기 및 글꼴 모음 선택 활성화
if (! function_exists ( 'wpex_mce_buttons')) {
함수 wpex_mce_buttons ($ buttons) {
array_unshift ($ buttons, 'fontselect'); // 폰트 선택 추가
array_unshift ($ buttons, 'fontsizeselect'); // 글꼴 크기 추가 선택
$ 버튼 반환;
}
}
add_filter ( 'mce_buttons_2', 'wpex_mce_buttons');

사용자 정의 글꼴 크기 추가

기본적으로 글꼴 크기는 항상 이상적인 것은 아닌 pt 값으로 설정됩니다. 나는 픽셀 값 (12px, 13px, 14px, 16px. 등)을 사용하고보다 유연한 옵션을 제공하는 것을 선호합니다. 아래 기능은 드롭 다운 선택기의 기본 글꼴 크기 옵션을 변경합니다.

// mce 편집기 글꼴 크기 사용자 정의
if (! function_exists ( 'wpex_mce_text_sizes')) {
wpex_mce_text_sizes ($ initArray) 함수 {
$ initArray [ 'fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
$ initArray를 반환;
}
}
add_filter ( 'tiny_mce_before_init', 'wpex_mce_text_sizes');

사용자 정의 글꼴 추가

글꼴 모음 선택기의 기본 글꼴 옵션은 기본적으로 모두 “웹 안전”글꼴이지만 선택기에 글꼴을 더 추가하려면 어떻게해야합니까? 어쩌면 일부 구글 폰트? 아래 예를 살펴보면 정말 쉽습니다..

// 글꼴 목록에 사용자 지정 글꼴 추가
if (! function_exists ( 'wpex_mce_google_fonts_array')) {
함수 wpex_mce_google_fonts_array ($ initArray) {
$ initArray [ 'font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = 책 골동품, 팔라티노; ​​만화 Sans MS = 만화 산세 ms, 산세 리프; 택배 새 = 택배, 택배; 조지아 = 그루지야, 팔라티노; ​​헬 베티 카 = 헬 베티 카; 영향 = 충격, 시카고; 기호 = 기호; 타호 마 = 타마마 터미널 = 터미널, 모나코; Times New Roman = 타임즈 새로운 Roman, times; 트레 부셰 트 MS = 트레 부셰 트 ms, 제네바; 베르 다나 = 베르 다나, 제네바;
$ initArray를 반환;
}
}
add_filter ( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array');

위 코드의 목록에 “Lato”를 어떻게 추가했는지 확인하십시오. 그렇게 간단합니다! Total WordPress 테마에서는 실제로 테마 패널에 정의 된대로 사이트에서 사용되는 사용자 정의 글꼴을 반복하여 선택 상자에 추가하여 게시물 / 페이지를 편집하는 동안 사용할 수도 있습니다 (달콤함). 그러나 코드는 글꼴 모음 만 드롭 다운에 광고를 표시하여 마술처럼 스크립트를로드하지 않으므로 편집기에서 텍스트를 변경할 때 실제로 적용된 사용자 정의 글꼴을 볼 수 있습니다. 아래 코드는 다음과 같습니다.!

// 편집기와 함께 사용할 Google 스크립트 추가
if (! function_exists ( 'wpex_mce_google_fonts_styles')) {
함수 wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace ( ',', '% 2C', $ font_url));
}
}
add_action ( 'init', 'wpex_mce_google_fonts_styles');

형식 (스타일) 드롭 다운 메뉴 사용 및 새 스타일 추가

WP 3.8의 “스타일”드롭 다운을 기억하십니까? 꽤 멋지다! 포스트 에디터 내에서 사용할 멋진 클래스를 추가하는 데 사용할 수 있습니다 (실제로는 버튼, 색상 범위, 상자 등에 WPExplorer에서 사용합니다). 우리는 WP 3.9에서 스타일을 추가 할 수 있지만 새로운 TinyMCE 4.0에서“포맷”으로 이름이 바뀌 었으므로 조금 다르게 작동합니다. 아래는 형식 드롭 다운을 활성화하고 새 항목을 추가하는 방법의 예입니다..

워드 프레스 TInyMCE 형식 드롭 다운 메뉴

형식 드롭 다운 메뉴 활성화

이것은 실제로 WP 3.9 이전과 같은 방식으로 이루어졌지만 어떻게 해야할지 모르는 경우 공유하고 있습니다..

// MCE에 형식 드롭 다운 메뉴 추가
if (! function_exists ( 'wpex_style_select')) {
함수 wpex_style_select ($ buttons) {
array_push ($ buttons, 'styleselect');
$ 버튼 반환;
}
}
add_filter ( 'mce_buttons', 'wpex_style_select');

형식에 새 항목 추가

새 항목을 추가하는 것은 매우 쉽습니다. “$ settings [‘style_formats_merge ‘] = true;”를 추가 한 방법에 유의하십시오. 아래 코드를 사용하면 수정 사항이 다른 메뉴와 함께 형식 드롭 다운 메뉴에 추가됩니다. 전체 내용을 덮어 쓰지 말고 other (다른 플러그인에서도 사용하고 싶을 수도 있습니다).

// TinyMCE "포맷"메뉴 드롭 다운에 새로운 스타일 추가
if (! function_exists ( 'wpex_styles_dropdown')) {
함수 wpex_styles_dropdown ($ settings) {

// 새로운 스타일의 배열 만들기
$ new_styles = 배열 ​​(
정렬(
'title'=> __ ( '사용자 정의 스타일', 'wpex'),
'items'=> 배열 (
정렬(
'title'=> __ ( '테마 버튼', 'wpex'),
'selector'=> 'a',
'classes'=> '테마 버튼'
),
정렬(
'title'=> __ ( '하이라이트', 'wpex'),
'inline'=> 'span',
'classes'=> 'text-highlight',
),
),
),
);

// 기존 스타일과 새 스타일 병합
$ settings [ 'style_formats_merge'] = true;

// 새로운 스타일 추가
$ settings [ 'style_formats'] = json_encode ($ new_styles);

// 새로운 설정을 반환
반환 $ 설정;

}
}
add_filter ( 'tiny_mce_before_init', 'wpex_styles_dropdown');

간단한 MCE 버튼 추가

TinyMCE 편집기에 새 버튼을 추가하면 단축 코드에 특히 유용합니다. 사용자는 단축 코드를 기억할 필요가 없으므로 간단히 버튼을 클릭하여 삽입 할 수 있기 때문입니다. 모든 단축 코드에 대해 TinyMCE에 100의 버튼을 추가한다고 말하지는 않습니다 (개발자가 그렇게하는 것이 싫고 나쁜 습관이며 끔찍한 것처럼 보입니다) .1 또는 몇 개를 추가하면 통과시킬 수 있습니다. 묶음을 추가하려면 다음 섹션에서 설명하는대로 하위 메뉴를 만들어야합니다.

워드 프레스 MCE 새 버튼

PHP 코드 – WP에서 새로운 MCE 플러그인 선언

이 코드는 새 MCE 플러그인을 선언합니다. 자바 스크립트 파일“mce-button.js”의 위치를 ​​파일의 위치와 일치하도록 변경하십시오 (다음 하위 섹션에서도 코드를 제공함). 접두사“my”를 더 독특한 이름으로 바꿉니다.!

// 함수를 올바른 필터에 연결
함수 my_add_mce_button () {
// 사용자 권한 확인
if (! current_user_can ( 'edit_posts') &&! current_user_can ( 'edit_pages')) {
반환;
}
// WYSIWYG가 활성화되어 있는지 확인
if ( 'true'== get_user_option ( 'rich_editing')) {
add_filter ( 'mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ( 'mce_buttons', 'my_register_mce_button');
}
}
add_action ( 'admin_head', 'my_add_mce_button');

// 새 버튼에 대한 스크립트 선언
함수 my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array [ 'my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
$ plugin_array를 반환합니다.
}

// 에디터에서 새 버튼 등록
함수 my_register_mce_button ($ buttons) {
array_push ($ buttons, 'my_mce_button');
$ 버튼 반환;
}

JS 코드 – MCE에 버튼 추가

이 js 코드는 위의 “symple_shortcodes_add_tinymce_plugin”함수에서 스 니펫에 등록 된 js 파일에 들어갑니다. 편집기에 “New Button”이라는 새 텍스트 단추가 추가되고 클릭하면 “WPExplorer.com is awesome!”이라는 텍스트가 삽입됩니다. (물론이야).

(함수() {
tinymce.PluginManager.add ( 'my_mce_button', 함수 (편집기, url) {
editor.addButton ( 'my_mce_button', {
텍스트 : '새 버튼',
아이콘 : 거짓,
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
});
});
}) ();

새 MCE 버튼에 사용자 정의 아이콘 추가

위의 편집기에서 “새 버튼”으로 표시되는 새 버튼을 추가하는 방법을 보여주었습니다. 약간의 시간이 걸리므로 … 변경된 코드는 사용자 정의 아이콘을 추가하는 방법을 보여줍니다.

CSS로 스타일 시트로드

이 기능을 사용하여 관리자 패널에서 사용할 새 스타일 시트를로드하십시오. 일부 플러그인 / 테마는 이미 스타일 시트를 추가하고있을 수 있으므로 테마 / 플러그인이이를 수행하지 않으면이를 건너 뛰고 사용자 정의 CSS를 추가하고 js를 조정하십시오 (아래 참조)..

함수 my_shortcodes_mce_css () {
wp_enqueue_style ( 'symple_shortcodes-tc', plugins_url ( '/ css / my-mce-style.css', __FILE__));
}
add_action ( 'admin_enqueue_scripts', 'my_shortcodes_mce_css');

커스텀 CSS

이전에로드 된 스타일 시트를 추가하는 CSS입니다..

i.my-mce-icon {
배경 이미지 : url ( 'YOUR ICON URL');
}

자바 스크립트 조정

이제 텍스트 매개 변수를 제거하기 위해 이전에 추가 한 자바 스크립트를 간단히 조정하고 아이콘을 false로 설정하는 대신 사용자 정의 클래스 이름을 지정하십시오..

(함수() {
tinymce.PluginManager.add ( 'my_mce_button', 함수 (편집기, url) {
editor.addButton ( 'my_mce_button', {
아이콘 : 'my-mce-icon',
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
});
});
}) ();

하위 메뉴로 버튼 추가

MCE 버튼 하위 메뉴

앞에서 TinyMCE 막대에 많은 새 아이콘을 추가하는 것은 좋지 않은 생각이므로 아래 코드를 확인하여 자바 스크립트를 편집하여 사용자 정의 버튼의 하위 메뉴를 표시하는 방법을 확인하십시오. 당신이 그것을 실제로보고 싶다면 내 체크 아웃 간단한 단축 코드 비디오.

(함수() {
tinymce.PluginManager.add ( 'my_mce_button', 함수 (편집기, url) {
editor.addButton ( 'my_mce_button', {
텍스트 : '샘플 드롭 다운',
아이콘 : 거짓,
유형 : 'menubutton',
메뉴 : [
{
텍스트 : '항목 1',
메뉴 : [
{
텍스트 : '하위 항목 1',
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
},
{
텍스트 : '하위 항목 2',
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
}
]
},
{
텍스트 : '항목 2',
메뉴 : [
{
텍스트 : '하위 항목 1',
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
},
{
텍스트 : '하위 항목 2',
onclick : function () {
editor.insertContent ( 'WPExplorer.com는 굉장하다!');
}
}
]
}
]
});
});
}) ();

클릭시 팝업 창을 버튼에 추가

위의 예에서 모든 버튼은 단순히 “WPExplorer.com은 훌륭합니다!”라는 텍스트를 삽입한다는 것을 알 수 있습니다. 멋지지만 사용자가 텍스트에 삽입되는 내용을 변경할 수있는 팝업 창을 만드는 것은 어떻습니까? 이제는 달콤합니다! 그리고 이것은 Symple Shortcodes 1.6 버전에 추가되어 플러그인을 훨씬 사용자 친화적으로 만듭니다..

워드 프레스 MCE 팝업 창

(함수() {
tinymce.PluginManager.add ( 'my_mce_button', 함수 (편집기, url) {
editor.addButton ( 'my_mce_button', {
텍스트 : '샘플 드롭 다운',
아이콘 : 거짓,
유형 : 'menubutton',
메뉴 : [
{
텍스트 : 'Item 1',
메뉴 : [
{
텍스트 : '팝업',
onclick : function () {
editor.windowManager.open ({
제목 : '랜덤 쇼트 코드 삽입',
신체: [
{
유형 : 'textbox',
이름 : 'textboxName',
라벨 : '텍스트 상자',
값 : '30'
},
{
유형 : 'textbox',
이름 : 'multilineName',
라벨 : '여러 줄 텍스트 상자',
가치 : '여기에 많은 것을 말할 수 있습니다',
여러 줄 : 참,
최소 폭 : 300,
최소 신장 : 100
},
{
유형 : 'listbox',
이름 : 'listboxName',
라벨 : '목록 상자',
'값': [
{텍스트 : '옵션 1', 값 : '1'},
{텍스트 : '옵션 2', 값 : '2'},
{텍스트 : '옵션 3', 값 : '3'}
]
}
],
onsubmit : 함수 (e) {
editor.insertContent ( '[random_shortcode textbox = "'+ e.data.textboxName + '"multiline = "'+ e.data.multilineName + '"listbox = "'+ e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

이것은 시원하다. .. 지금 무엇?

좋은 질문! 이제이 멋진 수정 작업을 수행하고 WordPress 3.9의 새로운 TinyMCE와 호환되도록 서사시를 만들거나 플러그인 / 테마를 업데이트 할 차례입니다. 아래 의견에서 당신이 생각해 낸 것을 알려주십시오.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me