CKEditor에서 삽입 한 이미지 편집.

Question

ASP 용 CKEditor를 사용합니다. 내 사이트의 향상된 이미지가 포함 된 NET 이미지를 삽입하면 나에게 좋지 않은 코드가 생깁니다. 일부 태그를 대체하고 싶습니다. String.Replace, String.IndexOf 등의 메소드를 사용하여 태그를 대체하려고 시도했지만 감지가되지 않습니다. 내 목표를 달성하기 위해 CKEditor의 소스 코드를 수정 해보고 싶습니다. 내가 서명/설명없이 간단하게 사진을 사용할 때, 나는 (플로트는 선택한 옵션의 따라 다름)과 같은 코드를 얻을 :

<p> 
<img width="481" height="361" style="float:right" src="/Images/ev1.jpg" alt=""> 
</p> 

내가이로 변환하고 싶습니다 :

<a data-lightbox="gallery" href="/Images/ev1.jpg" class="image-container span4" style="float:right;margin:5px"> 
    <img class="shadow" style="margin:5px" src="/Images/ev1.jpg"> 
</a> 

또 다른 결과 이미지 설명을 사용할 때입니다.

<figure class="image" style="float:left"> 
<img width="579" height="445" src="/Images/ev2.jpg" alt=""> 
<figcaption>This is picture description</figcaption> 
</figure> 

다음과 같아야합니다 :

<a data-lightbox="postPhoto" href="/Images/ev2.jpg" class="image-container span4" style="float:left;margin:5px"> 
    <img width="579" height="445" src="/Images/ev2.jpg" alt=""> 
    <div class="overlay">This is picture description</div> 
</a> 

당신이 내 문제를 해결하는 데 도움이 시겠어요이 코드를 얻을?

Answer 1

의견이 너무 깁니다.

이미지 또는 image2 플러그인에 있나요? 이것은 엄청난 변화입니다. CKE 소스를 편집하지 않고 이미지 삽입을 수신 한 다음 삽입 된 요소를 즉시 편집해야합니다. 당신이 듣고 싶어하는 이벤트에 관해서는 the awesome CKE docs을보십시오. 거기에는 60 가지의 다양한 이벤트가 있습니다. 그 중 하나가 당신에게 적합 할 것입니다.

다른 방법으로 자신 만의 이미지 플러그인을 만들 수 있습니다. 플러그인을 실제로 사용할 수 있습니다. 플러그인 가이드와 시스템은 CKEditor에서 매우 유용합니다. 특히 이미지가 위젯 일 수 있고 image2 사본과 같은 것을 할 수 있다면. 또한

, 인라인 요소 (a)에 자연적으로 블록 레벨 요소 (p 및 figure를) 변환은 큰 의미 변화 - 당신은 당신이 그렇게 하시겠습니까? 물론 블록 레벨의 부모를 그처럼 몸에 직접 두는 대신에 원하는가? 솔루션뿐 아니라 요구 사항도 평가 해보십시오.

Answer 2

나는 최근에 변경이 이미지 2 폴더에 plugin.js 할 수있는 이미지 2 플러그인 유사한 조정을했습니다 (ckeditor/플러그인/이미지 2/plugin.js), 첫 번째 라인 중 하나를

var template = '<a href="" data-lightbox="image-1" data-title="My caption"><img alt="" src=""></a>', 

은 다음 단지 this.parts.image.setAttributes 전에 나는 이것이이다, 이것은 그러나 데이터 라이트 및 데이터 제목 옵션 대화 상자에 포함되지 않습니다, 라이트 박스 clickon로 이미지를 생성 아직

this.parts.link.setAttributes({ 
        href: this.data.src, 
        'data-lightbox': this.data.alt 
       }); 

추가 추가 최적화,하지만 당신을 시작해야합니다