it-swarm-vi.tech

Có cách nào để có được N số trình soạn thảo WYSIWYG trong một loại bài đăng tùy chỉnh không?

Có cách nào để có nhiều trình soạn thảo WYSIWYG cho một loại bài đăng tùy chỉnh không? Ví dụ: nếu tôi có bố cục 2 cột, tôi muốn có một trình soạn thảo cho một cột và một trình soạn thảo khác cho cột kia.

27
Paul Sheldrake

Giả sử loại bài đăng tùy chỉnh của bạn được gọi là Propertiesname__, bạn sẽ thêm hộp để giữ trình soạn thảo tinyMCE bổ sung của mình bằng mã tương tự như sau:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2 là ID mà hộp meta sẽ áp dụng cho nó, Second Column là tiêu đề mà hộp meta sẽ có, second_column_box là chức năng sẽ in ra HTML cho hộp meta, propertieslà loại bài đăng tùy chỉnh của chúng tôi, normalname vị trí của hộp meta và highchỉ định rằng nó phải được hiển thị càng cao trong trang càng tốt. (Thường bên dưới trình soạn thảo tinyMCE mặc định).

Sau đó, lấy đây làm ví dụ cơ bản nhất, bạn phải đính kèm trình soạn thảo tinyMCE vào textarea. Chúng tôi vẫn phải xác định hàm second_column_box sẽ in HTML cho hộp meta để đây là nơi tốt nhất để thực hiện điều này:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Có một vài vấn đề mà tôi không biết phải khắc phục như thế nào. Trình chỉnh sửa tinyMCE sẽ được lồng bên trong metabox, có thể không lý tưởng và nó sẽ không có khả năng chuyển đổi giữa chế độ chỉnh sửa HTML và Visual, cũng như các lệnh chèn phương tiện mà trình soạn thảo bài đăng thông thường có. Chuyển đổi các chế độ dường như được xác định là một chức năng mà đối số đầu tiên của nó là ID, nhưng nó cũng có vẻ được mã hóa thành tập lệnh wp-tinymce. Có thể sử dụng các hàm tinyMCE tích hợp để làm như vậy, nhưng điều này sẽ thay đổi vùng văn bản giữa tinyMCE đầy đủ và textarea cơ bản, mà không cần bất kỳ nút chèn HTML WP nào.

20
nobody

Đầu tiên: Cảm ơn lớn đến @Thomas McDonald cho câu trả lời của anh ấy ; Tôi cần phải tìm ra chính xác cùng một câu hỏi mà @Paul Sheldrake đã hỏi và mã của Thomas đã giúp tôi bắt đầu đi đúng hướng.

Thật không may, sau đó tôi bị kẹt vì Tôi cần thay đổi bố cục từ mặc định thành bố cục đơn giản và nhỏ hơn vì tôi cần sử dụng TinyMCE trong siêu dữ liệu phụ. Tôi đã tìm thực tế ở khắp mọi nơi để tìm giải pháp và đặc biệt là trên MoxieCode TinyMCE WikiMẹo TinyMCE & Cách diễn đàn và không tìm thấy gì! 1 Mọi thứ tôi tìm thấy đã giải thích cách đặt theme, width, height, v.v. bằng cách sử dụng tinyMCE.init({...}) nhưng rõ ràng bạn không thể sử dụng nó khi bạn sử dụng tinyMCE.execCommand("mceAddControl").

Tôi đã bối rối khi chạy qua bài viết nhiều trường hợp TinyMCE 3 trên một trang by Hamilton Chua , và anh ấy đóng đinh nó! Giải pháp của anh ấy là gán tinyMCE.settings trước khi gọi tinyMCE.execCommand("mceAddControl"), ví dụ:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

Điều đáng buồn là điều này thực sự không khó, nhưng nó không được ghi lại ở bất kỳ nơi nào khác mà tôi có thể tìm thấy. Thật tuyệt vời khi phát hiện ra hầu như không ai khác gặp phải vấn đề này.

Vì vậy, dù sao đoạn mã trên đã tạo ra TinyMCE thứ hai sau đây theo đúng định dạng/bố cục mà khách hàng của tôi cần:

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(nguồn: mikechinkel.com )

Vì vậy, nếu bạn đang sử dụng mã @Thomas McDonald ở trên, bạn thấy bạn có bất kỳ nhu cầu sửa đổi bố cục nào, hãy chắc chắn kiểm tra bài viết tuyệt vời của Hamilton Chua (cảm ơn Ham!):

P.S.Nếu bạn làm điều gì đó thậm chí hơi sai, TinyMCE có thể hoàn toàn không hiển thị. Ví dụ, trong trường hợp của tôi, lúc đầu tôi sử dụng theme: "simple" và tôi không nhận được gì và tôi phải mất hơn một giờ để nhận ra rằng tôi chỉ cần sử dụng theme: "advanced". Vì vậy, nếu bạn thấy TinyMCE không hoạt động, bạn chắc chắn sẽ thử thay đổi mọi thứ xung quanh, bạn có thể gặp vấn đề tương tự. (BTW, tôi chưa thử bất kỳ chủ đề nào khác cũng như không khám phá những chủ đề khác có sẵn; nếu bạn tìm thấy các chủ đề khác hoạt động, vui lòng để lại nhận xét bên dưới.)

Chú thích

1 : Rất bực bội! Sau hơn một tháng với WordPress Trả lời Bây giờ tôi đang mong đợi tìm câu trả lời cho tất cả các câu hỏi của mình có cùng mức chất lượng như ở đây và ở nơi khác tôi thường tìm sự thất vọng!

18
MikeSchinkel

Vì tôi thấy bài viết này là kết quả đầu tiên trong Google, tôi chỉ muốn nhận xét rằng WP hiện cung cấp một chức năng để xử lý loại tác vụ này.

Trong hàm add_meta_box, thêm mã sau ->

wp_editor( $content, $editor_id, $settings = array() );

Bất cứ nơi nào bạn muốn thêm trình soạn thảo TinyMCE

Tham khảo: wp_editor

1
ejhost

Tôi đã nhận được nó chỉ bằng cách thêm vào các thuộc tính của lớp theEditor.

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
0
Markus René Einicher

Trình soạn thảo mặc định, tinymce, được tải bởi một hàm trong wp-admin/gồm/post.php được gọi là wp_tiny_mce (); Tìm trong nguồn tại dòng 1350. Có một loạt các cài đặt ở dòng 1478. Một trong các tùy chọn rõ ràng chỉ định bộ chọn textarea để áp dụng trình soạn thảo javascript. Tôi đã đọc bài đăng này của Keighl trên blog của anh ấy chỉ cho tôi về nó. Đọc bài viết và có thể có cách gọi wp_tiny_mce () trong plugin phần quản trị và áp dụng nó vào vùng văn bản thứ hai bạn tạo.

0
kevtrout