First, you need to place the necessary files in the public folder.
Directory Structure:
project-root/
├── public/
│ └── assets/
│ └── spk-editor/
│ ├── spk-editor.js
│ └── spk-editor.css
Step 2: Include Files in index.html
In your React project's public/index.html file, add the following and <script> tags to include the SPK-Editor assets:
<link rel="stylesheet" href="/assets/spk-editor/spk-editor.css">
<script src="/assets/spk-editor/spk-editor.js"></script>
In your Next.js project, open the pages/_app.js file and import the SPK Editor CSS file:
import '../public/assets/plugins/spk-editor/spk-editor.css';
3. Create the SPK Editor Component
Create a new file for the SPK Editor component (e.g., SpkEditor.tsx). This component will initialize the editor and handle its configuration.
import { useEffect } from 'react';
// Declare the external SPK variable
declare var Spk: any;
// Define interfaces for options
interface SpkDropdownType {
name: string;
value: string;
buttonclass: string;
}
interface SpkTextType {
type?: string;
icon: string;
}
interface SpkEditorOptions {
apikey?: string;
exclude?: {
texttype?: string[];
textstyle?: string[];
fontfamily?: boolean;
fontsize?: boolean;
headings?: boolean;
lineheight?: string[];
alignment?: string[];
list?: string[];
link?: boolean;
hr?: boolean;
table?: boolean;
inc_indent?: boolean;
dec_indent?: boolean;
images?: boolean;
videos?: boolean;
reset?: boolean;
undo?: boolean;
redo?: boolean;
fullscreen?: boolean;
copyToClipboard?: boolean;
print?: boolean;
export?: boolean;
pre?: boolean;
};
icons?: {
texttype?: SpkTextType[];
fontfamily?: SpkTextType;
fontsize?: SpkTextType;
headings?: SpkTextType;
lineheight?: SpkTextType;
images?: SpkTextType;
table?: SpkTextType;
inc_indent?: SpkTextType;
dec_indent?: SpkTextType;
link?: SpkTextType;
videos?: SpkTextType;
hr?: SpkTextType;
alignment?: SpkTextType;
list?: SpkTextType[];
undo?: SpkTextType;
redo?: SpkTextType;
reset?: SpkTextType;
fullscreen?: SpkTextType;
copyToClipboard?: SpkTextType;
print?: SpkTextType;
export?: SpkTextType;
pre?: SpkTextType;
};
dropdown?: {
headings?: string[];
lineheight?: SpkDropdownType[];
fontfamily?: SpkDropdownType[];
fontsize?: number[];
alignment?: string[];
list?: string[];
};
placeholderText?: string;
customClass?: string;
dark?: boolean;
rtl?: string;
showwords?: boolean;
showchar?: boolean;
}
// Define default options for the editor
const defaultEditorOptions: SpkEditorOptions = {
apikey: 'secret',
placeholderText: 'Enter your text here...',
customClass: 'spk-editor',
dark: false,
rtl: 'ltr',
showwords: true,
showchar: true,
};
// Define props for the SPK Editor component
interface SpkEditorProps {
id: string; // 'id' must always be a string
options?: SpkEditorOptions; // 'options' is optional and will fall back to default
}
// Create the SPK Editor component
const SpkEditor: React.FC<SpkEditorProps> = ({ id, options }) => {
useEffect(() => {
// Load the external SPK Editor script when the component mounts
const script = document.createElement('script');
script.src = '/assets/plugins/spk-editor/spk-editor.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// Initialize the editor after the script loads
const editor = new Spk(document.querySelector(`#${id}`), {
...defaultEditorOptions, // Use default options
...options, // Override with passed options
});
};
// Cleanup the script when component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
return (
<textarea id={id} className={options?.customClass || defaultEditorOptions.customClass}></textarea>
);
};
export default SpkEditor;
4. Using the SPK Editor Component
To use the SPK Editor in your Next.js pages or components, import it and provide the necessary props:
import SpkEditor from 'path_to_the_component';
const MyPage = () => {
return (
<div>
<h1>My SPK Editor
<SpkEditor id="spk-editor-one" options={{ placeholderText: 'Hello' }} />
</div>
);
};
export default MyPage;
5. Final Steps
Make sure that the spk-editor.js file is correctly loaded in the browser, and the SPK Editor should initialize without any issues.
You can customize the options prop when using the SpkEditor component to adjust the editor's behavior according to your needs.
Angular Integration of SPK Editor
1. Place the spk-editor Plugin in Assets
You need to place the plugin files (spk-editor.js and spk-editor.css) in your Angular project's assets folder.
Use Angular CLI to generate the reusable component.
> ng generate component spk-editor
Complete Component Code
This component integrates the spk-editor plugin after the view has been initialized using Angular's AfterViewInit lifecycle hook.
import { Component, AfterViewInit, ElementRef } from '@angular/core';
@Component({
selector: 'app-spk-editor',
template: `<textarea class="spk-editor-one"></textarea>`,
styles: [],
standalone: true, // Optional: If using standalone components
})
export class SpkEditorComponent implements AfterViewInit {
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const editor = new (window as any).Spk(this.el.nativeElement.querySelector('.spk-editor-one'), {
apikey: "YOUR API KEY",
placeholderText: `
Hi,
Welcome to SPK text editor.
Please, write text here!
Super simple Editor
`,
});
}
}
The AfterViewInit lifecycle hook ensures the editor is initialized once the DOM has been fully rendered.
Replace "YOUR API KEY" with your actual API key for the SPK editor.
4. Usage of the Custom SpkEditorComponent
You can now use the SpkEditorComponent in other components.
a) In Standalone Components
In a standalone component, import and declare the editor component directly in the imports array.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpkEditorComponent } from './spk-editor.component';
@Component({
selector: 'app-example',
standalone: true,
imports: [CommonModule, SpkEditorComponent],
template: `
<app-spk-editor [placeholderText]="'Editor in Another Component'"></app-spk-editor>
`,
})
export class ExampleComponent {}
b) In Non-Standalone Components (Traditional Angular Module)
If you are using Angular modules, import the SpkEditorComponent in the module's imports array.
Module Example (*.module.ts):
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpkEditorComponent } from './spk-editor/spk-editor.component';
@NgModule({
declarations: [
... // other components
],
imports: [
CommonModule,
SpkEditorComponent, // Import the editor component here
],
})
export class ExampleModule {}
HTML Usage:
This structure clearly breaks down the steps for setting up the spk-editor in your Angular project, including file placements, configuration, and usage in components.
1. Place Files in the Assets Folder
Ensure your project structure includes the npecessary files for the SPK-Editor plugin. Organize your project as follows:
Add the following code to create the SPK-Editor component:
<template>
<textarea :id="id" :class="computedClass"></textarea>
<script>
export default {
props: {
id: {
type: String,
required: true,
},
options: {
type: Object,
default: () => ({}),
},
},
data() {
return {
defaultEditorOptions: {
apikey: 'secret',
placeholderText: 'Enter your text here...',
customClass: 'spk-editor',
dark: false,
rtl: 'ltr',
showwords: true,
showchar: true,
},
};
},
computed: {
computedClass() {
return this.options.customClass || this.defaultEditorOptions.customClass;
},
},
mounted() {
// Load the external script when the component is mounted
const link = document.createElement('link');
link.href = 'src/assets/plugins/spk-editor/spk-editor.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
const script = document.createElement('script');
script.src = 'src/assets/plugins/spk-editor/spk-editor.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// Initialize the editor after the script loads
this.initializeEditor();
};
},
methods: {
initializeEditor() {
if (typeof Spk !== 'undefined') {
new Spk(document.querySelector(`#${this.id}`), {
...this.defaultEditorOptions,
...this.options,
});
} else {
console.error('Spk is not defined');
}
},
},
beforeUnmount() {
// Cleanup the script when the component is unmounted
const link = document.querySelector(`link[href="src/assets/plugins/spk-editor/spk-editor.css"]`);
const script = document.querySelector(`script[src="src/assets/plugins/spk-editor/spk-editor.js"]`);
if (link) {
document.head.removeChild(link);
}
if (script) {
document.body.removeChild(script);
}
},
};
</script>
<style scoped>
/* Optional: You can add any relevant styling here */
</style>
3. Using the SPK-Editor Component
To use the SPK-Editor component in your Vue application, follow these steps:
Import the Component: Import the SpkEditor component in your desired Vue component file.
import SpkEditor from 'Path_to_the_component'; // Update this path accordingly
Register the Component: Add SpkEditor to your component's components option.
components: {
...
SpkEditor,
},
Add the Component in Your Template: Use the SpkEditor component in your template, passing the required id and optional options.
<SpkEditor id="editor1" :options="{ placeholderText: 'Enter your text here...' }" />
1. Place Files in the Assets Folder
Ensure the required JavaScript and CSS files for the SPK-Editor are in the correct directory structure within your project. The structure should look like this:
Create a new component file for the SPK-Editor. Below is the code that should be placed in your component file (e.g., SpkEditor.vue).
<template>
<textarea :id="id" :class="computedClass"></textarea>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true,
},
options: {
type: Object,
default: () => ({}),
},
},
data() {
return {
defaultEditorOptions: {
apikey: 'secret',
placeholderText: 'Enter your text here...',
customClass: 'spk-editor',
dark: false,
rtl: 'ltr',
showwords: true,
showchar: true,
},
};
},
computed: {
computedClass() {
return this.options.customClass || this.defaultEditorOptions.customClass;
},
},
mounted() {
// Load the external script when the component is mounted
const link = document.createElement('link');
link.href = '/plugins/spk-editor/spk-editor.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
const script = document.createElement('script');
script.src = '/plugins/spk-editor/spk-editor.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// Initialize the editor after the script loads
this.initializeEditor();
};
},
methods: {
initializeEditor() {
if (typeof Spk !== 'undefined') {
new Spk(document.querySelector(`#${this.id}`), {
...this.defaultEditorOptions, // Use default options
...this.options, // Override only the passed options
});
} else {
console.error('Spk is not defined');
}
},
},
beforeUnmount() {
// Cleanup the script when the component is unmounted
const link = document.querySelector(`link[href="/plugins/spk-editor/spk-editor.css"]`);
const script = document.querySelector(`script[src="/plugins/spk-editor/spk-editor.js"]`);
if (link) {
document.head.removeChild(link);
}
if (script) {
document.body.removeChild(script);
}
},
};
</script>
<style scoped>
/* Optional: You can add any relevant styling here */
</style>
3. Usage of the SPK-Editor Component
To use the SPK-Editor component in your application, you need to import it into the desired page or component. Here’s how to do that:
Import the Component: Replace Path_to_the_component with the actual path to your SpkEditor.vue file.
import SpkEditor from 'Path_to_the_component';
//Register the Component: Add SpkEditor to the components section of your Vue component.
components: {
// other components
SpkEditor,
},
Use the Component in the Template: Use the <SpkEditor> component with the required props in your template.
<template>
<div>
<SpkEditor id="editor1" :options="{ placeholderText: 'placeholderText' }" />
</div>
</template>
4. Complete Example
Here's how everything fits together in a typical component structure:
spk-editor.js and spk-editor.css: These files are located in the static/assets/plugins/spk-editor/ directory. They contain the JavaScript and CSS for the editor plugin.
2. Django Template Setup:
In your Django template (e.g., editor_template.html), you will load the necessary static files for the editor plugin and configure the editor initialization. Here's the step-by-step breakdown:
Step 1: Load Static Files
At the top of your template, you need to load the Django static template tag.
{% load static %}
Step 2: Link the Editor's CSS
In the {% block styles %}, include the editor's CSS file.
{% block styles %}
<link rel="stylesheet" href="{% static 'assets/plugins/spk-editor/spk-editor.css' %}">
{% endblock %}
Step 3: Create the Editor Area
In the {% block content %}, add the textarea element with the class that will be used to initialize the editor.
{% block content %}
<textarea class="spk-editor-one"></textarea>
{% endblock %}
Step 4: Include the JavaScript for the Editor
In the {% block scripts %}, load the editor’s JavaScript file and initialize it using a script that runs once the DOM is ready.
{% block scripts %}
<script src="{% static 'assets/plugins/spk-editor/spk-editor.js' %}"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
let editor2 = new Spk(document.querySelector('.spk-editor-one'), {
placeholderText: "
Hi,
Welcome to SPK text editor.
please, write text here! super simple Editor
",
});
});
</script>
{% endblock %}
1. Project Structure
Ensure your project directory is structured as follows:
Create a file named editor-init.js in the wwwroot folder.
// wwwroot/editor-init.js
window.initializeEditor = function(id, options) {
let editor2 = new Spk(document.querySelector(id), {
...options
});
};
Step 2: Include JS and CSS Files in Your View
In your CakePHP view file, include the necessary JavaScript and CSS files for the SPK Editor:
// In your view file
<?= $this->Html->css('/plugins/spk-editor/spk-editor.css') ?>
<?= $this->Html->script('/plugins/spk-editor/spk-editor.js') ?>
Step 3: Add Textarea to Your Component
In the same view file, add a textarea element that will be transformed into the SPK Editor:
<textarea id="editor" class="spk-editor-one"></textarea>
Step 4: Initialize the Plugin
To initialize the editor, add the following script to your view. This should be placed within the script block to ensure it runs after the DOM content has loaded:
<?php $this->start('script'); ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
let editor2 = new Spk(document.querySelector('.spk-editor-one'), {
placeholderText: "<div class='check'> Hi, <blockquote><br> Welcome to SPK text editor.<br></blockquote> please, write text here!<br> super simple Editor</div>",
});
});
</script>
<?php $this->end(); ?>
1. Project Structure
Your project should have the following structure, particularly under the public directory for the SPK Editor assets:
project-root/
├── resources/
│ └── assets/
│ └── plugins/
│ └── spk-editor/
│ ├── spk-editor.js
│ └── spk-editor.css
Note: Ensure you run the build command npm run build. This will generate the assets in public/build, which you can then utilize within the project.
2. Include Styles in Blade Template
In your Blade template, you need to include the CSS file for the SPK Editor. This can be done in the @section('styles') section of your Blade file:
Add the textarea element in your Blade template where you want the SPK Editor to be initialized:
<textarea class="spk-editor-one"></textarea>
4. Include Scripts in Blade Template
Next, you need to include the JavaScript file for the SPK Editor in the @section('scripts') section. Additionally, initialize the editor using a script:
@section('scripts')
<script src="{{ asset('build/assets/plugins/spk-editor/spk-editor.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
let editor2 = new Spk(document.querySelector('.spk-editor-one'), {
apikey: 'secret',
placeholderText: "
Hi,
Welcome to SPK text editor.
please, write text here! super simple Editor
",
});
});
</script>
@endsection
5. Resulting Blade File Example
Here's how your complete Blade file might look after integrating the SPK Editor:
@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/plugins/spk-editor/spk-editor.css') }}">
@endsection
@section('content')
<textarea class="spk-editor-one"></textarea>
@endsection
@section('scripts')
<script src="{{ asset('build/assets/plugins/spk-editor/spk-editor.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
let editor2 = new Spk(document.querySelector('.spk-editor-one'), {
apikey: 'secret',
placeholderText: "<div class='check'> Hi, <blockquote><br> Welcome to SPK text editor.<br></blockquote> please, write text here!<br> super simple Editor</div>",
});
});
</script>
@endsection
Project Structure
Your project should have the following structure to properly integrate the SPK Editor:
Create the editor-init.js file inside the wwwroot/js/ directory.
Add the following code to initialize the SPK Editor:
// editor-init.js
window.initializeEditor = function(id, options) {
let editor2 = new Spk(document.querySelector(id), {
...options
});
};
2. Include JS and CSS Files
For Server-Side Blazor:
Open the _Host.cshtml file located in the Pages directory.
Add the following lines within the
section to include the CSS and JavaScript files:
<link rel="stylesheet" href="assets/plugins/spk-editor/spk-editor.css" />
<script src="assets/plugins/spk-editor/spk-editor.js"></script>
<script src="js/editor-init.js"></script>
For Blazor WebAssembly:
Open the index.html file located in the wwwroot directory.
Add the same lines as above within the <head> section.
3. Add Textarea in Blazor Component
In your Blazor component file (e.g., MyComponent.razor), add the following <textarea> element:
In the same Blazor component, inject the IJSRuntime service at the top:
@inject IJSRuntime JSRuntime
Override the OnAfterRenderAsync method to initialize the editor when the component is rendered for the first time:
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var editorOptions = new
{
apikey = "secret",
PlaceholderText = "Enter your text here...",
CustomClass = "spk-editor",
Dark = true,
Rtl = "ltr",
showwords = true,
showchar = true
};
// Call the JavaScript function to initialize the editor
await JSRuntime.InvokeVoidAsync("initializeEditor", ".spk-editor-one", editorOptions);
}
}
}
SPK Editor Demo's.
Below are the demos of spk editor which are easy to use and customizable
Featured Demo with Events
Demo With Placeholder and rtl
Demo With Create & Destroy Buttons
Demo With Custom Buttons and dark
SPK Editor Highlights.
List of Highlight Features that are available in this editor.
Support RTL
Provides RTL (Right-to-Left) language support, making it ideal for international use.
Easy To Customize
Designed to be easily customizable, allowing you to tailor it to your specific requirements.
Well Documented
Comes with comprehensive documentation, making it easy to understand and implement.
Responsive
Fully responsive, ensuring it looks great on any device.
Image Support
Supports seamless integration of images for a richer user experience.
video Support
Includes video support, allowing you to embed and play videos effortlessly.
Support Dark Mode
Offers dark mode support, enhancing accessibility and user comfort.
No Jquery Pure Javascript
Built with pure JavaScript, so there's no need for jQuery.
Supports Multiple Frameworks
Supports integration across multiple frameworks for seamless functionality.
SPK Editor Features.
Make instant changes with real-time editing, allowing you to see updates as you type without the need for reloading or refreshing
Bold
The bold tag allows you to emphasize important text, making it stand out with a simple click
Italic
The italic tag allows you to emphasize text by slanting it, providing a subtle way to highlight important words or phrases in your content.
Underline
The Underline feature allows users to easily emphasize text by adding a clear underline to selected content, enhancing readability and drawing attention to key points.
Strike
The strike-through feature allows you to easily cross out text, making it simple to indicate edits, corrections, or outdated information with a single click.
Code
The code tag allows you to easily format and display code snippets with proper syntax highlighting, ensuring that your code stands out and remains readable.
Subscript
Enhance your text formatting with the Subscript feature, allowing you to easily insert smaller characters below the baseline, perfect for chemical formulas, mathematical expressions, and technical notations.
Superscript
Effortlessly apply the Superscript tag to text, allowing you to display characters slightly above the regular line for professional documentation, mathematical expressions, or scientific notations.
Mark
Effortlessly highlight and categorize your content with the intuitive Mark tag feature in our WYSIWYG text editor, making it easy to emphasize important information and improve readability."
Font Color
Customize your text with a variety of font colors in our WYSIWYG text editor to enhance readability and visually express your message
Background Color
Customize your content effortlessly with our WYSIWYG text editor's versatile background color options, allowing you to enhance visual appeal and create engaging designs that capture attention.
Align Left
Align Left in our WYSIWYG text editor allows you to effortlessly position your text to the left, ensuring a clean and organized layout for your content.
Align Right
Align Right: Easily position your text and content to the right side of the editor for a polished and professional look with just one click
Justify
Align Justify in our WYSIWYG text editor ensures a polished, professional look by evenly distributing text across the width of the paragraph, enhancing readability and aesthetics.
Paragraph Text (P)
Effortlessly format and style your content with the intuitive paragraph text feature, allowing for seamless text editing and rich formatting options directly within the editor."
Heading Styles (h1-h6)
Effortlessly structure your content with Heading Tags, allowing you to create visually appealing and organized text for enhanced readability.(E.g., h1 to h6)
BlockQuote
Effortlessly highlight and emphasize key content with our BlockQuote feature in the WYSIWYG text editor, making your text stand out beautifully and enhancing readability.
Indent
Effortlessly create visually appealing documents with our WYSIWYG text editor's intuitive indent feature, allowing you to format text and lists with precision and ease.
Outdent
Outdent allows you to easily adjust the indentation of your text, helping to create cleaner and more organized document layouts in our WYSIWYG text editor.
Ordered List
Create organized content effortlessly with our WYSIWYG text editor's intuitive Ordered List feature, allowing you to structure information clearly and effectively.
Unordered List
Effortlessly create and customize unordered lists in our WYSIWYG text editor, allowing for clear organization and easy readability of your content.
Link
Effortlessly create and manage hyperlinks to enhance your content, allowing for seamless navigation and improved user engagement.
Table
Create and customize tables effortlessly with our WYSIWYG text editor, enabling you to visually design layouts and manage content without any coding.
Image
Experience seamless content creation with our WYSIWYG text editor, which allows you to visualize your text and images in real-time, ensuring your final output looks exactly as intended
Video
Effortlessly integrate and customize videos into your content with our intuitive WYSIWYG text editor, allowing for seamless playback and enhanced engagement.
Undo
Effortlessly correct mistakes and refine your content with our intuitive Undo feature, allowing you to revert changes instantly in our WYSIWYG text editor.
Redo
Effortlessly redo your changes with a single click in our intuitive WYSIWYG text editor, ensuring a seamless editing experience.
Full Screen
Experience an immersive writing environment with the Full Screen mode in our WYSIWYG text editor, allowing you to focus solely on your content without distractions.
Copy Icon
Effortlessly duplicate content with the Copy Icon in our WYSIWYG text editor, enhancing your workflow and ensuring seamless content management.
Print Icon
Effortlessly print your documents with the intuitive Print Icon in our WYSIWYG text editor, ensuring a seamless transition from digital to physical format.
Source Code View
Effortlessly switch to Source Code View to fine-tune your HTML and CSS, giving you complete control over your web content while maintaining a visual editing experience
SPK Editor Configurations.
text editor is easy to configure, with customizable themes, code formatting
Editor Initialization
The editor is initialized using the Spk constructor, linking it to the HTML element via new Spk(), establishing a robust foundation for all editing features while offering flexible options for single or multiple editing views in this text editor.
API Key
Ensure the security of your API keys with our advanced protection view in the WYSIWYG text editor, allowing you to manage and safeguard sensitive information seamlessly.
Exclude, Icons, Menus & Settings
Enhance your editing experience with our WYSIWYG text editor's tollbar configuration settings protection, ensuring a secure and customizable interface that safeguards your preferences while you create.
Editor Methods & Event Handling
Experience seamless content creation with our WYSIWYG text editor's advanced Editor Methods and Event Handling protection view, ensuring your editing process is secure, intuitive, and free from interruptions.
Sleek & Elegant Design
Enjoy a refined and clean user interface with SPKEditor that blends seamlessly into any project. The elegant design ensures that your content looks polished and professional, making it perfect for visually appealing websites.
Adaptable for Any Javascript Project
SPKEditor adapts to any content creation scenario, from simple text editing to complex data manipulation. Its modular architecture makes it suitable for a diverse range of applications, from blogs to enterprise-level systems.
Embed & Manage Media with Ease
Enhance your content with images, videos, and other media elements using SPKEditor’s intuitive media manager. adjust settings, and preview changes in real time without leaving the editor interface.
Smart Tools for Advanced Content
Leverage smart formatting options like automatic bullet points, smart indenting, and markdown support. SPKEditor intelligently formats content as you type, saving you time and reducing the need for manual adjustments.
