WordPress 및 TinyMCE 비주얼 편집기에 사용자 정의 플러그인을 추가 할 수 있습니다. 다음 소스는 간단한 작동하고 모든 단축 코드 전후에 문자열을 추가하는 예입니다.
용법
단축 코드는 정규식을 통해 찾을 수 있으며 다른 단축 코드와 다른 표시에 필요한 경우 관련이 있습니다. 이 스크립트 <b>FB-TEST는 닫는 태그와 내용 앞뒤에 짧은 코드에 사용자 지정 내용을 추가 합니다. 마크 업, CSS 클래스를 사용하여 가시성을 만들 수도 있습니다. 중요한 것은 게시물 저장시이 콘텐츠를 제거하고에있는 스크립트에서 시작해야한다는 것입니다 PostProcess. 여기서 스크립트를 실행하고 함수를 통해 사용자 정의 컨텐츠를 제거하십시오 restoreShortcodes.
그러나 현재는 이것이 간단하며 각 요구 사항에 유효하지 않을 수 있습니다. 아마도 단축 코드를 init에 저장 하고이 저장된 변수로 복원해야합니다.
스크린 샷
결과를 이해하려면 예제로 스크린 샷을 참조하십시오.
출처
소스를 사용하려면 다음 디렉토리 구조가 필요합니다.
-- shortcode-replace
|--php file
|--assets
|-- js
|-- js file
처음에는 wp 환경에서 소스를 플러그인으로 포함하는 작은 PHP 파일이 있습니다. 플러그인의 기본 디렉토리에 그대로 두십시오 shortcode-replace.
<?php # -*- coding: utf-8 -*-
/**
* Plugin Name: Shortcode Replace
* Plugin URI:
* Description:
* Version: 0.0.1
* Text Domain:
* Domain Path: /languages
* License: MIT
* License URI:
*/
namespace FbShortcodeReplace;
if ( ! function_exists( 'add_action' ) ) {
exit();
}
if ( ! is_admin() ) {
return;
}
add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {
if ( 'post.php' === $page ) {
add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
}
}
function add_tinymce_plugin( $plugins ) {
if ( ! is_array( $plugins ) ) {
$plugins = array();
}
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.dev' : '';
$url = plugins_url( '/assets/js/fb_shortcode_replace.js', __FILE__ );
$plugins = array_merge( $plugins, array( 'fb_shortcode_replace' => $url ) );
return $plugins;
}
이 PHP 파일은 비주얼 에디터에서 자바 스크립트를 플러그인으로로드합니다. 플러그인은 관리자 페이지, 문자열 만 페이지에로드 post.php- 참조 if ( 'post.php' === $page ) {.
다음 소스는이라는 자바 스크립트 파일 fb_shortcode_replace.js입니다. assets/js/이 플러그인의 플러그인 디렉토리 안에 있는 디렉토리에 두십시오 .
tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {
var shortcode = /\[.+\]/g;
var additional_before = '<b>FB-TEST';
var additional_after = 'FB-TEST</b>';
function ifShortcode( content ) {
return content.search( /\[.+\]/ ) !== -1;
}
function replaceShortcodes( content ) {
return content.replace( shortcode, function( match ) {
return html( match );
} );
}
function restoreShortcodes( content ) {
content = content.replace( additional_before, '' );
content = content.replace( additional_after, '' );
return content;
}
function html( data ) {
console.log( data );
return additional_before + data + additional_after;
}
editor.on( 'BeforeSetContent', function( event ) {
// No shortcodes in content, return.
if ( ! ifShortcode( event.content ) ) {
return;
}
event.content = replaceShortcodes( event.content );
} );
editor.on( 'PostProcess', function( event ) {
if ( event.get ) {
event.content = restoreShortcodes( event.content );
}
} );
} );
도움이
추가 힌트
플러그인 Raph 는 HTML로 짧은 코드를 변환하여보고 간단하게 결과를 이해합니다. 이 맥락에서 도움이 될 수도 있습니다.
<code>이나<pre>태그 를 강조 표시하는 것은 간단 합니다.