는 Tinymce로 감겨져 .는 Tinymce로 감겨져 .는 Tinymce로 감겨져 .태그. CSS가 돌아다니거나 텍스트 에디터를 해킹하거나

는 Tinymce로 감겨져 .

태그. CSS가 돌아다니거나 텍스트 에디터를 해킹하거나

★★★★★★★★★★★★★★★★.
드루팔 워드프레스여기서 작은 설정 파일이 너무 교묘하게 추상화되어 있습니다.

는 작은 이 내 으로 접는다는 이다.<img>( 「」의<p>태그. 워드프레스나 드루팔에서 이 문제를 해결할 수 있는 방법이 있다면 정말 좋을 것 같아요.

이런 일을 하고 싶을 때 내 문제는 존재한다

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

내 코드가 이렇게 생겼으면 좋겠어

<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>

하지만 작은 것이 이것을 한다.

<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

이미지 자체에 폭 제한을 두지 않고 설정된 너비로 이미지를 문단 왼쪽에 띄우려고 합니다.
이 경우 이미지의 부모가 폭과 플로트 권리를 갖게 됩니다.그건 내가 원하는 게 아니야.

이것에 대한 쉬운 묘책이 있을 가능성이 매우 높지만, 나는 아직 그것을 찾지 못했다.컨피규레이션파일을 해킹할 필요가 없다면 해킹하지 않는 것이 좋습니다.

1개... 경고 1개...
이 문제가 존재하는 유일한 이유는 클라이언트가 쉽게 편집할 수 있도록 하기 때문에 이미지를 가 아닌 로 감싸지 않도록 하기 위해서입니다. 위지위그의 실제 사용자인 제 고객들에게는 그런 생각이 들지 않는 것 같습니다.

정규식을 사용하여 패러그래프 태그를 제거했지만 항상 문제가 있습니다.오류가 있다! 502개의 오류가 있다! 502개의 오류가 있다! 502개의 오류가 있다!

단락에 싸인 이미지를 원하는 대로 하려면 CSS에서 무엇을 해야 합니까?
가 할 수 없다면
Drupal word press?드루팔 워드프레스?

-- Edit --솔루션은 IE7+ 및 최신 브라우저와 호환되어야 합니다. : P

작다고 해tinyMCE.init 기능이 있는 MCE 맞죠?

다음 문자열을 추가합니다.

forced_root_block : false,

또한 tiny_mce_src.js를 변경할 수도 있습니다.검색

forced_root_block : 'p',

로 변경해 주세요.

forced_root_block : false,

추신. 캐시를 비우려고 위조하지 마세요.

이미지 태그를 랩하지 않으려면 Tinymce 소스에서 "isBlock"이라는 함수를 찾습니다.요소가 블록 요소인지 여부를 판별하는 정규 표현 화이트리스트 테스트가 있습니다.이미지 태그를 블록 요소로 취급해야 할 경우 검색되는 노드 이름 목록에 "IMG"를 추가합니다.나는 이것을 스스로 해야만 했고, 지금도 부정적인 부작용을 찾고 있지만, 그것은 당면한 문제를 해결한다.

편집: 이는 일시적인 해결책에 불과합니다.이미지 태그의 루트 레벨 블록의 랩핑을 정지할 필요가 있는 경우는, 「force Roots」라고 불리는 기능이 있습니다.이 기능에서는 이미지 태그의 체크를 실제로 실행할 수 있습니다.다음 코드 행을 수정하여 이 작업을 수행했습니다.

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

다음과 같이 됩니다.

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

이것으로 나는 그 문제를 꽤 잘 해결했다.

WordPress 사이트에 대해 말하면 콘텐츠 내의 일부 요소를 wpautop이라고 하는 <p> 태그로 자동으로 랩하는 귀찮은 필터가 있습니다.실제로 실행 시 TinyMCE가 아닌 워드프레스 방식으로 처리됩니다.

템플릿 또는 함수 상단에 추가합니다.php 파일:

<?php remove_filter('the_content', 'wpautop'); ?>

삭제:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-breakhttpwordpress.org/support/topic/

Drupal에서는 이를 위한 일종의 "klugey" 방법은 노드를 표시하기 위해 hook_nodeapi() 또는 d7 등가물을 사용하고 필드의 선두에서 발생하는 p-wraped 이미지를 정규 표현으로 대체하는 것입니다.편집 시에는 올바르게 표시되지 않지만 표시 시에는 올바르게 표시된다는 것을 고객에게 알려야 합니다.

css 옵션을 찾고 있는 경우:

css2에는 :first-child 셀렉터가 있고 css3에는 :only-child 셀렉터가 있습니다.p:first-child img는 p 요소에 대해 선언한 여백을 상쇄하기 위해 음의 여백을 사용하여 사용할 수 있습니다.단점은 클라이언트가 첫 번째 단락에 넣을 수 있는 이미지에 대해서도 같은 마이너스 마진을 부과한다는 것입니다.css3는 대상으로 하는 브라우저에 따라 지원되지 않을 수 있지만 사용할 수 있는 경우:only-child selector를 사용하여 p 요소의 유일한 자식인 이미지에 대해 부모 p의 마진을 상쇄할 수 있습니다.마이너스 마진입니다.

하여 Javascript를 할 수 .imgp 이런 것 (미검증)

$("p > img").each(function () {
  var $this = $(this);
  var $p= $this.parent();
  $p.before($this);
});

꼭 필요한 단락/이미지에만 논리를 추가합니다.

꼴불견이죠, 하지만 최후의 수단으로 실행 가능한 해결책이죠

다음 행 추가:

theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"

img를 삽입하려면 div를 선택합니다.

<div>
    <img src="my_img.jpg>
</div>

css를 사용하여 아무것도 변경할 필요가 없습니다.

TinyMCE 4는 모든 것을 블록 요소로 포장합니다.기본 래퍼는 P입니다.이미지를 클릭하고 DIV와 같은 다른 래핑 요소를 선택합니다.메뉴에 DIV를 추가하려면 이 기능을 추가합니다.php:

function make_mce_awesome( $init ) {
  $init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}

add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");

"valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children 옵션이 있습니다.(-) 또는 (+) img 태그의 랩을 허용하지 않는 요소를 제어합니다.

이 예에서는 img 태그를 p 및 h1-4의 자식으로 하지 않고 img 태그를 div 및 span의 자식으로 합니다.

tinymce.init({
valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
});

...라는 사실 때문에 이것은 불가능할 것 같다.img는 인라인 요소입니다.Tinymce는 사용자가 입력한 모든 내용을 블록 요소로 래핑합니다(div또는p-410) 단,img블록 요소가 아닙니다.

언급URL : https://stackoverflow.com/questions/5819956/tinymce-images-auto-wrapped-in-p-tag-css-ways-around-or-text-editor-hacks