Forma mas facil de dar estilos a tus post con SCEditor

mick7seven · 19 Octubre de 2014, 17:23

Buenas amigos les traido un editor de BBCode para poder realizar con mas facilidad y estilos nuestros post, normal mente se pueden conseguir programas wysiwyg que es el acronimo de What You See Is What You Get que en español es "Lo que ves es lo que obtienes"

.

voy a presentar esta forma de hacerlo porque me parecio una sencilla solucion a un problema que en GNU/Linux no consegui uno que me funcionara tan bien como este.

aqui les traido el SCEditor que es muy usado en los foro, y blog, normalmente es usado para los panel de administracion de post y ese tipo de cosas yo lo que hice fue darle una solucion a mi problema usando este editor web wysiwyg.

Lo primero que debemos hacer es descargar y descomprimir el archivo donde esta contenido el editor SCEditor.

SCEditor

Luego de descomprimir el editor debemos descargar el archivo JQuery que este usa si queremos que funcione de forma OffLine, como este sera mi caso, lo descargo desde el siguiente link.

JQuery

Despues de descargar el archivo de JQuery yo lo guarde con el nombre "jquery.min.js" y lo guarde en la carpeta donde se descomprimio el SCEditor en una carpeta llamada "minified" ustedes lo pueden colocar donde quieran solo deben saber llamar al archivo desde el HTML que crearemos.

ya despues de tener todos los archivos listos, procedemos a creear un archivo HTML que le pondran el nombre que quieran yo use "SCEditor.html"

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>SCEditor</title>

	    <!-- Incluyendo JQuery -->
    <script type="text/javascript" src="minified/jquery.min.js"></script>
     
    <!-- Incluyendo Hoja de Estilos -->
    <link rel="stylesheet" href="minified/themes/default.min.css" type="text/css" media="all" />
     
    <!-- Incluyendo el JS del Editor -->
    <script type="text/javascript" src="minified/jquery.sceditor.bbcode.min.js"></script>

    <!-- Incluyendo el Lenguaje -->
    <script type="text/javascript" src="languages/es.js"  ></script>

	<!-- Incluyendo la inicializacion con JQuery -->
	<script>
		$(function() {
			$("textarea").sceditor({
				plugins: "bbcode",
				style: "minified/jquery.sceditor.default.min.css",
				locale: "es"
			});
		});
	</script>

	<!-- Estilizando -->

	<style type="text/css">
		body {
			background-color: #ccc; 
		}

 		 #bbcode_field{
 		 	height: 500px;
 		 	width: 800px;
 		 	
 		 }
	</style>
</head>
<body>
	    

	<textarea name="bbcode_field" id="bbcode_field"></textarea>

</body>
</html>

Asi quedo mi archivo HTML, siguiendo las recomendaciones que hay en la web de SCEditor, luego guardamos este archivo en la carpeta raiz donde descargamos nuestro SCEditor, ejecutamos el archivo y se abrira con nuestro explorador favorito.

Se debe mostrar algo parecido a esto:

ya tenemos de cierta forma "instalado" nuestro editor de BBCode, procedemos a redactar, cambiar tamaños de letra, etc.

teniendo nuestro post terminado solo nos resta hacer un paso mas y es presionar "ctrl+shift+s" para que aparezca todo el codigo BB que tienen que copiar y pegar en el foro.

espero que les sirva de ayuda a la hora de hacer sus post.

Salu2

Bomber Code

Publicidad

Forma mas facil de dar estilos a tus post con SCEditor

mick7seven

Temas Similares (5)