워드 프레스에서 TinyMCE 편집기를 사용하여 [안내]

그들이 이름을 알지 못하더라도 WordPress를 사용하는 모든 사람들은 TinyMCE 편집기. 굵은 텍스트, 제목, 텍스트 맞춤 등을 만들기위한 단추가있는 콘텐츠를 만들거나 편집 할 때 사용하는 편집기입니다. 이것이이 게시물에서 우리가 살펴볼 내용이고, 나는 여러분에게 보여줄 것입니다. 기능을 추가하는 방법 과 어떻게 플러그인에서 사용할 수 있습니까?.

편집기는 TinyMCE라는 플랫폼 독립적 인 Javascript 시스템을 기반으로하며 웹의 여러 프로젝트에서 사용됩니다. 그것은 워드 프레스가 당신 자신의 버튼을 만들고 워드 프레스 내의 다른 위치에 추가 할 수있는 훌륭한 API를 가지고 있습니다.

사용 가능한 버튼 추가

WordPress는 TinyMCE에서 사용할 수있는 몇 가지 옵션을 사용하여 위 첨자, 아래 첨자 및 수평 규칙과 같은 특정 버튼을 비활성화하여 인터페이스를 정리합니다. 너무 많은 번거 로움없이 다시 추가 할 수 있습니다..

첫 번째 단계는 플러그인을 만드는 것입니다. 그렇게하는 방법에 대해 WordPress 코덱스를 살펴보십시오. 간단히 말해 wp-content / plugins 폴더에 'my-mce-plugin'이라는 폴더를 만들면됩니다. 같은 이름의 파일을 PHP 확장자로 만듭니다. my-mce-plugin.php.

그 파일 안에 다음을 붙여 넣으십시오 :

  
완료되면 WordPress에서이 플러그인을 선택하고 활성화 할 수 있어야합니다. 지금부터 모든 코드를이 파일에 붙여 넣을 수 있습니다..
 
그래서, 다시 기본 제공되지만 숨겨진 버튼을 사용 가능하게합니다.. 우리가 언급 한 3 개의 버튼을 활성화 할 수있는 코드는 다음과 같습니다.
 
 add_filter ( 'mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = '위 첨자'; $ buttons [] = 'subscript'; $ 버튼 [] = hr; return $ buttons;  
 
 
 
추가 할 수있는 버튼과 호출 할 버튼을 확인하려면 TinyMCE 문서에서 컨트롤 목록을 확인하십시오..
 
우리 자신의 버튼 만들기
 
처음부터 우리 자신의 버튼을 만드는 것은 어떻습니까? 대부분의 웹 사이트는 코드 세그먼트를 마크 업하는 데 매우 의미 론적 인 방법을 사용하는 코드 강조 표시에 프리즘을 사용합니다. 코드를 안에 랩핑해야합니다.  과 
 태그, 이런 :
 
$ 변수 = '값'
 
우리를 위해이 작업을 수행 할 버튼을 만들어 보겠습니다.!
 
이것은 3 단계 과정입니다. 버튼을 추가하고, 자바 스크립트 파일을로드하고, 실제로 자바 스크립트 파일의 내용을 작성해야합니다. 시작하자!
 
버튼을 추가하고 Javascript 파일을로드하는 것은 매우 간단합니다. 여기에 제가 완료하는 데 사용한 코드가 있습니다 :
 
 add_filter ( 'mce_buttons', 'pre_code_add_button'); 함수 pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; return $ buttons;  add_filter ( 'mce_external_plugins', 'pre_code_add_javascript'); 함수 pre_code_add_javascript ($ plugin_array) $ plugin_array [ 'pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 
이것에 대한 튜토리얼을 볼 때 나는 자주 2 가지 문제를 본다..
 
그들은 그 언급을 게을리했다. pre_code_add_button () 함수에 추가 된 버튼 이름은 pre_code_add_javascript () 함수에서 $ plugin_array 변수의 키와 같아야합니다.. 우리는 또한 자바 스크립트에서 같은 문자열을 사용한다. 나중에.
 
일부 자습서 추가 admin_head 훅을 사용하여 모든 것을 마무리하십시오.. 이것이 효과적 일지라도 요구되지는 않으며 코덱스에서는 사용하지 않기 때문에 피해야한다..
 
다음 단계는 우리의 기능을 구현하기 위해 자바 스크립트를 작성하는 것입니다. 여기에 내가 얻었던 것이있다. 
 과  태그를 한꺼번에 출력.
 
 (pre_code_button ', text :'프리즘 ', 아이콘 : false, onclick : function ) var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ 선택 +'
'; editor.insertContent (content + "\ n"); )); ); ) (); 
 
이것의 대부분은 TinyMCE 플러그인이 어떻게 코딩되어야하는지에 의해 결정됩니다. TinyMCE 문서에서 그것에 대한 정보를 찾을 수 있습니다. 지금 당장 당신이 알아야 할 것은 버튼의 이름 (pre_code_button) 2 호선과 3 호선에서 사용해야한다.. 아이콘을 사용하지 않으면 4 행의 'text'값이 표시됩니다 (잠시 후에 아이콘을 추가해 보겠습니다)..
 
onclick 메서드는이 버튼을 클릭 할 때 수행 할 작업을 지정합니다. 앞에서 설명한 HTML 구조에서 선택한 텍스트를 래핑하는 데 사용하고 싶습니다..
 
선택한 텍스트는 다음을 사용하여 잡을 수 있습니다. tinyMCE.activeEditor.selection.getContent (). 그런 다음 요소를 감싸서 삽입하고 강조 표시된 내용을 새 요소로 바꿉니다. 또한 코드 요소 뒤에 쉽게 작성할 수 있도록 새 행을 추가했습니다..
 
아이콘을 사용하려면 WordPress와 함께 제공되는 Dashicons 세트 중 하나를 선택하는 것이 좋습니다. 개발자 참조는 아이콘과 CSS / HTML / Glyph를 찾는 데 훌륭한 도구입니다. 코드 심볼을 찾아 그 밑에있는 유니 코드를 기록하십시오. f475.
 
플러그인에 스타일 시트를 첨부 한 다음 아이콘을 표시하는 간단한 스타일을 추가해야합니다. 먼저 WordPress에 스타일을 추가해 보겠습니다.
 
 add_action ( 'admin_enqueue_scripts', 'pre_code_styles'); 함수 pre_code_styles () wp_enqueue_style ( 'pre_code_button', plugins_url ( '/style.css', __FILE__));  
 
Javascript로 돌아가서 addButton 함수의 아이콘 옆에있는 “그릇된” 버튼을 갖기를 원하는 수업이 있습니다. pre_code_button.
 
이제 플러그인 디렉토리에 style.css 파일을 만들고 다음 CSS를 추가하십시오.
 
 i.mce-i-pre_code_button : before font-family : dashicons; 내용 : "\ f475";  
 
 
 
버튼에 mce-i- [여기 수업] 클래스를 사용하여 스타일을 타겟팅하고 추가 할 수 있습니다. 이전의 유니 코드 값을 사용하여 글꼴을 대시 콘 및 내용으로 지정하십시오..
 
다른 곳에서 TinyMCE 사용하기
 
플러그인은 종종 긴 텍스트를 입력하기위한 텍스트 영역을 만듭니다., 거기에 TinyMCE도 사용할 수 있다면 좋지 않을까요? 물론 할 수 있습니다. 아주 쉽습니다. wp_editor () 함수를 사용하면 admin에서 아무 곳이나 출력 할 수 있습니다. 다음과 같이 보입니다 :
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
첫 번째 매개 변수는 상자의 초기 내용을 설정합니다.. 예를 들어,이 옵션을 사용하여 데이터베이스에서 옵션을로드 할 수 있습니다. 두 번째 매개 변수는 HTML 요소의 ID를 설정합니다. 세 번째 매개 변수는 일련의 설정입니다. 사용할 수있는 정확한 설정을 읽으려면 wp 편집기 설명서를 살펴보십시오..
 
가장 중요한 설정은 텍스트 영역 이름. 이렇게하면 textarea 요소의 name 속성이 채워 지므로 데이터를 쉽게 저장할 수 있습니다. 옵션 페이지에서 편집자를 사용하는 방법은 다음과 같습니다.
 
$ settings = array ( 'textarea_name'=> 'buyer_bio');
 
wp_editor (get_option ( 'buyer_bio'), 'buyer_bio', $ settings);
 
이는 다음 코드를 작성하는 것과 동일하며 간단한 텍스트 영역이됩니다.
 
<?php get_option( 'buyer_bio' ) ?>
 
결론
 
TinyMCE 편집기는 사용자가 콘텐츠를 입력 할 때보다 융통성있게 사용할 수있는 사용자 친화적 인 방법입니다. 그것은 형식화하고 싶지 않은 사람들이 단지 그것을 타이프하고 그것으로 끝내도록 허락하고, 그것으로 주변에서 놀고 싶어하는 사람들은 그것을 바로 얻는 데 많은 시간을 할애 할 수 있습니다.
 
새로운 버튼과 기능을 만드는 것은 매우 모듈 방식으로 수행 할 수 있으며, 우리는 단지 그 가능성의 표면을 긁어 모았습니다. TinyMCE 플러그인이나 유스 케이스가 많은 도움이 된 경우에는 아래 주석에서 알려주십시오.!