Rich Text Editor (WYSIWYG) Migration - Laravel/Node.js/TypeScript - Time Sensitive
Budget: $30 – $250 AUD
PLEASE READ THIS DESCRIPTION CAREFULLY. We expect that you will only bid if you fully understand the scope of the project. NO HOLDER BIDS. We are looking for serious, committed developers who are ready to start immediately. ALL PAYMENTS ARE MADE UPON SUCCESSFUL COMPLETION OF EACH PHASE, as agreed. STRICT ADHERENCE TO TIMELINES IS MANDATORY. Please only bid if you are confident in your ability to deliver on schedule.
RESPOND WITH YOUR EXPERIENCE, EXAMPLE & TIMEFRAME (TIME YOU WILL TAKE TO COMPLETE)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Project Description:
We're seeking a skilled developer (or team) proficient in Laravel, Node.js, and TypeScript to seamlessly migrate our existing Quill rich text editor (WYSIWYG) to Jodit Editor across our Laravel application. This is a critical UI/UX and functionality upgrade to provide our users with an enhanced content creation experience. Strict adherence to timelines is essential.
Key Requirements & Functionality Upgrade Highlights:
As part of this migration, we're prioritizing key improvements in the editor's functionality and user interface, which Jodit will enable:
Adjustable Tables: Enhanced table creation and manipulation.
Advanced List Management: Unordered & Numbered lists with advanced formatting options.
Floating/Inline Images: Flexible image placement with inline integration.
Paint/Formatting Tools: Comprehensive formatting options mirroring those shown in the image (bold, italics, underline, strikethrough, alignment, subscript/superscript, etc.)
Comprehensive UI/UX Upgrade: The Jodit editor will replace Quill, offering a superior experience.
Project Goal:
To replace the existing Quill rich text editor (WYSIWYG) with Jodit Editor across the Laravel application while preserving content and core functionality. This project involves migrating a WYSIWYG editor to upgrade the end user experience.
Detailed Project Phases:
Phase 1 - Assessment and Planning:
Thoroughly review the existing codebase related to the Quill rich text editor (WYSIWYG) integration.
Identify all areas where Quill is used as a WYSIWYG editor.
Assess the complexity of Quill usage (custom modules, themes, etc.) within the WYSIWYG context.
Analyze the data storage format (confirm Quill Delta format) used by the WYSIWYG editor.
Develop a detailed migration plan for the rich text editor (WYSIWYG).
Identify potential challenges and propose solutions specific to the WYSIWYG migration.
Phase 2 - Jodit Integration:
Install Jodit Editor (WYSIWYG) using npm.
Remove Quill-related dependencies.
Update webpack.mix.js (or vite.config.js) to include Jodit's CSS and JavaScript.
Replace Quill initialization code with Jodit initialization code in JavaScript files for the WYSIWYG editor.
Update Blade templates to include Jodit's CSS and JavaScript and ensure correct id or class attributes on the target <textarea> elements, where the WYSIWYG editor is used.
Phase 3 - Content Conversion:
Implement a reliable method for converting Quill Delta format to HTML:
Option 1: Use the Quill API to retrieve HTML (if feasible).
Option 2: Develop a custom Quill Delta to HTML converter function.
Option 3: Research and evaluate third-party Quill Delta to HTML conversion libraries.
Write code to iterate through existing Quill Delta content in the database and convert it to HTML.
Update the database schema (if necessary) and migrate the data.
Phase 4 - Testing:
Thoroughly test all areas of the application where the rich text editor (WYSIWYG) is used.
Verify content display, formatting, and functionality (especially new features like adjustable tables and floating images).
Address any bugs or issues identified during testing.
Phase 5 - Documentation:
Provide clear documentation of the migration process, any custom code developed, and Jodit configuration details.
Required Skills:
Strong proficiency in Laravel
Solid experience with Node.js and npm
Expertise in TypeScript
Deep understanding of rich text editors (WYSIWYG) and HTML
Experience with front-end technologies (JavaScript, CSS)
Database experience (migration, schema updates)
Excellent problem-solving and communication skills
To Apply:
Please submit a proposal that includes:
Your relevant experience with similar projects.
Your estimated timeline for completion.
Your proposed payment schedule for each phase.
Your approach to content conversion (Phase 3).
RESPOND WITH YOUR EXPERIENCE, EXAMPLE & TIMEFRAME (TIME YOU WILL TAKE TO COMPLETE)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Project Description:
We're seeking a skilled developer (or team) proficient in Laravel, Node.js, and TypeScript to seamlessly migrate our existing Quill rich text editor (WYSIWYG) to Jodit Editor across our Laravel application. This is a critical UI/UX and functionality upgrade to provide our users with an enhanced content creation experience. Strict adherence to timelines is essential.
Key Requirements & Functionality Upgrade Highlights:
As part of this migration, we're prioritizing key improvements in the editor's functionality and user interface, which Jodit will enable:
Adjustable Tables: Enhanced table creation and manipulation.
Advanced List Management: Unordered & Numbered lists with advanced formatting options.
Floating/Inline Images: Flexible image placement with inline integration.
Paint/Formatting Tools: Comprehensive formatting options mirroring those shown in the image (bold, italics, underline, strikethrough, alignment, subscript/superscript, etc.)
Comprehensive UI/UX Upgrade: The Jodit editor will replace Quill, offering a superior experience.
Project Goal:
To replace the existing Quill rich text editor (WYSIWYG) with Jodit Editor across the Laravel application while preserving content and core functionality. This project involves migrating a WYSIWYG editor to upgrade the end user experience.
Detailed Project Phases:
Phase 1 - Assessment and Planning:
Thoroughly review the existing codebase related to the Quill rich text editor (WYSIWYG) integration.
Identify all areas where Quill is used as a WYSIWYG editor.
Assess the complexity of Quill usage (custom modules, themes, etc.) within the WYSIWYG context.
Analyze the data storage format (confirm Quill Delta format) used by the WYSIWYG editor.
Develop a detailed migration plan for the rich text editor (WYSIWYG).
Identify potential challenges and propose solutions specific to the WYSIWYG migration.
Phase 2 - Jodit Integration:
Install Jodit Editor (WYSIWYG) using npm.
Remove Quill-related dependencies.
Update webpack.mix.js (or vite.config.js) to include Jodit's CSS and JavaScript.
Replace Quill initialization code with Jodit initialization code in JavaScript files for the WYSIWYG editor.
Update Blade templates to include Jodit's CSS and JavaScript and ensure correct id or class attributes on the target <textarea> elements, where the WYSIWYG editor is used.
Phase 3 - Content Conversion:
Implement a reliable method for converting Quill Delta format to HTML:
Option 1: Use the Quill API to retrieve HTML (if feasible).
Option 2: Develop a custom Quill Delta to HTML converter function.
Option 3: Research and evaluate third-party Quill Delta to HTML conversion libraries.
Write code to iterate through existing Quill Delta content in the database and convert it to HTML.
Update the database schema (if necessary) and migrate the data.
Phase 4 - Testing:
Thoroughly test all areas of the application where the rich text editor (WYSIWYG) is used.
Verify content display, formatting, and functionality (especially new features like adjustable tables and floating images).
Address any bugs or issues identified during testing.
Phase 5 - Documentation:
Provide clear documentation of the migration process, any custom code developed, and Jodit configuration details.
Required Skills:
Strong proficiency in Laravel
Solid experience with Node.js and npm
Expertise in TypeScript
Deep understanding of rich text editors (WYSIWYG) and HTML
Experience with front-end technologies (JavaScript, CSS)
Database experience (migration, schema updates)
Excellent problem-solving and communication skills
To Apply:
Please submit a proposal that includes:
Your relevant experience with similar projects.
Your estimated timeline for completion.
Your proposed payment schedule for each phase.
Your approach to content conversion (Phase 3).