BazzarGate.CkEditorLibrary 1.0.8.3

BazzarGate CKEditor Plugin v1..0.7 this is a plugin for CKEditor 4.x that adds a free html editor using CKEditor with custom toolbar.

Features

• Customizable toolbar with essential formatting options
• Easy integration with CKEditor 4.x
• Lightweight and fast
• Responsive design
• Supports all major browsers
• Free to use and modify
• Open source
• Documentation included
• Regular updates and bug fixes
• Community support
• Compatible with CKEditor 4.x versions
• Easy installation and setup
• User-friendly interface
• Supports multiple languages
• Customizable styles
• Image upload support
• Table support
• Link support
• List support
• Undo/Redo support
• Source code view
• Full-screen mode
• Accessibility support
• Mobile-friendly
• SEO-friendly
• Cross-browser compatibility

Installation

##******************************************************** Using Visual Studio

Prerequisites This procedure requires:

Microsoft Visual Studio

Microsoft .NET

Procedure On the Visual Studio toolbar, click the New Project button.

Select the Blazor Web App template and follow the steps to set up the project.

Use the NuGet package manager console to install the BazzarGate.CkEditorLibrary package, such as:

Install-Package BazzarGate.CkEditorLibrary To test the application, run the application by pressing Ctrl+F5.

Using a command prompt or terminal Prerequisites This procedure requires:

Microsoft .NET

Procedure Create a new Blazor project:

dotnet new blazor -o BlazorApp --no-https Change into the new application directory:

cd BlazorApp Install the BazzarGate.CkEditorLibrary integration:

dotnet add package BazzarGate.CkEditorLibrary Test the application using the .NET development server.

To start the development server, in the project’s root directory, run:

dotnet watch run This will start a local development server accessible at http://localhost:{PORT}, where {PORT} is specified in the project’s Properties/launchSettings.json file.

To stop the development server, select on the command line or command prompt and press Ctrl+C.

Post-installation Verify the installation by checking the ItemGroup references in the project file. For example, if the project is named BlazorApp, the relevant file would be BlazorApp.csproj with the dependency referenced as follows:

<ItemGroup> <PackageReference Include="BazzarGate.CkEditorLibrary " Version="X.Y.Z" /> </ItemGroup> Add the ckeditorInterop.js script to the main page. If using the Blazor Web App, add the script in Components/App.razor, for example:

<script src="_framework/blazor.web.js"></script> <script src="_content/BazzarGate.CkEditorLibrary/js/ckeditorInterop.js"></script>

The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide.

If using Blazor Server, add the script in Pages/_Host.cshtml, for example:

<script src="_framework/blazor.server.js"></script> <script src="_content/BazzarGate.CkEditorLibrary/js/ckeditorInterop.js"></script>

If using WASM, add the script in wwwroot/index.html, for example:

<script src="_content/BazzarGate.CkEditorLibrary/js/ckeditorInterop.js"></script> <script src="_framework/blazor.webassembly.js"></script>

Add the Editor component to a page by either:

Using the using directive:

@using BazzarGate.CkEditorLibrary <Editor /> For example:

File: Pages/Index.razor

@page "/" @rendermode InteractiveServer @using BazzarGate.CkEditorLibrary

<h1>Hello, world!</h1> <h2>Welcome to your new app.</h2> <CkEditor @bind-Value="model.FullStory" CustomClass="h-[400px]" Style="width:100%"></CkEditor> Using the component with its namespace:

<BazzarGate.CkEditorLibrary .Editor /> For example:

File: Pages/Index.razor

@page "/" @rendermode InteractiveServer @using BazzarGate.CkEditorLibrary

<h1>Hello, world!</h1> <h2>Welcome to your new app.</h2> <CkEditor @bind-Value="model.FullStory" CustomClass="h-[400px]" Style="width:100%"></CkEditor> In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that @rendermode InteractiveServer is specified in a page component.