2013-03-19 2 views
7

적어도 5 개의 텍스트를 동적으로 생성하는 웹 페이지에는 tinymce를 사용합니다.
내가 사용하는 구성은 처음에는 textarea에서만 작동합니다. 의 모든textarea 년대를 TinyMCE에 편집을 가능하게하는 구성이 무엇여러개의 텍스트 영역

tinyMCE.init({ 
    height : "300", 
    mode : "exact", 
    elements : "content", 
    theme : "simple", 
    editor_selector : "mceEditor", 
    ... 

<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea> 

.

답변

14

을 편집자에게.

function initMCEexact(e){ 
    tinyMCE.init({ 
    mode : "exact", 
    elements : e, 
    ... 
    }); 
} 
// add textarea element with id="content" to document 
initMCEexact("content"); 
// add textarea element with id="content2" to document 
initMCEexact("content2"); 
// add textarea element with id="content3" to document 
initMCEexact("content3"); 

또는 "textarea"모드를 사용할 수 있습니다.이 모드는 편집기를 모든 텍스트 영역에 무차별 적으로 적용합니다.

function initMCEall(){ 
    tinyMCE.init({ 
    mode : "textareas", 
    ... 
    }); 
} 
// add all textarea elements to document 
initMCEall(); 

그냥 동적 텍스트 영역을 만드는 경우가 TinyMCE에 그들을 변환 할 수 있도록 기존 할 필요가 있기 때문에, 당신은 요소를 생성 후 tinyMCE.init() 를 호출해야 함을 기억하십시오.

Here is the documentation on modes.

+1

이것은 TinyMCE 3.x에서만 작동합니다. – acme

3

구성에 다른 모드를 사용해야합니다. 예를 들어 mode : "specific_textareas"는 editor_selector 매개 변수에 지정된 클래스가있는 모든 텍스트 영역에서 작동합니다.

이 사용할 수 mceEditor 클래스의 모든 텍스트 영역에서 작동하기 위해서 : 당신이 "정확한"모드는 당신이 변환하고자하는 요소의 ID를 지정해야합니다 사용하는 경우

tinyMCE.init({ 
    mode : "specific_textareas", 
    editor_selector : "mceEditor", 
    ..... 
+0

이 전혀 현명하게 작동하지 않습니다

예를 들어,이 3 개 편집자가있는 페이지입니다. "editor_deselector"로 지정된 클래스가있는 셀렉터를 제외하고이 셀렉터와 기타 모든 TEXTAREAS를 변환합니다. 즉, "editor_selector"는 아무 것도하지 않고 "editor_deselector"만이 작동합니다. "editor_deselector"를 생략하면 항상 모든 텍스트 영역이 선택됩니다. –

-1

tinymce.com/wiki.php/Configuration:selector에 따르면 선택기는 어떤 요소를 편집해야하는지 선택하는 권장 방법입니다. 모든 텍스트 영역 요소에 대한

, 요청에 따라 :

selector: "textarea", 

또는 더 우아하게, 특정 CSS 태그 요소 만 :

selector: "textarea.editme", 

<textarea class="editme"> 
1

는 TinyMCE에 4.0 당신이 선택 또는 정의를 사용해야합니다 각 원하는 구성에 대한 tinymce.init 오브젝트/메소드 (https://www.tinymce.com/docs/get-started/multiple-editors/).

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script> 
    <script type="text/javascript"> 
    tinymce.init({ 
    selector: '#myeditable-h1', 
    toolbar: 'undo redo' 
    }); 
    tinymce.init({ 
    selector: '.standard-editor' 
    }); 
    </script> 
</head> 

<body> 
    <form method="post"> 
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1> 
    </form> 

    <form method="post"> 
    <div id="myeditable-div1" class="standard-editor"> 
     <p>This section1 of content can be edited...</p> 
    </div> 

    <div id="myeditable-div2" class="standard-editor"> 
     <p>This section2 of content can be edited...</p> 
    </div> 

    </form> 
</body> 
</html>