0

Hola a todos los pongo en contexto: Tengo un textarea a la cual me vi en la necesidad de agregarle un plugin en Jquery pues tenía que adicionar funciones de un editor WYSIWYG. Las funciones eran básicas, tales como: Negritas, cursivas y listas (por decir un ejemplo), y en internet me encontré este plugin que se llama: Easy editor http://habibhadi.com/lab/easyeditor/examples.html

Yo tengo mi textarea así, solo agregué el ID para que el código jquery funcione quedando de la siguiente manera el HTML:

<textarea   class="form-control"  id="infoadicional" name="infoadicional" placeholder="Escribe algunas líneas sobre ti." value="hola" rows="11" maxlength="2000" ><?php echo $variable ?></textarea>	

Como se pueden dar cuenta, ese código HTML ya tiene el atributo maxlength, sin embargo no funciona, y con justa razón, al revisar el código, noto que el plugin está agregando otro div quedando de la siguinte manera: introducir la descripción de la imagen aquí

Siguiendo mis conocimientos básicos, utilizo el siguiente código para evitar que el elemento DIV permita escribir más caracteres una vez que se llega al límite. Pero desafortunadamente no funciona :(

$('.easyeditor').keyup(function() {
if ( $(this).val.length > 2000) {
    return false;
    }
});

Todo para logar un editor así: introducir la descripción de la imagen aquí

¿Alguien conocedor del tema que me pueda ayudar por favor?

3

1 respuesta 1

1

Te dejo dos formas de hacerlo, la primera es por si necesitas estrictamente que esto se haga con el evento "keyup". Con esto, el usuario podrá seguir ingresando caracteres pero si son más de 20, solo quedarán los primeros 20.

La segunda, captura el evento (e) "keydown" y si hay más de 20 caracteres y no es el "backspace" (keyCode=8), impedirá que se lance el evento de cualquier otra tecla que presiones.

//primer método
$(document).on('keyup', '.easyeditor', function (e) {
    if ($(this).val().length > 19){
        $(this).val($(this).val().substr(0,20));
    }
});


//segundo método
$(document).on('keyup keydown', '.easyeditor2', function (e) {
    if ($(this).val().length > 19 && e.keyCode!=8){
        e.preventDefault();
        $(this).val($(this).val().substr(0,20));
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="ta1" class="easyeditor" cols="30" rows="10"></textarea>
<textarea name="ta2" class="easyeditor2" cols="30" rows="10"></textarea>

Espero haberte ayudado.

3
  • ¿Me creerás que tampoco me funciona? Voy a ver la manera de grabar un video y mañana lo subo. Creeme, esto ya me está desesperando un poco :( y el autor del plugin no me respondió un tweet. No creo que sea problema de mi código, si no más bien del plugin... el 17 abr. 2018 a las 7:16
  • Hola Roberto, he estado testeando el segundo código que me compartiste y aparentemente funciona sin embargo he notado algo. Si escribo rápido no hace la validación y puedo escribir -N cantidad de caracteres, pero si tomo una pausa y escribo "lento", entonces la validación si se hace y no me permite ingresar más caracteres. ¿Que crees que esté pasando amigo? Gracias. el 17 abr. 2018 a las 22:34
  • Es raro que te funcione así, ya que debería andarte igual que el snipet que adjunté para ejecutar. Has probado hacerlo sin el plugin? Es tan estricto que utilices ese plugin? El editor que intentas hacer se puede lograr con pocas lineas de html. el 18 abr. 2018 a las 3:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.