Un Editor SimpleMDE Markdown de Previsión con Rendimiento lateral del servidor.
El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer.
Una cosa que pensei que sería divertido añadir es un modo de ver la marcación para los artículos en el sitio con una reproducción en directo de la marcacion. Este es un editor simple de marcación que utiliza SimpleMDE y una rendición lateral del servidor de lamarcación utilizando la biblioteca markkdig que uso para reproducir estos mensajes de blog.
En el encabezamiento de los post del blog junto a la lista de categorías usted ' ahora verá un botón 'edit'
. Si hace clic en esto usted' obtiene una página que tiene un editor de marcaje y una vista previa del marcajeM SK2 Puede editar el marcaje e ver los cambios en tiempo real (cargar CtrlMSC4AltMST5R (o SSK7Alt\MST8R en MacMSP9 o Ingresar para actualizarMSV10 También puede hacer clic en botón para guardar el archivo de desmarcación a su máquina local.
DE COURSE esto no ' no guarda el archivo al servidor , sólo le descarga el fichero a su máquina local.I'm not going to let you edit my blog posts'
El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer.
My crappy JavaScript
El Javascript es bastante simplista y I'que acabo de dejar en el scripts El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. Edit.cshtml página en el momento.
window.addEventListener('load', function () {
console.log('Page loaded without refresh');
// Trigger on change event of SimpleMDE editor
window.simplemde.codemirror.on("keydown", function(instance, event) {
let triggerUpdate= false;
// Check if the Enter key is pressed
if ((event.ctrlKey || event.metaKey) && event.altKey && event.key.toLowerCase() === "r") {
event.preventDefault(); // Prevent the default behavior (e.g., browser refresh)
triggerUpdate = true;
}
if (event.key === "Enter")
{
triggerUpdate = true;
}
if (triggerUpdate) {
var content = simplemde.value();
// Send content to WebAPI endpoint
fetch('/api/editor/getcontent', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content }) // JSON object with 'content' key
})
.then(response => response.json()) // Parse the JSON response
.then(data => {
// Render the returned HTML content into the div
document.getElementById('renderedcontent').innerHTML = data.htmlContent;
document.getElementById('title').innerHTML = data.title;// Assuming the returned JSON has an 'htmlContent' property
const date = new Date(data.publishedDate);
const formattedDate = new Intl.DateTimeFormat('en-GB', {
weekday: 'long', // Full weekday name
day: 'numeric', // Day of the month
month: 'long', // Full month name
year: 'numeric' // Full year
}).format(date);
document.getElementById('publishedDate').innerHTML = formattedDate;
populateCategories(data.categories);
mermaid.run();
hljs.highlightAll();
})
.catch(error => console.error('Error:', error));
}
});
function populateCategories(categories) {
var categoriesDiv = document.getElementById('categories');
categoriesDiv.innerHTML = ''; // Clear the div
categories.forEach(function(category) {
// Create the span element
let span = document.createElement('span');
span.className = 'inline-block rounded-full dark bg-blue-dark px-2 py-1 font-body text-sm text-white outline-1 outline outline-green-dark dark:outline-white'; // Apply the style class
span.textContent = category;
// Append the span to the categories div
categoriesDiv.appendChild(span);
});
}
});
Como usted' verá que esto activa en el load Event, y luego escucha para el keydown evento en el editor SimpleMDE. Si la tecla pulsada es Ctrl-Alt-R El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. Enter then it sends the content of the editor to a WebAPI endpoint which renders the markdown and returns the HTML. This is then rendered into the renderedcontent El Comité recomienda que el Estado Parte adopte todas las medidas necesarias para garantizar la igualdad de oportunidades entre los hombres y las mujeres en materia de empleo, incluida la eliminación del trabajo forzoso.
Como los mensajes de mi blog se manejan en un BlogPostViewModel luego analiza el JSON devuelto y popula el título, fecha y categorías publicadasM SK1 También ejecuta mermaid El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. highlight.js bibliotecas para render cualquier diagrama y bloque de código.
El Comité recomienda que el Estado Parte adopte todas las medidas necesarias para garantizar la igualdad de oportunidades entre los hombres y las mujeres en materia de empleo, incluida la eliminación del trabajo forzoso.
El controlador de Editar
En primer lugar, he añadido un nuevo controlador llamado EditorController El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. Edit El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. Edit.cshtml El Comité recomienda que el Estado Parte adopte todas las medidas necesarias para garantizar la igualdad de oportunidades entre hombres y mujeres en materia de empleo, incluida la eliminación del trabajo forzoso.
[HttpGet]
[Route("edit")]
public async Task<IActionResult> Edit(string? slug = null, string language = "")
{
if (slug == null)
{
return View("Editor", new EditorModel());
}
var blogPost = await markdownBlogService.GetPageFromSlug(slug, language);
if (blogPost == null)
{
return NotFound();
}
var model = new EditorModel { Markdown = blogPost.OriginalMarkdown, PostViewModel = blogPost };
return View("Editor", model);
}
Usted' verá que esto es bastante simple, utiliza nuevos métodos en el IMarkdownBlogService para obtener el post de blog del slug y luego devolve la Editor.cshtml El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. EditorModel El Comité recomienda al Estado Parte que incluya en su próximo informe periódico información detallada sobre la situación de los derechos humanos y las libertades fundamentales en el marco del Pacto Internacional de Derechos Civiles y Políticos. BlogPostViewModel.
El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. Editor.cshtml la vista es una página simple con un textarea El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer. div para el reembolso de marcado. También tiene un button para guardar la marcación a la máquina local.
@model Mostlylucid.Models.Editor.EditorModel
<div class="min-h-screen bg-gray-100">
<p class="text-blue-dark dark:text-blue-light">This is a viewer only at the moment see the article <a asp-action="Show" asp-controller="Blog" asp-route-slug="markdownprevieweditor" class="text-blue-dark dark:text-blue-light">on how this works</a>.</p>
<div class="container mx-auto p-0">
<p class="text-blue-dark dark:text-blue-light">To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save <i class="bx bx-save"></i> icon lets you save the markdown file to disk </p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Column 1 -->
<div class="bg-white dark:bg-custom-dark-bg p-0 rounded shadow-md">
<textarea class="markdowneditor hidden" id="markdowneditor">@Model.Markdown</textarea>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-custom-dark-bg p-0 rounded shadow-md">
<p class="text-blue-dark dark:text-blue-light">This is a preview from the server running through my markdig pipeline</p>
<div class="border-b border-grey-lighter pb-2 pt-2 sm:pb-2" id="categories">
@foreach (var category in Model.PostViewModel.Categories)
{
<span
class="inline-block rounded-full dark bg-blue-dark px-2 py-1 font-body text-sm text-white outline-1 outline outline-green-dark dark:outline-white">@category</span>
}
</div>
<h2 class="pb-2 block font-body text-3xl font-semibold leading-tight text-primary dark:text-white sm:text-3xl md:text-3xl" id="title">@Model.PostViewModel.Title</h2>
<date id="publishedDate" class="py-2">@Model.PostViewModel.PublishedDate.ToString("D")</date>
<div class="prose prose max-w-none border-b py-2 text-black dark:prose-dark sm:py-2" id="renderedcontent">
@Html.Raw(Model.PostViewModel.HtmlContent)
</div>
</div>
</div>
</div>
</div>
Esto intenta hacer que el post de blog reproducido se vea tan cerca del actual post como sea posible. También tiene un script sección en la parte inferior que contiene el código JavaScript que he mostrado anteriormente.
El punto final de WebAPI
El punto final de WebAPI para esto sólo toma el contenido de marcaje y devolve el contenido HTML que se ha reproducido. Es muy simple y simplemente usa la IMarkdownService En el párrafo 2 de la parte dispositiva del proyecto de resolución, la Asamblea General pidió al Secretario General que le presentara en su quincuagésimo séptimo período de sesiones un informe sobre los progresos realizados en la aplicación de las recomendaciones formuladas por la Comisión Consultiva en Asuntos Administrativos y de Presupuesto.
[Route("api/editor")]
[ApiController]
public class Editor(IMarkdownBlogService markdownBlogService) : ControllerBase
{
public class ContentModel
{
public string Content { get; set; }
}
[HttpPost]
[Route("getcontent")]
public IActionResult GetContent([FromBody] ContentModel model)
{
var content = model.Content.Replace("\n", Environment.NewLine);
var blogPost = markdownBlogService.GetPageFromMarkdown(content, DateTime.Now, "");
return Ok(blogPost);
}
}
Esto es bastante simple y sólo devolve el BlogPostViewModel que luego se analiza por el JavaScript y se reproduce en el renderedcontent El Comité recomienda que el Estado Parte adopte todas las medidas necesarias para garantizar la igualdad de oportunidades entre los hombres y las mujeres en materia de empleo, incluida la eliminación del trabajo forzoso.
El Comité recomienda al Estado Parte que adopte todas las medidas necesarias para garantizar la igualdad entre los géneros y el empoderamiento de la mujer.
Esta es una manera sencilla de prever el contenido de la marcación y creo que es'es una buena adición al sitio. yoM SK2 estoy seguro de que hay mejores formas de hacerlo pero esto funciona para mí . espero que encuentres útil y si tiene alguna sugerencia de mejoras por favor me digaMSC4