jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxEditor se usa para representar un editor de texto jQuery HTML que se puede usar para simplificar la creación de contenido web y también se puede usar como reemplazo de las áreas de texto HTML.
El método val() se usa para establecer el valor del valor del widget jqxEditor. Toma una string como entrada y devuelve la string que contiene el valor actual dentro del editor.
Sintaxis:
Establecer el valor del editor
$('Selector').jqxEditor('val', string);
Devuelve el valor del editor.
var value = $("Selector").val();
Parámetros: este método toma un parámetro como se explica a continuación:
- Valor: Es un valor de string que se utiliza para establecer el valor del editor.
Archivos vinculados: descargue jQWidgets desde https://www.jqwidgets.com/download/link. En el archivo HTML, busque los archivos de script en la carpeta descargada:
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”> </script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownbutton.js”></script>
<script type= ”texto/javascript” src=”jqwidgets/jqxcolorpicker.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type= ”texto/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
El siguiente ejemplo ilustra el método jqxEditor val() en jQWidgets:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcolorpicker.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxwindow.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxeditor.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxEditor val() Method</h3>
<textarea id="editor">
</textarea>
</center>
<script type="text/javascript">
$(document).ready(function () {
$('#editor').jqxEditor({
height: "400px",
width: '800px'
});
$('#editor').jqxEditor('val', 'Hi Geeks');
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxeditor/jquery-editor-api.htm