WordPress 비주얼 편집기에 사용자 정의 기능 추가-Word누르다-php.cn

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

Lisa Kudrow

풀어 주다： 2025-02-16 13:02:11

원래의

428명이 탐색했습니다.

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에 다음 코드를 추가하십시오<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/** * Plugin Name: TinyMCE Custom Class * Plugin URI: https://www.sitepoint.com * Version: 1.0 * Author: Tim Carr * Author URI: http://www.n7studios.co.uk * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor * License: GPL2 */ class TinyMCE_Custom_Class { /** * Constructor. Called when the plugin is initialised. */ function __construct() { } } $tinymce_custom_class = new TinyMCE_Custom_Class;

로그인 후 복사

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

이 명령은 몇 가지 세력 검사를 수행하여 사용자가 일부 텍스트를 선택하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!