2013-03-19 3 views
7

Uso tinymce per una pagina Web che genera dinamicamente almeno 5 testi.
La configurazione che utilizzo funziona solo sul primo textarea sfortunatamente.multiple tinynce textareas

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

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

Qual è la configurazione per abilitare la modifica TinyMCE in tuttitextarea 's.

risposta

14

Se stai usando "esatta" modalità avrete bisogno di specificare gli id ​​degli elementi che si desidera convertire ai redattori.

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

In alternativa, è possibile utilizzare la modalità "textarea", che si applica indistintamente a tutti i l'editor textareas.

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

Basta ricordare che se si sta creando textarea in modo dinamico, è necessario chiamare tinyMCE.init() dopo creare gli elementi, perché hanno bisogno di essere esistente per TinyMCE per essere in grado di convertirli.

Here is the documentation on modes.

+1

Questo funziona solo per TinyMCE 3.x. – acme

3

È necessario utilizzare una modalità diversa nella configurazione. Ad esempio la modalità: "specific_textareas" per lavorare per tutta la textarea con una data classe che è specificata nel parametro editor_selector.

Al fine di lavorare su tutte le aree di testo con classe mceEditor è possibile utilizzare questo:

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

Questo non funziona affatto sensibilmente. Converte questo selettore E TUTTI GLI ALTRI TEXTAREAS tranne quelli con una classe specificata da "editor_deselector". Quindi in altre parole "editor_selector" non fa nulla e funziona solo "editor_deselector". Se si omette "editor_deselector", seleziona sempre tutte le aree di testo. –

-1

In base a tinymce.com/wiki.php/Configuration:selector, il selettore è il metodo consigliato per selezionare quali elementi devono essere modificabili.

Per tutti gli elementi textarea, come richiesto:

selector: "textarea", 

O, più elegantemente, solo gli elementi con un tag CSS specifica:

selector: "textarea.editme", 

<textarea class="editme"> 
1

Per TinyMCE 4.0 è necessario utilizzare un selettore o definire un oggetto/metodo tinymce.init per ciascuna configurazione desiderata (https://www.tinymce.com/docs/get-started/multiple-editors/).

Ad esempio, questa è una pagina con 3 redattori:

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