Plugin guide

[stefaner]

Hi,

Is there anyone who can share a guide on how to write their now plugin and how to use it in FluentCMS.

What I've done so far it to write a Razor component in a separate project and linked that project to FluentCMS. But I don't know how to insert it on the pages.
Or am I on the wrong path? Some directions would be great.

[pournasserian]

Hi @stefaner,

As you know, each page may have some plugins.

Each plugin is defined as PluginDefinition. It has the definition of references and some additional metadata for the Blazor component.

• In order to define a new plugin, follow these steps:
• Create a new "Razor Class Library" project in VS named "FluentCMS.Web.Plugins.HelloWorld"
• Delete existing files and create a Razor component in the project (let's say HelloWorldViewPlugin) and write your own codes, For instance:

<h3>HelloWorldViewPlugin</h3>

@code {
    [Parameter]
    public object Plugin { get; set; } = default!;
}

It should have the Plugin parameter.

• Add the project reference to FluentCMS project (main project)
• In manifest.json files located in FluentCMS/Templates/Default and FluentCMS/Templates/Blank find the PluginDefinitions node and add the below node to the array:

{
    "Name": "Hello World",
    "Category": "Example",
    "Description": "Hello World Plugin",
    "Assembly": "FluentCMS.Web.Plugins.HelloWorld.dll",
    "Types": [
        {
            "Name": "HelloWorld",
            "Type": "HelloWorldViewPlugin",
            "IsDefault": true
        }
    ]
}

• Run the project and start setup process and in a page, start editing the page. You should see your plugin in the plugins sidebar:

• You can drag and drop your plugin into the page and see your plugin like this:

[Mr-Sunshinexplorer]

but it cant editable after set data-inline-editable

[pournasserian]

data-inline-editable is a feature for raw HTML contents being editable for admins