it-source

WordPress 플러그인에서 TinyMCE 호출

criticalcode 2023. 2. 16. 21:47
반응형

WordPress 플러그인에서 TinyMCE 호출

TinyMCE를 WordPress 플러그인에 추가하는 방법이 있습니까?

백엔드 스크립트에 텍스트 영역이 있는데 이 영역을 TinyMCE WYSIWYG 편집 가능한 필드로 만들고 싶습니다.그렇게 할 수 있는 방법이 있나요?

위시위그 시연 스크린샷

이 코드는 기능하지 않습니다.

<?php
    wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>

javascript 오류가 표시됩니다.

f is undefined

파이어버그 스크린샷:TinyMCE 오류

이것도 효과가 없었습니다.

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>

이것은 wp_editor() 함수를 사용하여 WordPress 3.3에서 훨씬 쉽게 수행할 수 있습니다.

TinyMCE 인스턴스를 테마 옵션 페이지에 추가하는 플러그인을 작업 중입니다.예를 들어 다음과 같습니다.

// Add TinyMCE visual editor
wp_editor( $content, $id );

여기서 $content는 저장된 콘텐츠이고 $id는 필드 이름입니다.TinyMCE 기능을 커스터마이즈하기 위한 옵션도 전달할 수 있습니다. 자세한 내용은 WordPress Codex를 참조하십시오.

캠든은 이미 대답했어요 하지만 만약 누군가 완전한 코드를 필요로 한다면...반드시 admin_head에 후크하고 admin_enqueue_scripts에 후크하면 jQuery 등의 다른 스크립트보다 먼저 로딩되므로 동작하지 않습니다.

add_action("admin_head","load_custom_wp_tiny_mce");
function load_custom_wp_tiny_mce() {

if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}


}

그런 다음 템플릿의 어딘가에 일반 텍스트 영역을 삽입합니다.

<textarea id="intro"></textarea>

다음 예는 나에게 도움이 됩니다.$a["elements"] 변수에서 선택할 텍스트 영역의 ID를 사용하십시오.

ID가 'intro'인 텍스트 영역이 있다고 가정합니다.

// attach the tiny mce editor to this textarea
if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}

?>

이제 작은 mce 함수 wp_tiny_mce가 해제되었습니다.최신 워드프레스의 경우 wp_editor를 사용합니다.

$initial_data='What you want to appear in the text box initially';
$settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'text_area_name'=>'extra_content',//name you want for the textarea
'quicktags' => true,
'tinymce' => true
);
$id = 'editor-test';//has to be lower case
wp_editor($initial_data,$id,$settings);

자세한 설명은 워드프레스 문서를 참조하십시오.

http://codex.wordpress.org/Function_Reference/wp_editor

(이것 덕분에) 여기저기가이드를 따라 Wordpress 3.0.5에서 무언가를 작동시키는 방법을 소개합니다.

<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
    wp_enqueue_script('tiny_mce');
}
wp_tiny_mce( false , // true makes the editor "teeny"
    array(
        "editor_selector" => "tinymce_data"
    )
);
?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.toggleVisual').click(function() {
            console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
        });
        $('a.toggleHTML').click(function() {
            console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
        });
    });
</script>

<form method="post" action="">
<ul>
  <li>
    <span id="submit"><input class="button" type="submit"></span>
    <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
  </li>
  <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
</ul>
</form>

저도 비슷한 문제가 있었는데class="theEditor"(처음에는) 저도 도움이 안 됐어요.디폴트 에디터가 포함되지 않은 커스텀 투고 타입을 사용하고 있었습니다(즉,supports인수에는 포함되지 않았다'editor').

그것은 워드프레스가 TinyMCE 코드를 포함하지 않았다는 것을 의미했다.제가 덧붙이자면

add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );

my functions.displays (의 코드에 근거해)the_editorGeneral-timeout.displays)에서는 정상적으로 동작했습니다(와class="theEditor").

워드프레스 3.3.1에서 테스트 및 작업

함수 또는 플러그인 파일에 추가합니다.

<?php
    add_filter('admin_head','ShowTinyMCE');
    function ShowTinyMCE() {
        // conditions here
        wp_enqueue_script( 'common' );
        wp_enqueue_script( 'jquery-color' );
        wp_print_scripts('editor');
        if (function_exists('add_thickbox')) add_thickbox();
        wp_print_scripts('media-upload');
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
        wp_admin_css();
        wp_enqueue_script('utils');
        do_action("admin_print_styles-post-php");
        do_action('admin_print_styles');
    }
?>

새 콘텐츠 추가 중..

<?php the_editor($id='content');?>

내 콘텐츠를 편집하기 위해

<?php the_editor($mySavedContent); ?>

여기에는 플러그인 또는 템플릿 파일 내에서 작은 MCE 텍스트 영역을 생성하기 위해 필요한 스크립트/css 및 코드가 포함됩니다.

이게 도움이 되길..

M

나는 이것 때문에 꽤 애를 먹었다.하루 종일 검색하여 수십 개의 코드 예를 시도했지만, MCE 값을 데이터베이스에 저장하는 Wordpress 테마 옵션을 얻을 수 없었습니다.jQuery 답변, 숨겨진 필드 등 모든 것을 시도해 보았습니다.그 중 어느 것도 나에게 통하지 않을 것이다. 아마도 내가 어딘가에서 발을 헛디뎠기 때문일 것이다.

드디어 다음 페이지를 찾았습니다.http://wptheming.com/options-framework-theme/

Github에서 다운로드하여 지시에 따라 설치합니다(간단).설치가 완료되면 테마 옵션의 마지막 탭에 MCE 에디터가 표시됩니다.테스트 단락을 입력합니다.이제 다운로드에서 index.php 파일을 열어 페이지에 각 항목을 포함하는 방법의 예를 확인하십시오.예를 들어 바닥글을 엽니다.php 및 코드를 추가합니다.

필요한 편집은 다음과 같습니다.

<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>

Wordpress의 함수 wpautop()은 wp 데이터베이스에 저장되지 않기 때문에 문단 태그에 추가합니다.저는 MCE의 내용을 표시하기 위해 그 코드를 바닥글에 넣었습니다.

언급URL : https://stackoverflow.com/questions/2855890/call-tinymce-in-a-wordpress-plugin

반응형