Tự do chuyển đổi giữa tab Visual và HTML


21

Vì vậy, câu hỏi này đã được đưa ra nhiều lần dưới các cờ khác nhau, tuy nhiên tôi muốn trình bày một chủ đề thống nhất cho một giải pháp tối ưu cho vấn đề này.

Trong WordPress, theo mặc định, khi chuyển đổi qua lại giữa các trình soạn thảo HTML và Visual trong TinyMCE, một số thẻ nhất định bị loại khỏi nội dung và xảy ra chức năng kỳ lạ khác. Hai cách giải quyết đã biết để viết mã HTML hiệu quả hơn là sử dụng loại bỏ hàm wp_auto_p bằng các bộ lọc và cài đặt TinyMCE Advanced & cho phép tùy chọn "dừng xóa thẻ p & br".

Điều này chỉ hoạt động rất tốt, không may.

Lấy ví dụ, ví dụ sau:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
&lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/jquery.easycolumns.js&quot;&gt;&lt;/script&gt;
</pre>

Nếu tôi nhập mã này vào trình soạn thảo HTML, với cả hai tùy chọn được liệt kê ở trên đã được bật, thì khi tôi chuyển đổi giữa hai trình soạn thảo khác nhau, sẽ không có gì xảy ra. Thật không may, khi lưu, mã sẽ tự động chuyển thành thế này:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script>
</pre>

Như bạn có thể thấy, tất cả các thực thể trong thẻ trước được chuyển đổi trở lại thành các ký tự HTML thực tế. Sau đó, nếu tôi lưu lại cùng một bài đăng này, tôi sẽ nhận được một cái gì đó như sau:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre><br />
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script><br />
</pre>

Lưu ý rằng Wordpress sẽ thực sự tiêm thẻ br vào bài viết. Không cần phải nói, khi bài đăng này đã được cập nhật một vài lần, khi xem nó trên frontend, màn hình hiển thị không ở gần màn hình dự định.

Cách duy nhất tôi dường như loại bỏ tất cả "chức năng định dạng" được thêm vào là vô hiệu hóa trình soạn thảo Visual thông qua hồ sơ của tôi.

Đây là một giải pháp tốt cho tôi, vì tôi là một nhà phát triển web chuyên nghiệp. Đối với khách hàng của tôi, giải pháp này là xa thanh lịch. Hầu hết các khách hàng của tôi sẽ sử dụng trình chỉnh sửa trực quan. Rất nhiều khách hàng của tôi không am hiểu về công nghệ và đôi khi cần tôi sửa bài đăng của họ khi bố cục bị hỏng. Điều này giới hạn tôi sử dụng trình soạn thảo trực quan, vì tôi không thể thay đổi trình soạn thảo HTML mà không sợ phá vỡ bố cục.

Chủ yếu, (và tôi nghĩ rằng có một cộng đồng lớn có thể hưởng lợi từ câu trả lời này), tôi có thể làm theo những bước rõ ràng nào để đảm bảo những điều sau:

  1. Một bài đăng có thể được chỉnh sửa từ trình soạn thảo Visual hoặc HTML.
  2. Nội dung của bài đăng không được sửa đổi theo bất kỳ cách nào khi chuyển đổi giữa hai tab.
  3. Khi lưu một bài đăng từ trình soạn thảo HTML, không có nội dung bổ sung nào được thêm vào.
  4. Khi lưu một bài đăng từ trình soạn thảo HTML, không có thực thể nào được chuyển đổi.
  5. THƯỞNG: Khi lưu một bài đăng từ trình soạn thảo HTML, bất kỳ mã nào (ví dụ HTML) được bọc bên trong thẻ trước và chưa được chuyển đổi thành các thực thể sẽ được tự động chuyển đổi thành các thực thể.

Về cơ bản, nếu chúng ta có thể tạo hành vi nói trên trong TinyMCE thông qua việc sử dụng plugin của bên thứ ba, chúng ta có thể dập tắt tất cả các câu hỏi khác liên quan đến định dạng sai thông qua việc sử dụng TinyMCE. Tôi cảm thấy rằng nhiều người có thể được hưởng lợi từ điều này.

Có vẻ hợp lý rằng có một chức năng nhất định mà người ta mong đợi từ một trình soạn thảo WYSIWIG, và điều này đi ngược lại với nó. Theo tất cả logic và lý do, các chức năng định dạng được xây dựng của Wordpress khá vô dụng với thiết lập hiện tại của chúng. Dường như với tôi rằng nếu họ muốn sử dụng các tùy chọn định dạng này, cách tốt nhất của họ là kích hoạt một trình chỉnh sửa này hoặc trình chỉnh sửa khác, không phải cả hai.

VÀ VUI LÒNG: Đừng trả lời chủ đề này bằng cách giải quyết và tải xuống cho các biên tập viên WYSIWIG khác 'khắc phục' vấn đề. Đây là một vấn đề tiềm ẩn (mặc dù không thực sự là một lỗi) với lõi Wordpress cần được sửa chữa.

EDIT : Được rồi, tôi đã làm việc này và tôi nghĩ kỹ thuật đảo ngược sẽ là cách tốt nhất để giải quyết vấn đề này. Vì vậy, ngay bây giờ, tôi đã tắt wpautop (chỉ rõ ràng là một chức năng móc vào bộ lọc "the_content" để thêm thẻ p và br trước khi văn bản được hiển thị , không phải khi văn bản được lưu. Tôi nghĩ rằng có một số nhầm lẫn như cách thức hoạt động của chức năng này. wpautop không chịu trách nhiệm cho những thay đổi bạn thấy xảy ra khi bạn chuyển đổi giữa các tab của trình soạn thảo. Đó là một điều hoàn toàn khác.

Dù sao, tôi đã vô hiệu hóa wpautop, như một cách thực hành tốt khi bạn sử dụng trình soạn thảo HTML. Từ thời điểm đó, tôi đã vô hiệu hóa trình soạn thảo trực quan để bắt đầu trước tiên với các lỗi thực thể html xuất hiện khi lưu bài đăng. Nhờ có sự giúp đỡ của một C. Bavota, tôi đã tìm thấy một đoạn để chuyển đổi bất kỳ thẻ nào trong trình soạn thảo HTML sang các thực thể tương đương của chúng trước khi hiển thị chúng ở mặt trước của trang web (tín dụng: http://bavotasan.com/2012/convert -pre-tag-nội dung-to-html-entity-in-wordpress / ).

#add_filter( 'the_content', 'pre_content_filter', 0 );
/**
 * Converts pre tag contents to HTML entities 
 *
 * This function is attached to the 'the_content' filter hook.
 *
 * @author c.bavota
 */

function pre_content_filter( $content ) {
        return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}


function convert_pre_entities( $matches ) {
        return str_replace( $matches[1], htmlentities($matches[1] ), $matches[0] );
}

add_filter( 'the_content', 'pre_content_filter', 10, 2 ); 

Điều này giúp loại bỏ hiệu quả các vấn đề với Wordpress chuyển đổi tất cả các thực thể thành các thẻ khi lưu bằng cách phá vỡ nó. Bây giờ, bạn có thể sử dụng trình soạn thảo HTML và viết mã tiêu chuẩn ở giữa các thẻ "pre" mà không cần tự thực hiện chuyển đổi thực thể. Điều này xử lý tất cả các vấn đề với chuyển đổi thực thể trong Wordpress và đảm bảo mọi thứ hiển thị chính xác ở mặt trước. Bây giờ, chúng ta cần tìm ra những gì cần nối vào để sửa đổi hành vi đã trải nghiệm khi nhấp qua lại giữa các tab. Ngay bây giờ, có vẻ như khi chuyển từ HTML sang tab trực quan, nội dung của tab HTML được giải thích bằng javascript hoặc một cái gì đó để cố gắng cung cấp cập nhật trực tiếp nội dung sẽ như thế nào. Điều này khiến các thẻ (được hiển thị ở dạng không phải thực thể trong tab HTML) được xử lý thay vì hiển thị. Sau đó, khi chuyển trở lại tab HTML, TinyMCE sẽ chuyển dữ liệu hiện tại đi cùng. Điều này có nghĩa là khi bạn chuyển trở lại, bạn sẽ mất cấu trúc HTML. Chúng ta cần tìm ra một cách để nói với TinyMCE chuyển đổi mọi thứ trong các thẻ trước thành các thực thể tương đương trước khi tải nó vào cửa sổ (về cơ bản là phiên bản phụ trợ của những gì chúng ta đã làm trên frontend nhưng với tinymce và javascript thay vì php và hook), để nó được hiển thị thay vì xử lý. Gợi ý? Các thực thể tương đương trước khi tải nó vào cửa sổ (về cơ bản là phiên bản phụ trợ của những gì chúng tôi đã làm trên frontend nhưng với tinymce và javascript thay vì php và hook), để nó được hiển thị thay vì được xử lý. Gợi ý? Các thực thể tương đương trước khi tải nó vào cửa sổ (về cơ bản là phiên bản phụ trợ của những gì chúng tôi đã làm trên frontend nhưng với tinymce và javascript thay vì php và hook), để nó được hiển thị thay vì được xử lý. Gợi ý?

EDIT 2 :

Sau một số nghiên cứu khác, chuyển đổi các thực thể trong thẻ trước khi chúng được hiển thị hoạt động tốt cho nội dung trong thẻ trước, nhưng nói rằng tôi có một bài đăng blog với một dòng như thế này:

"Tiếp theo, chúng tôi cần thêm dòng này vào tệp HTML của mình: <p> Xin chào, Thế giới! </ P>"

Nhìn vào dòng này, bạn có thể biết rằng mã được cho là sẽ được hiển thị trên trang web và không được phân tích cú pháp, tuy nhiên khi bài đăng được lưu, các thực thể này được giải mã trong lần tải chỉnh sửa bài tiếp theo và trên mỗi lần lưu tiếp theo chúng được lưu dưới dạng các thẻ html thô, khiến chúng được phân tích cú pháp ở mặt trước. Giải pháp duy nhất tôi có thể nghĩ đến cho đến nay là viết mã tương tự cho thẻ "code" như tôi đang sử dụng cho tiền tố, và sau đó chỉ bọc một lớp lót nhỏ trong thẻ "code" và các đoạn lớn trong thẻ "trước". Co ai co y gi khac không?


2
Bài đăng hay. Điều đó TinyMCE đã khiến tôi không có gì ngoài đau đầu. Gần đây tôi đã chuyển nó cho CKEditor, mặc dù còn quá sớm để nói cách thức giữ nó. Một vấn đề bạn không đề cập đến trong bài viết của mình là thêm cr ** khi dán từ Word.
Hai mươi

Tôi đã sử dụng CKeditor trên trang web của chúng tôi trong một thời gian và nghĩ rằng đây là giải pháp tôi yêu cầu, nhưng thật không may, vấn đề hiện tại nằm ở việc xử lý và định dạng dữ liệu mà Wordpress nhận được từ TinyMCE chứ không phải TinyMCE. Phải có một cách để kết nối với Wordpress vào đúng thời điểm để tạo hiệu ứng mong muốn. Nhưng bất kể CKeditor chắc chắn là một plugin tốt, chỉ là những gì tôi đang tìm kiếm.
Thiết kế không gian suy nghĩ

1
Ngoài ra, bạn có biết tính năng "dán từ" trong "bồn rửa nhà bếp" của TinyMCE đúng không? Điều đó sẽ quan tâm đến vấn đề của bạn với "crap thêm" khi dán từ Word.
Thiết kế không gian suy nghĩ

7
Câu hỏi tuyệt vời. Để thêm gia vị: Tôi sẽ thưởng cho giải pháp với số tiền thưởng là 200 . Tôi sẽ đợi cho đến khi thực sự có câu trả lời, vì vậy tiền thưởng không hết hạn quá sớm.
fuxia

Câu trả lời:


5

Được rồi vì vậy tôi đã cập nhật câu hỏi này một tấn và nó bắt đầu bị quá tải, vì vậy tôi nghĩ rằng tôi sẽ viết đây là một câu trả lời mặc dù nó không phải là một câu hỏi đầy đủ.

Ngoại suy từ câu trả lời của @ bueltge, tôi thực sự đã quay lại và tìm thấy bài viết trước đây của anh ấy trong câu hỏi. Trong bài đăng đó, có một plugin được liệt kê mà tôi chưa từng thấy trước đây: "Đánh dấu trình soạn thảo HTML được bảo tồn". Plugin này chưa được cập nhật trong một thời gian, nhưng tôi mới thử nghiệm nó với WP 3.6.1 và nó có đầy đủ chức năng. Plugin này tự động chăm sóc wpautop, cung cấp định dạng hợp nhất để chèn các thẻ br và p trong trình chỉnh sửa trực quan và duy trì đánh dấu của bạn khi chuyển đổi giữa các tab.

Với mục đích riêng của mình, tôi đã mở rộng dựa trên plugin này với chức năng của riêng mình: tự động chuyển đổi bất kỳ thẻ html nào trong các thẻ "<code>" sang các thực thể tương ứng của chúng khi lưu. Điều này có nghĩa là bạn có thể viết mã HTML tiêu chuẩn vào các thẻ mã trong tab văn bản, sau đó lưu nó và tất cả nội dung trong các thẻ trước sẽ chuyển đổi thành các thực thể để hiển thị chính xác ở mặt trước của trang web và trình soạn thảo trực quan. Đó không phải là giải pháp tao nhã nhất mà tôi đã tìm thấy, nhưng nó dường như hoạt động. Thêm dòng này vào hàm.php của bạn sau khi kích hoạt plugin:

function code_content_conversion_filter( $content ) {
        return preg_replace_callback( '|<code.*>(.*)</code|isU' , 'convert_entities', $content );
}

function convert_entities( $matches ) {
        return str_replace( $matches[1], htmlspecialchars($matches[1], ENT_QUOTES | ENT_HTML5, 'UTF-8', FALSE ), $matches[0] );
}

add_filter( 'content_save_pre', 'code_content_conversion_filter', 0);

Bây giờ, chỉ cần nhập bất kỳ HTML hợp lệ nào vào giữa các thẻ mã và khi bạn lưu, khi trình soạn thảo bật lên, tất cả chúng sẽ được chuyển đổi thành các thực thể. Điều này cho phép bạn viết mã nhanh hơn. Bây giờ, điều duy nhất vẫn còn là một vấn đề là nếu bạn có trường "pre" có thẻ mã lồng nhau và HTML trong đó, và bạn đi đến tab trực quan và thử chèn một dòng mới vào mã, thẻ br được đưa vào thẻ mã của bạn trong HTML. Phải có một tùy chọn để vô hiệu hóa điều này trong TinyMCE. Bất kể, miễn là bạn chỉnh sửa các trường trước từ tab văn bản, bạn có thể thoải mái chuyển đổi giữa các tab, thêm bất kỳ nội dung nào dưới bất kỳ tab nào, lưu từ một trong hai tab và không phải lo lắng về việc định dạng sai!

Điều này thực sự giải quyết tất cả 5 điểm của câu hỏi ban đầu của tôi. Điểm 2 vẫn còn một chút không ổn định, nhưng tôi tin rằng đối với hầu hết các mục đích của mọi người, điều này quan tâm đến vấn đề này. Tôi có kế hoạch sàng lọc thông qua plugin này tại một số điểm và trích xuất các phần cần thiết, kết hợp nó với các phát hiện của tôi và đóng gói lại để tải xuống công khai. Mục tiêu của tôi ở đây là tạo ra một plugin cài đặt đơn giản chỉ với một cú nhấp chuột như mong đợi.

Hy vọng điều này sẽ giúp tất cả mọi người!


3

Lúc đầu, tôi nghĩ vấn đề này đã được giải quyết kể từ phiên bản WP 3.5; xem vé 19666 tại trac . Nhưng tinyMCE có một cái móc ở đó cho chúng ta cơ hội để thay đổi nội dung bên trong trình chỉnh sửa và bạn không được phân tích cú pháp đầu ra trên frontend.

Một kịch bản nguồn nhỏ. Tôi không có thử nghiệm này với phiên bản WP hiện tại, là một giải pháp cũ hơn cho khách hàng.

Thêm nguồn này thông qua plugin và tăng cường đánh dấu. Hàm kiểm tra thẻ html <prevà nếu tồn tại, thì sẽ được thay thế bằng đánh dấu.

add_filter( 'tiny_mce_before_init', 'fb_correction_content_tiny_mce' );

function fb_correction_content_tiny_mce( $init ) {

    $init['setup'] = "function(ed) {
        ed.onBeforeSetContent.add( function(ed, o) {

            if ( o.content.indexOf('<pre') != -1 ) {
                o.content = o.content.replace(
                    /<pre[^>]*>[\\s\\S]+?<\\/pre>/g,
                    function(a) {
                        return a.replace(/(\\r\\n|\\n)/g, '<br />');
                    }
                );
            }
        } );
    }";

    return $init;
}

Vấn đề đã được giải quyết trong 3.5 không hoàn toàn giống như vậy. Vấn đề tôi không phải là ngắt dòng bị tước khi chuyển từ Visual sang HTML, đó là tất cả các thẻ của tôi, ngay cả những thẻ trong thẻ trước, dường như được hiểu là HTML nguồn và không hiển thị khi chúng không được mã hóa dưới dạng thực thể trong bảng HTML. Hàm này có sửa đổi hành vi của TinyMCE để HTML trong pre sẽ được hiển thị thay vì được xử lý không?
Thiết kế không gian suy nghĩ

Trong một thử nghiệm nhỏ hoạt động này, các thực thể sẽ rời khỏi chuyển từ html sang trực quan, cũng trở lại và với lưu nội dung.
bueltge

Tôi sẽ kiểm tra điều này sau vào hôm nay để đảm bảo nó hoàn thành những gì tôi đang tìm kiếm.
Thiết kế không gian suy nghĩ

OK, chờ trả lời của bạn và có thể nó sẽ giúp. Tôi đã kiểm tra điều này với nguồn từ ví dụ của bạn về câu hỏi. Nếu tôi hiểu nó không đúng, xin vui lòng nâng cao điều này ở đây.
bueltge

Xem câu trả lời của tôi ...
Thiết kế không gian suy nghĩ

0

Tôi đã có một vấn đề tương tự như OP, nhưng đối với tôi có một vấn đề với việc giữ <h1>trong đó <div>. Đây là những gì tôi muốn giữ trong khi chuyển đổi giữa các tab Văn bản và Trực quan: h1 trong div và với div bên trong

Mỗi lần tôi chuyển tab <h1>biến mất. Tôi đã thực hiện rất nhiều tìm kiếm và đối với Wordpress 4.7.3 tôi phát hiện ra có rất nhiều bản sửa lỗi lỗi thời. Có một bản nâng cấp của thị trưởng TinyMCE từ phiên bản 3 lên 4. Các giải pháp cho v.3 không có hiệu quả cho phiên bản.4. Sau khi tìm hiểu thêm và đọc tài liệu gốc của TinyMCE phiên bản 4, tôi đã tìm ra giải pháp cho trường hợp đặc biệt của mình:

  1. Cài đặt plugin Cấu hình TinyMCE nâng cao
  2. đặt cài đặt TinyMCE valid_childrenthành+div[h1],h1[div]
  3. Tôi additonnaly cấu hình indent=true, forced_root_block=falseschema=html5(khi tôi đọc forced_root_blockmô tả tôi hiểu nó như là một wpautopthay thế)

Kết quả là tôi nhận được điều này (và nó có khả năng chống chuyển đổi tab) nhập mô tả hình ảnh ở đây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.