홈페이지 » WordPress » 워드 프레스에서 TinyMCE 편집기를 사용하여 [안내]

    워드 프레스에서 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);

    이는 다음 코드를 작성하는 것과 동일하며 간단한 텍스트 영역이됩니다.

    결론

    TinyMCE 편집기는 사용자가 콘텐츠를 입력 할 때보다 융통성있게 사용할 수있는 사용자 친화적 인 방법입니다. 그것은 형식화하고 싶지 않은 사람들이 단지 그것을 타이프하고 그것으로 끝내도록 허락하고, 그것으로 주변에서 놀고 싶어하는 사람들은 그것을 바로 얻는 데 많은 시간을 할애 할 수 있습니다.

    새로운 버튼과 기능을 만드는 것은 매우 모듈 방식으로 수행 할 수 있으며, 우리는 단지 그 가능성의 표면을 긁어 모았습니다. TinyMCE 플러그인이나 유스 케이스가 많은 도움이 된 경우에는 아래 주석에서 알려주십시오.!

    © Savtec
    유용한 정보 및 웹 개발 팁. 프로그래밍, 웹 디자인, CSS, HTML, JAVASCRIPT. WINDOWS를 구성하고 다시 설치하십시오. 처음부터 사이트 및 응용 프로그램 만들기