Nombre del proyecto: Editor.md -- Editor Markdown

Dirección de código abierto en Github: https://github.com/pandao/editor.md

Dirección de prueba en línea: https://pandao.github.io/editor.md/

Ejemplo completo: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

En el mundo actual de Internet, Markdown se ha convertido en el lenguaje de marcado preferido por creadores de contenido, desarrolladores y escritores técnicos. Es ampliamente popular por su sintaxis simple y su formato fácil de leer.

Editor.md es un editor Markdown en línea de código abierto e incrustable, construido sobre CodeMirror, jQuery y Marked. Su aparición ofrece a los usuarios una experiencia de edición Markdown más conveniente y rica en funciones.

Editor.md es un editor Markdown potente, flexible y fácil de usar, que proporciona una solución de edición en línea eficiente tanto para aficionados como para profesionales de Markdown.

Editor.md ofrece una gran variedad de funciones y complementos, lo que permite a los usuarios personalizarlo según sus necesidades. Por ejemplo, mediante complementos, los usuarios pueden editar fórmulas matemáticas, dibujar diagramas de flujo y diagramas de secuencia, e incluso implementar funciones como la edición colaborativa en tiempo real.

La página principal ofrece muchos ejemplos para facilitar nuestro aprendizaje y uso:

Un ejemplo sencillo:

Dibujar un diagrama de secuencia:

Editor.md cuenta con las siguientes características:

  • Lo que ves es lo que obtienes (WYSIWYG): Editor.md ofrece una interfaz de edición intuitiva, que permite a los usuarios ver el resultado renderizado del texto Markdown en tiempo real en el editor.

  • Altamente personalizable: A través de las opciones de configuración, los usuarios pueden ajustar la apariencia y el comportamiento del editor para adaptarse a diferentes escenarios de uso y estilos de marca.

  • Amplio soporte de complementos: Editor.md admite múltiples complementos, como carga de imágenes, emoticonos, resaltado de código, etc., lo que amplía enormemente las funciones del editor.

  • Compatibilidad multiplataforma: Ya sea en escritorio o dispositivos móviles, Editor.md ofrece una experiencia de edición fluida.

  • Fácil de integrar: Como componente, Editor.md se puede integrar sin problemas en aplicaciones o servicios web existentes, sin necesidad de configuración compleja.

Casos de uso de Editor.md:

  • Blogs y sistemas CMS: Proporciona funcionalidad de edición Markdown para sistemas de gestión de contenido, lo que permite a los autores centrarse en la creación.
  • Foros y comunidades: Proporciona un editor Markdown en plataformas con contenido generado por usuarios, mejorando la calidad de las publicaciones.
  • Documentación y bases de conocimiento: Ofrece un editor Markdown para documentación técnica y centros de ayuda, garantizando la coherencia del formato de los documentos.
  • Sitios web personales y portafolios: Proporciona un editor Markdown para proyectos personales, facilitando la actualización y el mantenimiento rápidos.

Instalación

Método de instalación con npm:

npm install editor.md

Método de instalación con Bower:

bower install editor.md

Crear un editor Markdown:

Ejemplo

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

Convertir Markdown a HTML:

Ejemplo

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>            
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
            var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>