Giải pháp kết xuất Shortcodes trong Admin Editor

Tôi đã hỏi câu hỏi này khoảng một năm trước và tôi hy vọng có một loại giải pháp đơn giản nào đó sẽ cho phép tôi đạt được mục tiêu của mình. Vì vậy, ở đây nó đi:

Tôi thường sử dụng mã ngắn trong Trình chỉnh sửa quản trị nhưng khi tôi chuyển mã này sang máy khách, họ thường không hiểu cách thức hoạt động của chúng.

Những gì tôi đang tìm kiếm là một giải pháp đơn giản sẽ tự động hiển thị đầu ra liên kết của các mã ngắn trong trình soạn thảo WYSIWYG của quản trị viên.

Từ góc nhìn trực quan, tôi muốn điều này hiển thị tương tự như khi dòng "thêm" hiển thị hoặc khi một hình ảnh được hiển thị trong trình chỉnh sửa. Điều này có nghĩa là người dùng sẽ thấy đầu ra nhưng chỉ có thể xóa nó chứ không thể chỉnh sửa nội dung của shortcode được kết xuất.

Thực sự không quá tệ để làm những gì bạn yêu cầu. Điều này sẽ khiến bạn mất khoảng một giờ để làm việc đầu tiên và 10 phút để thực hiện những việc tiếp theo.

Cuối cùng, những gì bạn sẽ làm là tạo một plugin TinyMCE. Đây là những gì bạn nên tự mình bắt đầu:

1. Hướng dẫn chung để tạo một plugin tinymce
2. Mã ví dụ từ WordPress Core
3. Hướng dẫn chung về cách thêm plugin TinyMCE vào WordPress. Tôi tìm thấy cái này , có vẻ đầy đủ.

Bây giờ bạn có tất cả các công cụ để hoàn thành! Trong tất cả điều này, mã sẽ được bạn quan tâm nhất là khối này trong mã ví dụ WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Ở đây, shortcode cho một bộ sưu tập được thay thế bằng một imgthẻ. Các imgthẻ có lớp wp-gallery, mà được theo kiểu bằng CSS tìm thấy ở đây .

Chỉnh sửa 2016-04-06: Cập nhật nội dung và liên kết cho TinyMCE 4 và WordPress 4.4

Đây không phải là một câu trả lời hoàn chỉnh, chỉ là một hướng thiết kế. Tôi nghĩ rằng cách tiếp cận tốt nhất là một cái gì đó như thế này:

Trong bài chỉnh sửa quản trị

Rip tất cả các mã ngắn từ bài đăng đã lưu và hiển thị nó trong một metabox, ngoài trình chỉnh sửa . Làm cho shure chúng xuất hiện theo thứ tự giống như các đoạn mã ngắn xuất hiện trong Trình chỉnh sửa nhỏ.

Trong API javascript tinyMCE

Tạo một hàm jQuery, khi người dùng nhấp vào một shortcode, nó sẽ hoán đổi HTML từ metabox sang trình chỉnh sửa. Và ngược lại. Các đơn đặt hàng sẽ ổn khi kết hợp, nhưng tôi không chắc chắn về việc bao gồm các mã ngắn. Tuy nhiên, có nhiều cách để thiết kế một kết nối ID đẹp. Các bản cập nhật của shortcodes có thể được thực hiện một cách nhanh chóng với ajax.

Không bao giờ lưu trạng thái shortcode được kết xuất

Trước khi chỉnh sửa công tắc, lưu bản nháp, tự động phát hành và xuất bản, thực hiện lệnh gọi API để kích hoạt khôi phục, do đó trạng thái mã ngắn được kết xuất không bao giờ được lưu ...

Điều này có thể được thực hiện, nhưng bạn cần phải quen thuộc với API tinyMCE để hiểu vị trí và thời điểm truy cập nội dung của trình chỉnh sửa và nối vào các hành động javascript trước khi 'lưu' và hơn thế nữa.

Có thể có một số trình soạn thảo tinyMCE trên cùng một bài chỉnh sửa tải trang.

Phần khôi phục có thể được điều tra bằng cách xem [gallery]beaviour shortcode. Nhưng việc nhấp vào [MY_SHORTCODE]phải được thực hiện bằng một số thủ thuật jQuery.

trong tập lệnh admin_footer, truy cập nội dung nơi con trỏ hoạt động với:

var $editor_content = $(tinymce.activeEditor.getBody());

là một gợi ý về cách bắt đầu.

Tôi đang tìm kiếm một cách để hiển thị đồ họa và chỉnh sửa mã ngắn. Và bây giờ, cuối cùng, tôi đã tìm thấy một hướng dẫn thực hiện chính xác điều đó: https://generatewp.com/take-shortcodes-ultimate-level/

Tôi thêm mô tả để các công cụ tìm kiếm chọn nó:

Chúng tôi sẽ tạo một plugin đơn giản với shortcode, sau đó chúng tôi sẽ thêm nút chỉnh sửa TinyMCE để chèn shortcode đó một cửa sổ bật lên sẽ thu thập tất cả đầu vào của người dùng cho các thuộc tính shortcode. Sau đó, chúng tôi sẽ thay thế shortcode trong trình chỉnh sửa TinyMCE bằng hình ảnh giữ chỗ, giống như thư viện gốc của WordPress (thực ra là một shortcode, trong trường hợp bạn không biết), và cuối cùng - chúng tôi sẽ cho phép chỉnh sửa của shortcode và các thuộc tính của nó bằng cách nhấp đúp vào hình ảnh giữ chỗ.