Merge pull request #8191 from abpframework/cms-kit/contents-as-markdown

Cms Kit - Contents as markdown
pull/8218/head
İlkay İlknur 5 years ago committed by GitHub
commit 1f966f3134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -174,17 +174,16 @@
});
var shorDescriptionEdited = false;
$pageContentInput.on('change', function () {
function reflectContentChanges(htmlContent) {
if (shorDescriptionEdited) {
return;
}
var htmlValue = $pageContentInput.val();
var plainValue = jQuery('<div>').html(htmlValue).text().replace(/\n/g, ' ').substring(0, 120);
var plainValue = jQuery('<div>').html(htmlContent).text().replace(/\n/g, ' ').substring(0, 120);
$shortDescription.val(plainValue);
});
}
$shortDescription.on('change', function () {
shorDescriptionEdited = true;
@ -234,15 +233,16 @@
previewStyle: 'tab',
height: "95vh",
minHeight: "25em",
initialEditType: initialValue ? 'wysiwyg' : 'markdown',
initialEditType: 'markdown',
language: $editorContainer.data("language"),
hooks: {
addImageBlobHook: uploadFile,
},
events: {
change: function (_val) {
$editorInput.val(editor.getHtml());
$editorInput.val(editor.getMarkdown());
$editorInput.trigger("change");
reflectContentChanges(editor.getHtml());
}
}
}).data(editorDataKey);

@ -180,14 +180,14 @@
previewStyle: 'tab',
height: "95vh",
minHeight: "25em",
initialEditType: initialValue ? 'wysiwyg' : 'markdown',
initialEditType: 'markdown',
language: $editorContainer.data("language"),
hooks: {
addImageBlobHook: uploadFile,
},
events: {
change: function (_val) {
$editorInput.val(editor.getHtml());
$editorInput.val(editor.getMarkdown());
$editorInput.trigger("change");
}
}

@ -7,7 +7,7 @@
var $buttonSubmit = $('#button-page-create');
$createForm.data('validator').settings.ignore = ":hidden, [contenteditable='true']:not([name]), .tui-popup-wrapper";
$createForm.on('submit', function (e) {
e.preventDefault();
@ -53,7 +53,7 @@
$slug.change(function () {
slugEdited = true;
});
// -----------------------------------
function getUppyHeaders() {
var headers = {};
@ -61,7 +61,7 @@
return headers;
}
var fileUploadUri = "/api/cms-kit-admin/media/page";
var fileUriPrefix = "/api/cms-kit/media/";
@ -88,14 +88,14 @@
previewStyle: 'tab',
height: "95vh",
minHeight: "25em",
initialEditType: initialValue ? 'wysiwyg' : 'markdown',
initialEditType: 'markdown',
language: $editorContainer.data("language"),
hooks: {
addImageBlobHook: uploadFile,
},
events: {
change: function (_val) {
$editorInput.val(editor.getHtml());
$editorInput.val(editor.getMarkdown());
$editorInput.trigger("change");
}
}

@ -63,14 +63,14 @@
previewStyle: 'tab',
height: "95vh",
minHeight: "25em",
initialEditType: initialValue ? 'wysiwyg' : 'markdown',
initialEditType: 'markdown',
language: $editorContainer.data("language"),
hooks: {
addImageBlobHook: uploadFile,
},
events: {
change: function (_val) {
$editorInput.val(editor.getHtml());
$editorInput.val(editor.getMarkdown());
$editorInput.trigger("change");
}
}

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Mvc.RazorPages;
using Markdig;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.DependencyInjection;
using Volo.Abp.AspNetCore.Mvc.Localization;
using Volo.Abp.AutoMapper;
@ -55,6 +56,14 @@ namespace Volo.CmsKit.Public.Web
{
options.AddMaps<CmsKitPublicWebModule>(validate: true);
});
context.Services
.AddSingleton(_ => new MarkdownPipelineBuilder()
.UseAutoLinks()
.UseBootstrap()
.UseGridTables()
.UsePipeTables()
.Build());
}
public override void PostConfigureServices(ServiceConfigurationContext context)

@ -1,9 +1,14 @@
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@using Volo.CmsKit.Public.Web.Renderers
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
@inject IMarkdownToHtmlRenderer MarkdownRenderer
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages.PageViewModel
<abp-card>
<abp-card-body>
@Html.Raw(Model.Content)
@Html.Raw(await MarkdownRenderer.RenderAsync(Model.Content))
</abp-card-body>
</abp-card>

@ -3,10 +3,25 @@ using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc;
using Volo.CmsKit.Public.Pages;
using Volo.CmsKit.Public.Web.Renderers;
using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
{
[ViewComponent(Name = "CmsDefaultPage")]
[Widget(
StyleTypes = new[]
{
typeof(HighlightJsStyleContributor)
},
ScriptTypes = new[]
{
typeof(HighlightJsScriptContributor)
},
ScriptFiles = new[]
{
"/Pages/Public/CmsKit/highlightOnLoad.js"
})]
public class DefaultPageViewComponent : AbpViewComponent
{
protected IPagePublicAppService PagePublicAppService { get; }
@ -15,7 +30,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
{
PagePublicAppService = pagePublicAppService;
}
public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string title, string content)
{
var model = new PageViewModel
@ -24,7 +39,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
Title = title,
Content = content
};
return View("~/Pages/CmsKit/Shared/Components/Pages/Default.cshtml", model);
}
}
@ -32,7 +47,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
public class PageViewModel
{
public Guid Id { get; set; }
public string Title { get; set; }
public string Content { get; set; }

@ -7,14 +7,27 @@
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
@using Volo.CmsKit.Public.Web.Renderers
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
@inherits CmsKitPublicPageBase
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
@inject IMarkdownToHtmlRenderer MarkdownRenderer
@section styles{
<abp-abp-style-bundle>
<abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
<abp-style type="typeof(HighlightJsStyleContributor)" />
</abp-abp-style-bundle>
}
@section scripts{
<abp-script-bundle>
<abp-script type="typeof(HighlightJsScriptContributor)" />
<abp-script src="/Pages/Public/CmsKit/highlightOnLoad.js" />
</abp-script-bundle>
}
@{
@ -31,7 +44,9 @@
<span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
<small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
</p>
@Html.Raw(Model.BlogPost.Content)
@Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content))
<p class="mb-3">
@if (Model.BlogPost.LastModificationTime != null)
{
@ -45,10 +60,10 @@
if (Model.TagsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(TagViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
</div>
@ -62,8 +77,8 @@
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
@ -76,8 +91,8 @@
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Mvc;
using Markdig;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;

@ -2,11 +2,15 @@
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.CmsKit.Localization
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
@inject IHtmlLocalizer<CmsKitResource> L
@section styles{
<abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
<style>
@Html.Raw(Model.Page.Style)
</style>

@ -0,0 +1,8 @@
$(function () {
document.querySelectorAll('code').forEach(block => {
$(block).addClass('hljs'); // Put in gray box even language is not supported
hljs.highlightBlock(block);
});
})

@ -0,0 +1,9 @@
using System.Threading.Tasks;
namespace Volo.CmsKit.Public.Web.Renderers
{
public interface IMarkdownToHtmlRenderer
{
Task<string> RenderAsync(string rawMarkdown);
}
}

@ -0,0 +1,22 @@
using Markdig;
using System.Threading.Tasks;
using Volo.Abp.DependencyInjection;
namespace Volo.CmsKit.Public.Web.Renderers
{
public class MarkdownToHtmlRenderer : IMarkdownToHtmlRenderer, ITransientDependency
{
protected MarkdownPipeline MarkdownPipeline { get; }
public MarkdownToHtmlRenderer(MarkdownPipeline markdownPipeline)
{
MarkdownPipeline = markdownPipeline;
}
public Task<string> RenderAsync(string rawMarkdown)
{
return Task.FromResult(
Markdown.ToHtml(rawMarkdown, MarkdownPipeline));
}
}
}

@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<Project Sdk="Microsoft.NET.Sdk.Web">
<Import Project="..\..\..\..\common.props" />
<Import Project="..\..\..\..\configureawait.props" />
@ -16,6 +16,7 @@
<ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
<ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" />
<PackageReference Include="Markdig.Signed" Version="0.24.0" />
</ItemGroup>
<ItemGroup>
@ -29,9 +30,4 @@
<Content Remove="Components\**\*.css" />
</ItemGroup>
<ItemGroup>
<None Remove="Pages\Public\CmsKit\Blogs\index.css" />
<None Remove="Pages\Public\CmsKit\Pages\index.css" />
</ItemGroup>
</Project>

@ -5,7 +5,8 @@
"access": "public"
},
"dependencies": {
"@abp/star-rating-svg": "~4.2.2"
"@abp/star-rating-svg": "~4.2.2",
"@abp/highlight.js": "~4.2.2"
},
"gitHead": "bb4ea17d5996f01889134c138d00b6c8f858a431"
}

Loading…
Cancel
Save