ฉันจะรวมเครื่องมือแก้ไข TinyMCE ในส่วนหน้าได้อย่างไร

22

ฉันกำลังพยายามเพิ่มตัวแก้ไข TinyMCE ในส่วนหน้าของฉันจากที่ผู้ใช้สามารถโพสต์ แต่ไม่เคยมีโชคมาก่อน นี่คือรหัส:

PHP:

add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

javascript:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML:

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

ปัญหา: Texteditor ไม่ได้เพิ่มลงใน textarea แม้ว่าไฟล์ TinyMCE js กำลังโหลด

tinymce front-end

— Sisir
แหล่งที่มา

1

บางทีคุณอาจพบแรงบันดาลใจโดยดูจากรหัสของFrontend Editor

— mike23

17

ขอบคุณ wp 3.3 ตอนนี้เรามีwp_editor()ฟังก์ชั่นการทำเช่นนั้นแล้ว :)

— Sisir
แหล่งที่มา

1

ใช่ยกเว้นมันจะออกการแก้ไขโดยตรงซึ่งต่างจากการอนุญาตให้คุณใช้มันในรหัสย่อ ...

— cale_b

4

คุณสามารถใช้สิ่งนี้ในรหัสย่อโดยใช้ฟังก์ชั่น php ob_content ฟังก์ชั่นเหล่านี้ช่วยให้คุณสามารถบันทึกเอาต์พุตในตัวแปรได้ ชอบ: ob_start (); รวม (คงที่ :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); ส่งกลับ $ แม่แบบ;

— Tosh

2

editor_selector มีไว้สำหรับการกำหนดเป้าหมายคลาสไม่ใช่รหัส

นอกจากนี้เมื่อใช้editor_selectorจะต้องตั้งค่าmode: "specific_textareas"เพื่อให้สามารถใช้งานได้

ดูhttp://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

ดังนั้น JavaScript และ HTML ของคุณควรมีลักษณะดังนี้:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});

<textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

— maryisdead
แหล่งที่มา

0

Altough @maryisdead คำตอบอาจจะถูกต้องฉันจะให้คำแนะนำอื่นก่อนอื่นตรวจสอบให้แน่ใจว่ามีองค์ประกอบเดียวในหน้าของคุณที่มี id = "editor" จากนั้นตั้งค่า tinymce ดังนี้:

tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

ใช้ jQuery แทน $ ในโค้ด javascript ของคุณเพื่อให้แน่ใจว่าคุณกำลังเรียกเมธอดและตัวเลือก jQuery

— adrian7
แหล่งที่มา

0

editor_selector ใช้สำหรับคลาสและไม่ใช่สำหรับ id

คุณควรใช้ค่าของ editor_selector เป็นชื่อคลาสของ textarea

— Franklin Inbaraj
แหล่งที่มา