WordPress 비주얼 편집기에 사용자 정의 기능 추가

키 테이크 아웃

Tinymce 편집기 컨트롤로 구동되는 WordPress Visual Editor는 CSS 클래스에서 선택한 텍스트를 랩핑하는 사용자 정의 TinyMce 플러그인 작성 및 등록과 같은 고유 한 기능을 추가하도록 사용자 정의 할 수 있습니다. 사용자 정의 기능을 추가하려면 WordPress 웹 사이트에서 Tinymce 플러그인을 만들고 TinyMce 작업 및 필터를 등록하고 Tinymce 필터 (MCE_External_plugins 및 MCE_Buttons)를 사용하여 외부 Tinymce 플러그인을로드하고 Tinymce 도구바에 버튼을 추가/제거해야합니다. . 는 tinymce에 버튼을 출력하는 방법과 클릭 할 때 수행 할 작업을 알려주는 JavaScript 플러그인을 만들어 사용자 정의 기능을 추가 할 수 있습니다. 여기에는 Tinymce 플러그인 관리자 클래스를 사용하여 플러그인을 TinyMce에 추가하고 AddButton 함수를 사용하여 버튼을 등록하고 AddCommand 함수를 사용하여 명령을 등록해야합니다. 플러그인을 사용하여 코딩하지 않고 WordPress 비주얼 편집기를 사용자 정의 할 수 있습니다. 이 목적을위한 인기있는 플러그인에는 Tinymce Advanced, WP Edit 및 Ultimate Tinymce가 포함됩니다.

컨텐츠 편집기는 WordPress의 핵심 부분입니다. 이를 통해 사용자는

visual wysiwyg (당신이 얻는 것)보기에서 컨텐츠, 갤러리 및 비디오를 만들고 관리 할 수 ​​있습니다. 는 또한 view와 함께 제공되며,이를 통해 사용자는 컨텐츠 내에 html을 삽입하거나 수정할 수 있습니다. WordPress Visual Editor는 Wysiwyg보기를 제공하는 Tinymce 편집기 컨트롤과 다음을 볼 수있는 서식 버튼으로 구동됩니다.

Tinymce API 및 WordPress의 필터 후크 덕분에 WordPress 비주얼 편집기에 자신의 기능을 추가 할 수 있습니다. 특히 CSS 클래스에서 선택한 텍스트를 감싸는 사용자 정의 TinyMce 플러그인을 작성하고 등록하는 방법을 살펴 봅니다. tinymce 플러그인 만들기 WordPress 웹 사이트에서 wp-content/plugins/tinymce-custom 클래스 폴더를 만듭니다 우리는 플러그인 파일을 여기에 저장하므로 다음 코드를 사용하여 tinymce-custom class.php라는 파일을 만듭니다.

이것은 WordPress의 플러그인에 대한 정보를 제공하고 TinyMce 작업 및 필터를 등록 할 수있는 구성을 설정합니다. <ym> WordPress tinymce 필터 <provides provides> tinymce는 비주얼 편집기 도구 모음에 요소를 등록하기위한 두 가지 주요 필터를 제공합니다. <li> <lcce_external_plugins : tinymce> mce_buttons : tinymce 도구 모음에 단추를 추가/제거하는 데 사용됩니다 (https://codex.wordpress.org/plugin_api/filter_reference/mce_buttons, <these> 우리는이 필터를 호출하기 전에 WordPress 관리 화면에 있는지 확인하고 싶습니다. __construct에 다음 코드를 추가하십시오<pre class="brush:php;toolbar:false"><span>/** </span><span> * Plugin Name: TinyMCE Custom Class </span><span> * Plugin URI: https://www.sitepoint.com </span><span> * Version: 1.0 </span><span> * Author: Tim Carr </span><span> * Author URI: http://www.n7studios.co.uk </span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor </span><span> * License: GPL2 </span><span> */ </span> <span>class TinyMCE_Custom_Class { </span> <span>/** </span><span> * Constructor. Called when the plugin is initialised. </span><span> */ </span> <span>function __construct() { </span> <span>} </span> <span>} </span> <span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span> 다음으로, setup_tinymce_plugin 함수를 추가하여 몇 가지 추가 점검을 수행하십시오.

이는 WordPress 사용자가 현재 로그인하여 게시물이나 페이지를 편집 할 수 있는지 확인합니다. 그들이 할 수 없다면, 비주얼 편집기를 볼 수 없기 때문에 해당 사용자를 위해 TinyMce 플러그인을 등록 할 필요는 없습니다. 그런 다음 일부 WordPress 사용자가 프로필 를 통해이를 끄므로 사용자가 비주얼 편집기를 사용하고 있는지 확인합니다. 다시 말하지만, 사용자가 비주얼 편집기를 사용하지 않으면 다른 일을 할 필요가 없으므로 기능을 반환합니다 (exit). 위의 점검이 통과되면 두 개의 Tinymce WordPress 필터가 등록됩니다 - MCE_EXTERNAL_PLUGINS 및 MCE_BUTTONS. 첫 번째 필터 인 MCE_EXTERNAL_PLUGINS를 사용하면 시각적 편집기와 상호 작용할 tinymce javaScript 플러그인 파일을 등록 할 수 있습니다. 클래스 내 에서이 필터에 대한 함수 호출을 추가하겠습니다 :

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

여기, 우리는 모든 tinymce javaScript 플러그인을 포함하는 $ plugin_array에 JavaScript 파일을 등록합니다. 두 번째 필터 인 MCE_BUTTONS - TinyMce는 비주얼 편집기에 버튼을 등록하고 싶다고 말합니다. 다시,이 필터에 대한 기능 호출을 추가하겠습니다.

이것은 tinymce 버튼 (custom_class)의 프로그래밍 방식 이름을 등록합니다. JavaScript 플러그인 만들기 MCE_EXTERNAL_PLUGINS를 불렀을 때 JavaScript 파일을 참조했습니다. 이제 해당 파일을 만들고 JavaScript 코드를 추가해야합니다. 이것은 TinyMce가 버튼을 출력하는 방법과 클릭 할 때해야 할 일을 알려줍니다. > 플러그인 폴더에서 tinymce-custom class.js라는 새 파일을 만들고 다음 코드를 삽입합니다.

이 JavaScript 함수는 몇 가지 작업을 수행합니다 는 tinymce 플러그인 관리자 클래스를 호출합니다. 특히 ADD 함수를 사용하여 TinyMce에 플러그인을 추가합니다. 추가 루틴 내에서 편집기 인스턴스를 통해 시각적 편집기에 액세스 할 수 있습니다. 제목, 명령 및 아이콘 이미지로 구성된 AddButton 함수를 사용하여 버튼을 등록합니다. 마지막으로, 우리는 AddCommand 함수를 사용하여 명령을 등록합니다.이 기능은 버튼을 클릭했을 때 알려주는 경고를 보여줍니다.

.

우리는 플러그인 폴더 내에 icon.png 이미지도 포함시켜야합니다. 버튼에 사용될 아이콘 이미지입니다.

코드를 저장하고 WordPress Administration> 플러그인에서 플러그인을 활성화하십시오. 다음, 페이지 나 게시물을 만들거나 편집하면 아이콘이있는 버튼을 볼 수 있기를 바랍니다.

버튼을 클릭하면

버튼이 클릭되었습니다!

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

알림 :

실행하라는 명령을 정의합니다 경고를 프롬프트로 바꾸겠습니다. 사용자에게 CSS 클래스 이름을 요청하여 시각적 편집기에서 선택한 텍스트를 감싸고 자합니다.

이 명령은 몇 가지 세력 검사를 수행하여 사용자가 일부 텍스트를 선택하고 CSS 클래스 이름을 입력하고 프로세스를 취소하지 않았는지 확인합니다.

. 해당 점검이 통과되면 편집기의 execcommand 함수를 실행하여 선택한 텍스트를 대체하여 입력 된 CSS 클래스를 포함하는 SPAN 태그에 랩핑 한 선택한 텍스트를 교체합니다. 모든 것이 작동하면 '텍스트'보기로 전환하면 선택한 텍스트가 이제 스팬 태그로 래핑되는 것을 보게됩니다.

결론 우리는 Tinymce Visual 편집기에 버튼을 추가하기 위해 WordPress 플러그인을 만들었습니다. 이 과정에서 우리는 TinyMce와의 통합을 위해 WordPress가 사용하는 필터와 버튼을 추가하고 클릭하면 작업을 수행하는 데 필요한 JavaScript 코드를 탐색했습니다. 전체 소스 코드를 다운로드하려면 Github 리포지토리 또는 직접 지퍼 파일 다운로드 링크를 방문하십시오. 다음 기사에서는 TinyMce 플러그인을 추가로 사용자 정의하기 위해 취할 수있는 몇 가지 고급 단계를 다룰 것입니다. WordPress 비주얼 편집기에 사용자 정의 기능 추가에 대한 자주 묻는 질문 (FAQ) WordPress 비주얼 편집기에 사용자 정의 버튼을 추가하려면 TinyMce API를 사용하여 WordPress 비주얼 편집기에 사용자 정의 버튼 추가를 달성 할 수 있습니다. 이 API를 사용하면 툴바에 새 버튼을 추가하고 기능을 정의 할 수 있습니다. WordPress 설치의 플러그인 디렉토리에 새 플러그인 파일을 만들고 'MCE_BUTTONS'필터를 사용하여 버튼을 추가 할 수 있습니다. 그런 다음 'MCE_EXTERNAL_PLUGINS'필터를 사용하여 플러그인의 JavaScript 파일을로드 할 수 있습니다.이 파일은 버튼의 기능을 정의 할 수 있습니다.

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

코딩하지 않고 WordPress 비주얼 편집기를 사용자 정의 할 수 있습니까? 플러그인을 사용하여 코딩하지 않고 WordPress 비주얼 편집기를 사용자 정의하십시오. 도구 모음에 버튼을 추가, 제거 또는 재 배열 할 수있는 여러 플러그인이 있습니다. 이 목적을위한 인기있는 플러그인은 Tinymce Advanced, WP Edit 및 Ultimate Tinymce가 포함됩니다.

WordPress Visual Editor에 사용자 정의 스타일을 추가하려면 WordPress Visual에 사용자 정의 스타일을 추가 할 수 있습니다. 'tiny_mce_before_init'필터를 사용하여 편집기. 이 필터를 사용하면 'Style_formats'옵션이 포함 된 Tinymce 설정 배열을 수정할 수 있습니다. 이 옵션에 맞춤 스타일을 배열로 추가 할 수 있으며 각 스타일을 정의 할 수 있습니다. 각 스타일에는‘제목’,‘블록’,‘클래스’및‘래퍼’속성이 포함되어야합니다. tinymce 란 무엇이며 WordPress Visual Editor와 어떤 관련이 있습니까?

Tinymce는 플랫폼 독립적 인 웹 기반 JavaScript HTML Wysiwyg 편집기 컨트롤입니다. WordPress Visual Editor에 전원을 공급하는 기본 소프트웨어입니다. Tinymce API를 이해하고 사용하면 WordPress Visual Editor에 사용자 정의 기능을 추가 할 수 있습니다.

WordPress Visual Editor에 사용자 정의 글꼴을 추가하려면 어떻게해야합니까?

사용자 정의 글꼴을 추가 할 수 있습니다. 'MCE_CSS'필터를 사용하여 WordPress 비주얼 편집기에. 이 필터를 사용하면 편집기에 추가 CSS 파일을 추가 할 수 있습니다. 사용자 정의 글꼴을 가져오고 사용하는 클래스를 정의한 CSS 파일을 작성한 다음 'MCE_CSS'필터를 사용 하여이 파일을 편집기에 추가 할 수 있습니다. ?

예, WordPress Visual Editor는 완전히 반응이 좋으며 모바일 장치에서 사용할 수 있습니다. 그러나 화면 크기가 작기 때문에 '주방 싱크'드롭 다운에 일부 도구 모음 버튼이 숨겨 질 수 있습니다.

WordPress Visual Editor에 사용자 정의 형식을 추가 할 수 있습니까?

추가 할 수 있습니다. 'tiny_mce_before_init'필터와 'style_formats'옵션을 사용하여 WordPress 비주얼 편집기에 대한 사용자 정의 형식. 사용자 정의 형식을 각각 형식을 정의하는 배열 배열로 정의 할 수 있습니다. 각 형식에는 '제목', '인라인', '클래스'및 '래퍼'속성이 포함되어야합니다.

WordPress Visual Editor를 비활성화하려면 어떻게해야합니까?

WordPress Visual을 비활성화 할 수 있습니다. 편집자로 이동하여 WordPress Admin 영역에서 프로필을 작성하고 옵션을 작성할 때 '시각적 편집기 비활성화'옵션을 확인하십시오.

WordPress Visual Editor에서 바로 코드를 사용할 수 있습니까?

예, 예, 예, WordPress Visual Editor에서 단축 코드를 사용할 수 있습니다. 편집기에 바로가 코드를 입력하면 게시물이 표시되면 처리됩니다.

WordPress Visual Editor에 테이블을 추가하려면 WordPress에 테이블을 추가 할 수 있습니다. 도구 모음에서 '테이블'버튼을 사용하여 비주얼 편집기. 이 버튼이 표시되지 않으면 TinyMce가 고급과 같은 플러그인을 추가하여 추가해야 할 수도 있습니다.

위 내용은 WordPress 비주얼 편집기에 사용자 정의 기능 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!