레일에서 cktext_area의 배경색/이미지를 설정하는 방법

Question

레일 3.0.9를 ckedit 보석과 함께 사용하고 있습니다.

보기에 다음 코드가 있습니다.

<%= f.cktext_area :content, :toolbar => 'Reduced', :width => 550, :height => 300 %> 

결과 편집기가 편집 영역의 배경색을 설정하여 유효성 검사가 실패했음을 나타내려면 어떻게해야합니까? <%=text_area에 대해서는 :class=>'error'으로 설정할 수 있지만 올바른 접근법을 이해할 수는 없습니다.

귀하의 도움에 많은 감사드립니다. - 나는 괜찮은 대답을 위해 도처에서 수색했습니다!

Answer 1

나는 ckedit 보석 (또는 그 문제에 대해서는 레일즈)을 다루지 않았지만 시도 할 수있는 몇 가지 설정과 방법이있다.

---

당신이 구성 설정을 사용하여 인스턴스 생성 할 때이 클래스 (또는 ID)를 할당 할 수
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.bodyClass

---

당신은 할 수 있습니다 여기에

<%= f.cktext_area :content, :bodyClass => 'yourBodyClass', :bodyId => 'yourBodyId'> 

는 API 페이지입니다 인스턴스를 작성할 때 addCss 메소드를 사용하십시오. 이것은 JavaScript로 에디터 인스턴스를 생성 할 때 작동하는 예제입니다.

서버 측 코드를 사용하여 CKEditor 객체를 생성하므로 CKEditor 구성 파일에이 값을 입력하는 것이 좋습니다. 자세한 내용은 아래를 참조하십시오. 당신은 상황에 따라 색상을 변경할 수 있습니다
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss

---

:

CKEDITOR.replace('content'); 
CKEDITOR.instances.content.addCss('body { background-color: red; }'); 

다음은 API 페이지입니다. 그렇다면 JavaScript 또는 Rails 변수를 색상 대신 사용하여 동적으로 만들 수 있습니다.

var colorValue = '<%= colorVariable >'; 

CKEDITOR.instances.content.addCss('body { background-color: '+colorValue+'; }'); 
CKEDITOR.instances.content.addCss('body { background-color: '<%= colorVariable >'; }'); 

레일스 구문에 대해 잘 모르겠지만 아이디어를 얻을 수 있습니다. 당신의 CKEditor 설정 파일에서 "addCss"방법을 퍼팅

---

:
당신은이라고합니다 "CKEDITOR.editorConfig"전에 파일의 상단에 넣어해야합니다. 그것은 위에서 사용 된 것과 똑같은 구문을 사용하며 위에서 설명한대로 변수를 사용하여 동적 색상을 설정할 수 있습니다.

---

"addCss"메서드는 편집기 인스턴스가로드 된 후에는 영향을주지 않습니다.

자바 스크립트로 유효성 검사를 수행하고 모든 것이로드 된 후 (페이지를 다시로드하지 않고) 배경색을 설정해야하는 경우 다음 방법을 시도해 볼 수 있습니다.

편집기 인스턴스가 포함 된 페이지에 다음 코드를 삽입 할 수 있습니다. 유효성 검사가 실패하면 "setIframeBackground()"를 호출합니다. 색상이 변경되지 않으면 하드 코딩하여 함수에서 매개 변수를 제거 할 수 있습니다.

위 코드는 콘텐츠 영역 iframe 본문의 ID를 "yourBodyId"로 설정하기 위해 위에서 설명한 "bodyId"구성 옵션을 사용했다고 가정합니다.

주의 할 점은 jQuery를 사용하여이 코드를 작성했습니다.

// Wait for the document ready event 
$(document).ready(function(){ 

    // Wait for the instanceReady event to fire for the "content" instance 
    // The instance name is "content" 
    CKEDITOR.instances.content.on('instanceReady', 
    function(instanceReadyEventObj) 
    { 
     var currentEditorInstance = instanceReadyEventObj.editor; 
     var iframeDoc=null; 

     // Create the function 
     function setIframeBackground(colorVariable) 
     { 
     // The CKEditor content iframe doesn't have a Name, Id or Class 
     // So, we'll assign an ID to the iframe 
     // it's inside a table data cell that does have an Id. 
     // The Id of the data cell is "cke_contents_content" 
     // Note that the instance name is the last part of the Id 
     // I'll follow this convention and use an Id of "cke_contents_iframe_content" 

     $("#cke_contents_content iframe").attr("id", "cke_contents_iframe_content"); 

     // Now use the iframe Id to get the iframe document object 
     // We'll need this to set the context and access items inside the iframe 

     $('#cke_iframe_content').each(
      function(){ iframeDoc=this.contentWindow.document;} 
     ); 

     // Finally we can access the iframe body and set the background color. 
     // The Id of the body is set to "yourBodyId". 
     // We use the iframe document object (iframeDoc) to set the context. 
     // We use the "colorVariable" variable assigned in the function call. 

     $('#' + yourBodyId, iframeDoc).css("background-color", colorVariable); 
     } 
    } 
); 
}); 

수 음,
조

Answer 2

추가 매개 변수로 추가 했습니까?

<%= f.cktext_area :content, <params>, :html => {:class => 'error'} %> 

그런 다음 조건부 논리를 사용하여 올바른 클래스 이름을 설정할 수 있습니다.