Piranha.core: add in page raw html

[codesoroush]

still i cant add raw html into my pages,
put some block that we can put raw html

[tidyui]

We've added this as a feature request, although the main concept of Piranha is that you should be able to create these kind of components yourselves to suit the needs of your application. Let me demonstrate by giving you the code needed to create such a block in your application:

RawHtmlBlock.cs

This is class for the block which inherits for the standard TextBlock as it just needs a single string value.

~~~ csharp
using Piranha.Extend;
using Piranha.Extend.Blocks;

namespace MyWeb.Blocks
{
[BlockType(Name = "Html", Category = "Content", Icon = "fab fa-html5", Component = "rawhtml-block")]
public class RawHtmlBlock : TextBlock
{
}
}
~~~

custom-blocks.js

This is the javascript-file containing your custom Vue component, as specified in the BlockTypeAttribute. This file should be located somewhere in your wwwroot directory.

~ js
Vue.component('rawhtml-block', {
props: ['uid', 'model'],
template: '

'
});
~

custom-blocks.css

This is just some basic styles to make it look nicer, adapt to your needs. This file should be located somewhere in your wwwroot directory.

~ css
.rawhtml-block textarea {
background: #043143;
color: #9bddff;
width: 100%;
font-size: 0.875rem;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
border: medium none;
padding: 0.75rem 1rem;
border-radius: 0.25rem;
}
~

Startup.cs

Then you need to add the following three lines in Configure in your Startup.cs. The first line registers your block, the second and third lines registers you js/css resources so they are included in the manager interface. The lines should be placed below App.Init().

~~~ csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IApi api)
{
...

App.Blocks.Register<MyWeb.Blocks.RawHtmlBlock>();
App.Modules.Manager().Scripts.Add("~/custom-blocks.js");
App.Modules.Manager().Styles.Add("~/custom-blocks.css");
...

}
~~~

Best regards

[dinukasal]

@tidyui in recent new versions do we need to manually add custom vue components of custom blocks we create? Because I saw in some github issues you have mentioned piranha automatically creates vue components for custom blocks.

[tidyui]

If you leave out the Component property from the BlockTypeAttribute a generic rendering will be applied. This however will only render the fields in the block with the standard field components, so in this example I added a custom component to show a complete example.

[manukautech]

TinyMCE itself has an optional plugin and control that adds raw html editing capability. It is working well for me in Piranha. Needs a small edit of Piranha CMS file "editorconfig.json" adding the keyword "code" to "plugins" and adding "| code" to "toolbar".

{
"plugins": "autoresize autolink code hr paste lists piranhalink piranhaimage code",
"toolbar": "bold italic | bullist numlist hr | alignleft aligncenter alignright | formatselect styleselect | piranhalink piranhaimage | code",

[codesoroush]

@tidyui do you have any plan use blazor wasm instead of vue ?

[codesoroush]

@manukautech This solution has problem with some html code

[codesoroush]

@tidyui with this solution you solved my problem thx <3 <3

[tidyui]

@codesoroush We evaluated Blazor before deciding on Vue and found Vue to be more convenient and have better performance. However Blazor was in beta at the time and is much more stable and optimized now.

Since we try to provide good backwards compatibility we are not planning on rewriting the manager with Blazor.

Regards