시각적 탭과 HTML 탭 사이를 자유롭게 전환


21

따라서이 질문은 다른 플래그로 여러 번 제기되었지만이 문제에 대한 궁극적 인 솔루션을위한 통합 스레드를 제시하고 싶습니다.

WordPress에서는 기본적으로 TinyMCE의 HTML 편집기와 Visual 편집기간에 전환 할 때 특정 태그가 컨텐츠에서 제거되고 기타 이상한 기능이 발생합니다. 보다 효율적인 HTML 코드를 작성하는 알려진 두 가지 해결 방법은 필터를 사용하여 wp_auto_p 함수를 제거하고 TinyMCE Advanced를 설치하고 "p & br 태그 제거 중지"옵션을 활성화하는 것입니다.

불행히도 이것은 잘 작동합니다.

예를 들어 다음 예제를 보자.

<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>

위에 나열된 두 옵션이 이미 활성화 된 상태에서이 코드를 HTML 편집기에 입력하면 두 개의 다른 편집기간에 전환 할 때 아무 일도 일어나지 않습니다. 불행히도 저장하면 코드가 자동으로 다음과 같이 변환됩니다.

<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>

보시다시피 pre 태그 내의 모든 엔티티는 실제 HTML 문자로 다시 변환됩니다. 그런 다음이 동일한 게시물을 다시 저장하면 다음과 같은 결과가 나타납니다.

<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>

Wordpress는 실제로 게시물에 br 태그를 삽입합니다. 말할 필요도없이,이 포스트가 몇 번 업데이트되었을 때, 프론트 엔드에서 볼 때, 디스플레이는 의도 된 디스플레이 근처에 없습니다.

추가 된 "포맷 기능"을 모두 없애는 유일한 방법은 내 프로필을 통해 비주얼 편집기를 비활성화하는 것입니다.

이것은 전문 웹 개발자라는 것을 고려할 때 훌륭한 솔루션입니다. 내 고객의 경우이 솔루션은 우아하지 않습니다. 내 고객은 대부분 비주얼 편집기를 사용합니다. 많은 고객이 기술에 정통하지는 않으며 레이아웃이 깨질 때 게시물을 수정 해야하는 경우가 있습니다. 레이아웃을 깨뜨릴 염려없이 HTML 편집기로 변경할 수 없으므로 비주얼 편집기를 사용하는 것으로 제한됩니다.

주로 (그리고이 답변의 혜택을 누릴 수있는 대규모 커뮤니티가 있다고 생각합니다), 다음을 보장하기 위해 수행해야 할 명시 적 단계는 무엇입니까?

  1. 게시물은 Visual 또는 HTML 편집기에서 편집 할 수 있습니다.
  2. 두 탭 간을 전환 할 때 게시물의 내용은 수정되지 않습니다.
  3. HTML 편집기에서 게시물을 저장하면 추가 내용이 추가되지 않습니다.
  4. HTML 편집기에서 게시물을 저장하면 엔티티가 변환되지 않습니다.
  5. 보너스 : HTML 편집기에서 게시물을 저장할 때 사전 태그 안에 포함되어 있고 아직 엔티티로 변환되지 않은 코드 (예 : HTML)는 자동으로 엔티티로 변환됩니다.

본질적으로 타사 플러그인을 사용하여 TinyMCE에서 위에서 언급 한 동작을 만들 수 있다면 TinyMCE를 사용하여 잘못된 형식과 관련된 다른 모든 질문을 해결할 수 있습니다. 많은 사람들이이 혜택을 누릴 수 있다고 생각합니다.

WYSIWIG 편집기에서 기대할 수있는 특정 기능이 있다는 것이 논리적 인 것 같습니다. 모든 논리와 이유에 따르면 Wordpress의 내장 서식 기능은 현재 설정에서 쓸모가 없습니다. 그들이 이러한 서식 옵션을 사용하려면 가장 좋은 방법은 한 편집기 또는 다른 편집기를 활성화하는 것입니다.

그리고 제발 : 문제를 '수정'하는 다른 WYSIWIG 편집기에 대한 해결 방법 및 다운로드로이 스레드에 응답하지 마십시오. 이것은 수정해야 할 Wordpress 코어의 근본적인 문제 (실제로 버그는 아니지만)입니다.

편집 : 좋아,이 작업을하고 있으며 리버스 엔지니어링 이이 문제를 해결하는 가장 좋은 방법이라고 생각합니다. 그래서 지금은 wpautop를 비활성화했습니다 (명확성을 위해 텍스트를 저장할 때가 아니라 텍스트가 표시되기 전에 p 및 br 태그를 추가하기 위해 "the_content"필터에 연결하는 기능입니다) wpautop는 편집기 탭 사이를 전환 할 때 발생하는 변경 사항에 대해 책임을지지 않습니다.

어쨌든 HTML 편집기를 사용할 때 wpautop를 비활성화했습니다. 그 시점에서 게시물을 저장할 때 나타나는 html 엔티티 오류로 시작하도록 비주얼 편집기를 비활성화했습니다. C. Bavota의 도움 덕분에 HTML 편집기의 모든 태그를 사이트의 프런트 엔드에 표시하기 전에 해당 엔티티로 변환하는 스 니펫을 발견했습니다 (신용 : http://bavotasan.com/2012/convert -pre-tag-contents-to-html-entities-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 ); 

이렇게하면 저장시 우회하여 모든 엔터티를 태그로 변환하는 Wordpress 관련 문제가 효과적으로 제거됩니다. 이제 HTML 편집기를 사용하여 엔티티 변환을 직접 수행하지 않고도 "pre"태그 사이에 표준 코드를 작성할 수 있습니다. Wordpress에서 엔터티 변환과 관련된 모든 문제를 처리하고 프런트 엔드에 모든 항목이 올바르게 표시되도록합니다. 이제 탭 사이를 앞뒤로 클릭 할 때 발생하는 동작을 수정하기 위해 무엇을 연결해야하는지 파악해야합니다. 현재 HTML에서 시각적 탭으로 이동할 때 HTML 탭의 내용은 Javascript 또는 내용이 어떻게 생겼는지 실시간으로 업데이트하려고 시도하는 것으로 해석됩니다. 그러면 HTML 탭에서 비 엔티티 형식으로 표시되는 태그가 표시되지 않고 처리됩니다. 그때, HTML 탭으로 다시 전환하면 TinyMCE가 현재 데이터를 전달하는 것으로 나타납니다. 다시 전환하면 HTML 구조가 손실됩니다. 우리는 TinyMCE에게 pre 태그의 모든 것을 창으로 로딩하기 전에 동등한 엔티티로 변환하도록 (필수적으로 프론트 엔드에서 수행 한 것의 백엔드 버전이지만 PHP와 후크 대신 tinymce와 javascript로), 처리되는 대신 표시되도록합니다. 제안? 창에로드하기 전에 동등한 엔티티 (필수적으로 프론트 엔드에서 수행했지만 PHP 및 후크 대신 tinymce 및 javascript로 수행 한 작업의 백엔드 버전)로 처리되지 않고 표시됩니다. 제안? 창에로드하기 전에 동등한 엔티티 (필수적으로 프론트 엔드에서 수행했지만 PHP 및 후크 대신 tinymce 및 javascript로 수행 한 작업의 백엔드 버전)로 처리되지 않고 표시됩니다. 제안?

편집 2 :

더 많은 연구를 한 후 사전 태그의 엔티티를 표시 할 때 사전 태그의 컨텐츠를 변환하면 사전 태그 내의 내용에 적합하지만 다음과 같은 행이있는 블로그 게시물이 있다고 가정합니다.

"다음으로이 줄을 HTML 파일에 추가해야합니다 : <p> Hello, World! </ p>"

이 줄을 보면 코드가 사이트에 표시되고 구문 분석되지 않아야 함을 알 수 있지만 게시물이 저장되면 다음 엔티티 편집로드 에서이 엔티티가 디코딩되고 모든 후속 저장시 저장됩니다 원시 html 태그로서 프론트 엔드에서 구문 분석됩니다. 내가 지금까지 생각할 수있는 유일한 해결책은 pre에 사용하는 것과 같은 "code"태그에 대해 유사한 코드를 작성하고 "code"태그에 작은 하나의 라이너를 싸서 큰 코드를 작성하는 것입니다. "pre"태그. 다른 아이디어가 있습니까?


2
좋은 포스트. 그 TinyMCE는 두통을 유발하지 않았습니다. 나는 최근에 CKEditor를 위해 그것을 바꿨다. 게시물에서 언급하지 않은 한 가지 문제는 Word에서 붙여 넣을 때 추가 cr **입니다.
Twifty

필자는이 사이트에서 CKeditor를 사용하여 잠시 동안 이것이 필요한 솔루션이라고 생각했지만 불행히도 여기서 문제는 TinyMCE 자체가 아닌 TinyMCE에서 수신 한 데이터의 Wordpress 처리 및 형식 지정에 있습니다. 원하는 효과를 내려면 적시에 Wordpress에 연결하는 방법이 있어야합니다. 그러나 CKeditor에 관계없이 확실히 좋은 플러그인이며, 내가 찾고있는 것이 아닙니다.
생각 공간 디자인

1
또한 TinyMCE의 "부엌 싱크대"에있는 "단어에서 붙여 넣기"기능을 알고 있습니까? Word에서 붙여 넣을 때 "추가 쓰레기"로 문제를 처리해야합니다.
생각 공간 디자인

7
훌륭한 질문입니다. 그것을 매끄럽게하기 위해 : 나는 현상금 200으로 솔루션에 보상 할 것입니다 . 실제로 답변이 될 때까지 기다릴 것이므로 현상금이 너무 일찍 만료되지 않습니다.
fuxia

답변:


5

좋아, 나는 이미이 질문을 톤으로 업데이트했고 과부하가 시작되고 있기 때문에 전체 답변이 아니지만 답변으로 쓰겠다고 생각했다.

@ bueltge의 대답을 외삽하면서 실제로 돌아가서 문제의 이전 게시물을 찾았습니다. 이 글에는 전에 본 적이없는 플러그인이있었습니다 : "Preserved HTML Editor Markup". 이 플러그인은 한동안 업데이트되지 않았지만 방금 WP 3.6.1로 테스트했으며 완벽하게 작동합니다. 이 플러그인은 자동으로 wpautop를 처리하고 비주얼 편집기에 br 및 p 태그를 삽입하기위한 통합 형식을 제공하며 탭 간 전환시 마크 업을 유지합니다.

내 목적을 위해 필자는 "<code>"태그 내의 모든 HTML 태그를 저장시 해당 엔티티로 자동 변환하는 고유 한 기능으로이 플러그인을 확장했다. 즉, 텍스트 탭 내에서 코드 태그에 표준 HTML 코드를 작성한 다음 저장할 수 있으며 프리 태그의 모든 내용이 사이트의 프런트 엔드 및 시각적 편집기에 올바르게 표시되도록 엔티티로 변환됩니다. 내가 찾은 가장 우아한 솔루션은 아니지만 작동하는 것 같습니다. 플러그인을 활성화 한 후 functions.php에 다음 줄을 추가하십시오 :

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);

이제 코드 태그 사이에 유효한 HTML을 입력하고 저장하면 편집기가 다시 표시 될 때 모두 엔티티로 변환됩니다. 이를 통해 코드를 더 빨리 작성할 수 있습니다. 이제 여전히 문제가되는 것은 중첩 코드 태그와 HTML이 포함 된 "사전"필드가 있고 시각적 탭으로 이동하여 코드에 새 줄을 삽입하려고 시도하는 경우 br 태그라는 것입니다. HTML의 코드 태그에 삽입됩니다. TinyMCE에서이를 비활성화하는 옵션이 있어야합니다. 그럼에도 불구하고 텍스트 탭에서 사전 필드를 편집하는 한 자유롭게 탭 사이를 전환하고 탭 아래에 내용을 추가하고 탭에서 저장하며 엉망인 서식에 대해 걱정할 필요가 없습니다!

이것은 실제로 내 첫 질문의 5 점을 모두 해결합니다. 포인트 2는 여전히 약간 색다른 것이지만, 나는 대부분의 사람들을 위해 문제를 해결한다고 생각합니다. 나는이 플러그인을 어느 시점에서 선별하고 필요한 부분을 추출하고 찾은 결과와 결합하고 공개 다운로드를 위해 다시 패키지 할 계획입니다. 내 목표는 예상대로 작동하는 간단한 원 클릭 설치 플러그인을 만드는 것입니다.

이것이 모두를 돕기를 바랍니다!


3

처음에는이 문제가 WP 버전 3.5 이후에 해결되었다고 생각합니다. trac의 티켓 19666 참조 . 그러나 tinyMCE에는 편집기 내부의 내용을 변경할 수있는 기회가 있으며 프론트 엔드의 출력을 구문 분석해서는 안됩니다.

작은 소스 스크립트. 나는 현재 WP 버전으로 이것을 테스트하지 않았으며 고객을위한 오래된 솔루션이었습니다.

플러그인을 통해이 소스를 추가하고 마크 업을 강화하십시오. 기능은 html-tag <pre를 확인하고 존재하는 경우 마크 업으로 대체됩니다.

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;
}

3.5에서 해결 된 문제는 같은 문제가 아닙니다. 내가 가진 문제는 Visual에서 HTML로 전환 할 때 줄 바꿈이 제거되지 않는다는 것입니다. 사전 태그의 태그조차도 내 태그가 소스 HTML로 해석되어 엔티티로 인코딩되지 않아 표시되지 않는 것 같습니다 HTML 패널에서. 이 함수는 TinyMCE의 동작을 수정하여 처리되는 대신 HTML이 표시되도록합니까?
생각 공간 디자인

작은 테스트 작업에서 엔티티는 html에서 visual으로 전환하고 콘텐츠를 다시 저장합니다.
bueltge

오늘 나중에 이것을 테스트하여 내가 찾고있는 것을 달성하는지 확인합니다.
생각 공간 디자인

답장을 기다리면 도움이 될 것입니다. 나는 당신의 질문에 대한 귀하의 예에서 소스로 이것을 테스트했습니다. 내가 옳지 않다는 것을 이해한다면 여기에서 강화하십시오.
bueltge

내 대답보기 ...
Thought Space Designs

0

나는 OP 비슷한 문제가 있었다,하지만 나를 위해 유지에 문제가 있었다 <h1>에서 <div>. 이것은 텍스트와 시각적 탭을 전환하는 동안 유지하고 싶었던 것입니다. div의 h1 및 div가있는 h1

탭을 바꿀 때마다 <h1>사라졌습니다. 나는 많은 검색을했고 Wordpress 4.7.3의 경우 오래된 수정 사항이 많이 있음을 알았습니다. 버전 3에서 4로 TinyMCE의 시장 업그레이드가있었습니다. v.3 용 솔루션이 v.4에서는 작동하지 않았습니다. 더 많은 인터넷 검색 및 TinyMCE 버전 4 원본 문서를 읽은 후 특히 내 경우에 대한 해결책을 찾았습니다.

  1. Advanced TinyMCE Configuration 플러그인 설치
  2. TinyMCE valid_children설정을+div[h1],h1[div]
  3. I는 additonnaly 구성 indent=true, forced_root_block=falseschema=html5(I 읽을 때 forced_root_block설명은 I로 이해 wpautop대체)

결과적으로 나는 이것을 얻는다 (그리고 그것은 탭 전환에 저항 적이다) 여기에 이미지 설명을 입력하십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.