Wordpress Visual Editor Tước thay đổi HTML

Khi tôi sử dụng trình soạn thảo HTML WordPress để thêm các biểu tượng icomoon như thế này:

<span class="icon-shield"></span>

và sau đó chuyển sang trình chỉnh sửa trực quan và sau đó quay lại trình chỉnh sửa HTML, các biểu tượng biến mất. Tôi đang cố gắng đưa bit Javascript này để sửa lỗi này. Tôi đã xem wp_enqueue_scripts và đặt cái này vào hàm.php, nhưng nó vẫn không khắc phục được vấn đề.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

Làm thế nào tôi có thể sửa lỗi này?

Lý lịch

Vấn đề này xoay quanh việc loại bỏ các <span></span>thành phần trống trong TinyMCE khi lưu bài đăng hoặc chuyển đổi giữa các tab Visualvà Texttrình soạn thảo. Vấn đề cố hữu là chức năng cốt lõi (như phiên bản trung kế 4.0-alpha-20140602) và không thể thay đổi thông qua các API WordPress tiêu chuẩn, như được đề cập trong vé # 26986 . Vé nêu chi tiết lý do đằng sau cài đặt và được đánh dấu là wont-fix, có nghĩa là đặt cược tốt nhất của bạn là một trong những "giải pháp chung" được liệt kê dưới đây.

Hành vi mặc định của WordPress / TinyMCE

Theo mặc định, ví dụ TinyMCE của WordPress được định cấu hình sao cho một số thẻ trống hoặc thẻ thiếu các thuộc tính nhất định được xóa trong một nỗ lực để loại bỏ đánh dấu mà không làm gì cả.

Từ tài liệu của MDN<span> :

Phần tử HTML là một bộ chứa nội tuyến chung cho nội dung cụm từ, vốn không đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các thành phần cho mục đích tạo kiểu (sử dụng các thuộc tính lớp hoặc id) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như lang. Nó chỉ được sử dụng khi không có yếu tố ngữ nghĩa nào khác phù hợp.

Như <span>được dự định để nhóm các thành phần / nội dung nội tuyến, những người đóng góp cốt lõi WordPress đã quyết định rằng thành phần đó phải không liên quan khi thẻ trống và do đó loại bỏ nó khỏi nội dung.

Xung quanh công việc

Đối với hầu hết các phần, cách thích hợp để sửa đổi cấu hình của TinyMCE là kết nối tiny_mce_before_initvới bộ lọc tuy nhiên spanhành vi loại bỏ trống không thể được sửa đổi theo cách này. Để làm như vậy có khả năng yêu cầu hack vào các tệp cốt lõi, và như vậy tôi đã không cung cấp bất kỳ giải pháp nào như vậy để xem xét.

Lý tưởng: Đưa ra <span>Trình đọc màn hình

Trình đọc màn hình là những phần mềm cố gắng diễn giải nội dung trên màn hình để hỗ trợ người khiếm thị. Khi xử lý một trang web, hầu hết các trình đọc màn hình đều vô hiệu hóa hoàn toàn CSS (và Javascript) hoặc chỉ xử lý một tập hợp con, sao cho những thứ thường được ẩn bởi CSS sẽ kết thúc được xử lý như thể nó hiển thị. Theo truyền thống, các nhà phát triển web khai thác hành vi này dưới tên khả năng truy cập bằng cách tạo một lớp CSS có thể được áp dụng cho các phần tử sẽ ẩn chúng khỏi mọi người đã bật CSS, một số thứ :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Với lớp này có sẵn (các bảng định kiểu của chủ đề của bạn có thể có một lớp tương tự), bên trong khoảng biểu tượng của bạn, bạn có thể thêm một khoảng thời gian "trình đọc màn hình" thứ hai sẽ không nhận được (hoặc ít nhất là xuất hiện) trên màn hình nhưng sẽ cung cấp cho trình đọc màn hình một lựa chọn thay thế có thể truy cập vào biểu tượng của bạn, tương tự như cách altthuộc tính hoạt động trên <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Ở trên sẽ hiển thị biểu tượng của bạn khi CSS được bật và trình đọc màn hình sẽ diễn giải "Bảo mật" ở vị trí của nó.

Cung cấp <span>nội dung vô hình

Để ngăn <span>s bị xóa, bạn có thể thêm nội dung không được hiển thị rõ ràng:

• Thêm một ký tự khoảng trắng giữa thẻ mở và đóng sẽ đủ. Tuy nhiên, khi khoảng trắng trống bị xóa, bạn cần thêm ký tự thông qua  thực thể HTML. Ký tự này sẽ được chuyển đổi thành không gian bình thường khi bạn chuyển tab hoặc lưu, tuy nhiên nó sẽ không bị xóa khỏi đánh dấu. Lưu ý rằng điều này có thể ảnh hưởng đến kích thước của khoảng của bạn, giống như khi bạn đặt một chữ cái trong phần tử:

  <span class="icon-shield">&nbsp;</span>

• Giả sử bạn đang làm việc với bộ ký tự UTF-8, bạn có thể sử dụng ký tự "dấu gạch nối mềm" thông qua thực thể HTML ­. Không giống như  , ký tự hypen mềm được hiển thị như thể nó không chiếm dung lượng và không ảnh hưởng đến kích thước của khoảng của bạn:

  <span class="icon-shield">&shy;</span>

Sử dụng một yếu tố thay thế

Mặc dù TinyMCE của WordPress được định cấu hình để loại bỏ <span>các phần tử trống , có một số thẻ khác được định cấu hình theo mặc định để cho phép tồn tại mà không có nội dung. Trong các ý kiến của vé # 26.986 , TobiasBg khuyến cáo sử dụng<i> ( <em>, <b>, và <strong>một vài khả năng khác). Xem câu hỏi Stack Overflow này để biết thêm về thực hành sử dụng <i>cho các biểu tượng.

<i class="icon-shield"></i>

Tạo sơ đồ TinyMCE của riêng bạn

Đây có lẽ là giải pháp phức tạp nhất và nói chung vô lý nhất hiện có, và như vậy tôi sẽ không cung cấp một triển khai. Sử dụng một plugin, có thể tải lên một phiên bản riêng của các tập lệnh TinyMCE, định cấu hình chúng theo cách bạn muốn (ngoài các tùy chọn mà WordPress trưng ra) và thay thế trình chỉnh sửa mặc định (hoặc ẩn nó và thêm một metabox thay thế). Mặc dù cho phép bạn vô hiệu hóa việc loại bỏ các khoảng trống, lượng thời gian cần thiết để thực hiện việc triển khai như vậy có thể sẽ vượt xa lợi ích.