Testo della filigrana in CKEditor
-
28-10-2019 - |
Domanda
Sai come aggiungere la filigrana in CKEditor (visual word processor)? Voglio il comportamento come questo: quando il CKEditor viene caricato, ha il testo per impostazione predefinita.Quando ci clicco sopra, il testo deve scomparire.
Soluzione
Di seguito sono riportati i passaggi per aggiungere il water mark in CKEditor
Generalmente quando si imposta il testo predefinito in Ck Editor tramite java script al caricamento della pagina.L'evento JavaScript viene attivato prima che il controllo venga effettivamente caricato, quindi se possibile imposta il testo per il codice sottostante.
Allegare eventi in Javascript per OnFocus e OnBlur
$(document).ready(function() {
var myeditor = CKEDITOR.instances['EditorId'];
myeditor.on("focus", function(e) {
RemoveDefaultText();
});
myeditor.on("blur", function(e) {
setDefaultText();
});
});
Definisci il tuo testo predefinito in questa funzione
function setDefaultText() {
if (CKEDITOR.instances['EditorId'].getData() == '') {
CKEDITOR.instances['EditorId'].setData('Your Message Here');
}
}
function RemoveDefaultText() {
if (CKEDITOR.instances['EditorId'].getData().indexOf('Your Mesage Here') >= 0) {
CKEDITOR.instances['EditorId'].setData('');
CKEDITOR.instances['EditorId'].focus();
}
}
Puoi anche definire gli stili per il water mark aggiungendo classi al testo predefinito e posizionando la classe nel contenuto del tuo editor ck css altrimenti non funzionerà
Altri suggerimenti
Un plug-in pronto per l'uso può essere testato qui .Permette di personalizzare il testo di default e prende in conto, dialoghi oltre a leggere i dati da uno script esterno.
Potresti voler provare questo plugin jQuery: