Todo el mundo conoce el formato WYSIWYG (lo que ves es lo que obtienes) para diseñar páginas web, por ejemplo. Bueno, ahora Markdown es como un WYSIWYG simplificado y de la mejor manera. Markdown es una herramienta de conversión de texto a HTML para escritores web. Markdown te permite escribir utilizando un formato de texto sin formato fácil de leer y fácil de escribir y, a continuación, convertirlo a XHTML (o HTML) estructuralmente válido.
Además de que hay muchos editores de código abierto Javascript WYSIWYG, también hay una gran cantidad de plugins de editores de código abierto para Markdown escritos en Javascript. Disfruta de nuestra colección de 7 de los mejores editores markdown de código abierto.
7. JS-Markdown-Editor
JS Markdown editor es un plugin Javascript escrito por @Grafikart, es un editor de markdown fácil de usar con vista previa en vivo y carga de imágenes. La inicialización de este complemento transforma un área de texto en un editor de rebajas utilizando una nueva instancia de la clase MdEditor.
Para inicializar este plugin, proporciona como primer parámetro de la clase el identificador del área de texto que desea convertir en un editor de reducción:
var md = new MdEditor('#mdeditor', {
preview: true
});El editor proporciona incluso un cargador de imágenes integrado (usando arrastrar y soltar). Puedes habilitarlo proporcionando la opción de cargador con una cadena que contenga el punto de conexión de api de REST donde se deben cargar las imágenes. El objeto de configuración (segundo parámetro de la clase MdEditor) tiene un par de opciones que es posible que desees registrar en el repositorio oficial.
6. Bootstrap Markdown Editor
Este plugin es un editor de Markdown para Bootstrap con vista previa, soporte de carga de imágenes, accesos directos y otras características. Este plugin tiene 3 dependencias
- Bootstrap
- jQuery
- Ace editor
Para usarlo, agrega las dependencias con etiquetas de script en el documento:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/ace-builds/src-min/ace.js"></script>
<script src="bower_components/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js"></script>Selecciona con jQuery el área de texto en la que deseas inicializar el complemento y luego utiliza el metodo markdownEditor:
$('#myEditor').markdownEditor();El objeto options se puede pasar como un objeto en la inicialización del plugin, consulta la documentación para obtener más información.
5. Woofmark
Woofmark es un editor modular, progresivo y hermoso de Markdown y HTML. Este soporte de plugins incluye todos los navegadores cuerdos e IE9+. Las principales características de este editor son:
- Pequeño y enfocado
- Progresivo, realza un crudo
<textarea> - Modos de entrada Markdown, HTML y WYSIWYG
- ¡La selección de texto persiste incluso en los modos de entrada!
- Construido en Deshacer y Rehacer
- Estilos totalmente personalizables
- Trae tus propios analizadores
4. Editor
Editor no es un editor WYSIWYG, es un editor de rebajas de texto sin formato. CodeMirror es una dependencia,
Puede comenzar con Editor agregando los 3 archivos requeridos (CSS y JS):
<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>Y luego inicialo con la clase Editor y renderízalo usando el método render:
var editor = new Editor({
element: document.getElementById("myTextArea")
});
editor.render();3. Markdown-it
Markdown: es un analizador de rebajas que tiene un 100% de compatibilidad con CommonMark. Proporciona extensiones, complementos de sintaxis y alto rendimiento. Las principales características de Markdown-it son:
- Sigue la especificación CommonMark + agrega extensiones de sintaxis y azúcar (enlace automático de URL, tipógrafo).
- ¡Sintaxis configurable! Puede agregar nuevas reglas e incluso reemplazar las existentes.
- Alta velocidad.
- Seguro por defecto.
- Escrita en la comunidad plugins y otros paquetes en la NGP.
markdown-es el resultado de la decisión de los autores que contribuyeron al 99% del código Remarkable de pasar a un proyecto con la misma autoría pero con nuevo liderazgo (Vitaly y Alex). No es un tenedor.
2. simplemd-markdown-editor
SimpleMD es un reemplazo de área de texto de JavaScript para escribir un Markdown hermoso y comprensible. El editor WYSIWYG-esque permite a los usuarios que pueden tener menos experiencia con Markdown usar botones y atajos familiares de la barra de herramientas. Además, la sintaxis se representa durante la edición para mostrar claramente el resultado esperado. Los encabezados son más grandes, las palabras enfatizadas están en cursiva, los enlaces están subrayados, etc. SimpleMDE es uno de los primeros editores en presentar tanto el autoguardado integrado como la revisión ortográfica.
Los editores WYSIWYG que producen HTML son a menudo complejos y con errores. Markdown resuelve este problema de muchas maneras, además Markdown se puede renderizar de forma nativa en más plataformas que HTML. Sin embargo, Markdown no es una sintaxis con la que un usuario medio esté familiarizado, ni es visualmente clara durante la edición. En otras palabras, para un usuario desconocido, la sintaxis que escriben tendrá poco sentido hasta que hagan clic en el botón de vista previa. SimpleMDE ha sido diseñado para cerrar esta brecha para usuarios no técnicos que están menos familiarizados con la sintaxis de Markdown o simplemente están aprendiendo. SimpleMDE comenzó como una mejora del proyecto Editor de lepture, pero ahora ha adquirido una identidad propia. Se incluye con CodeMirror y depende de Font Awesome. CodeMirror es la columna vertebral del proyecto y analiza gran parte de la sintaxis de Markdown a medida que se escribe.
La inicialización de SimpleMDE es bastante simple:
<!-- Include the required files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<!-- Start simple MDE -->
<script>
var simplemde = new SimpleMDE({
element: document.getElementById("MyID")
});
</script>1. Editor.md
Editor.md es un editor de rebajas integrado de código abierto en línea escrito en Javascript y basado en CodeMirror, jQuery y Marked. Las principales características de Editor.md son:
- Admite Markdown estándar / CommonMark y GFM (GitHub Flavored Markdown);
- Con todas las funciones: vista previa en tiempo real, carga de imágenes (entre dominios), texto preformateado / bloques de código / inserción de tablas, plegado de código, reemplazo de búsqueda, solo lectura, temas, varios idiomas, L18n, entidades HTML, resaltado de sintaxis de código. ..;
- Extras de Markdown: Support ToC (Tabla de contenido) , Emoji , listas de tareas , @Links ...;
- Compatible con todos los principales navegadores (IE8 +), Zepto.js y iPad compatibles;
- Admite decodificación y filtrado de las etiquetas y atributos HTML ;
- Admite TeX (expresiones LaTeX, basadas en KaTeX) , diagrama de flujo y diagrama de secuencia de sintaxis extendida de Markdown;
- Admite el cargador de módulos AMD / CMD (Require.js y Sea.js) y los complementos de editor personalizados / definidos;
El ejemplo más básico de inicialización es:
<link rel="stylesheet" href="editormd.min.css" />
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
/*
// or
var editor = editormd({
id : "editormd",
path : "../lib/"
});
*/
});
</script>Si conoces otro editor Markdown de código abierto que vale la pena mencionar, compártelo con la comunidad en el cuadro de comentarios.
Conviertete en un programador más sociable