برومبت
إنشاء تطبيق ويب لمحرر مقالات Html من خلال تقنيات "Html + Javascript + Css"
بناء صفحة Html:
editor-container
Top-toolbar
editor-area: The actual editing area (WYSIWYG editor).
Bottom-toolbar
sidebar-panel: (For displaying additional features or information).
preview-display: (For previewing the content directly).
footer
distribution:
editor-container:
"Includes"
-Top-toolbar
-Information bar
-editor-area
-Bottom-toolbar
distribution:
-Top-toolbar
"Includes"
toolbar-groups
"Groups include:"
-Text format
-Lists and Alignment
-Color coordination
-Insert media
-structural elements
"Includes"
-Information bar "Calculate both: number of words - estimated reading time - number of letters - number of paragraphs - number of subheadings"
"Includes"
-Bottom-toolbar
"Groups include:"
-Save, export and import
-footer end
(Paragraph & Heading Styles)
A drop-down button that allows you to apply specific styles to paragraphs and headings at different levels.
Buttons/Options:
(Paragraph): - Main article heading (only one per page).
Heading 2:
- Default paragraph style. Heading 1:
- Main article heading (only one per page).
Heading 2: - Main section headings.
Heading 3: - Subsection headings.
Heading 4: - Subheadings within H3.
Heading 5: - Subheadings within H4.
Heading 6: - Subheadings within H5.
(Basic Font Styles)
Drop-down buttons to apply common styles to selected text.
Buttons/Options:
Bold: ( or )
Italic: ()
Underline: ()
Strikethrough: ( or )
Superscript: ()
Subscript: ()
(Lists)
Drop-down buttons for creating structured and unstructured lists.
Buttons/Options:
Bulleted List: ( and - )
Numbered List: (
and - )
(Alignment)
Drop-down buttons to adjust the alignment of text within a paragraph.
Buttons/Options:
Align Right:
Align Center:
Align Left:
Justify: (Aligns text to fill the entire width.)
(Indentation)
Drop-down buttons to increase or decrease paragraph indentation.
Buttons/Options:
Increase Indent:
Decrease Indent:
(Text & Background Color)
Tools to choose the text color and background color of the selected text.
Buttons/Options:
Text Color: (with color picker).
Highlight Color: (with color picker).
(Clear Formatting)
The button removes all formatting applied to the selected text and returns it to plain text.
Button/Option:
Insert Media:
Image:
A button to upload an image or insert it from a link.
Fields for Alt Text, Image Description, and Image Title.
Video:
A button to insert a video from a link (such as YouTube, Vimeo) or upload a video file.
Important for SEO: Videos increase user time on a page.
Link:
A button to insert a URL with anchor text.
An option to open the link in a new window (target="_blank").
An option to add the rel="nofollow", rel="sponsored", or rel="ugc" attribute to external links.
Structural & Special Elements:
Table:
A button to insert a table with options to add/delete rows and columns.
Horizontal Rule:
A button to insert a hr separator line.
Blockquote:
A button to format text as a block quote.
Code Embed:
A button to insert specially formatted code (for technical articles).
Example:
console.log("Hello!");
Save, Export & Import:
Save: Save changes (automatically or manually).
Save As: Save the file with a new name or in a different format.
Export:
HTML: Exports content as an HTML file.
PDF: Exports content as a PDF file.
Word/Docx: Exports content as a Word file.
Import:
Import a text file (TXT, Docx).
Import HTML.
Bottom-toolbar
This bar focuses on providing statistical information, optimization tools, and preview options.
Suggested elements:
Content Statistics:
Word Count: Displays the number of words in the content.
Character Count: Displays the number of characters.
Estimated Reading Time: Displays an estimate of the time it will take to read the article.
SEO Optimization Tools:
SEO Preview:
A button to open a pop-up window or side panel showing how the article will appear in Google search results (title, description, link).
Keyword Analysis:
A field for entering target keywords.
Displays keyword density in the text.
Suggests related keywords.
Readability Score:
A rating of the readability of the text (for example, using the Flesch-Kincaid index).
Suggestions for improving readability (for example, shortening sentences, using simpler words).
View Options:
Full Screen Mode: Enlarges the editing area to fill the screen.
Dark Mode: Changes the app's theme to dark mode. HTML View:
A button to switch between visual editing (WYSIWYG) and HTML source code view.
UX/SEO Importance: For advanced users who want to edit the code directly or ensure the integrity of the HTML structure.
Sidebar Panel (Optional):
Displays advanced options or quick information.
Document Properties:
Page Title: A field for entering the article title .
Meta Description: A field for entering the meta description <meta name="description">.
Meta Keywords: A field for entering meta keywords.
Permalink (Slug): A field for editing the article's permalink (e.g., yourwebsite.com/your-article-slug).
Categories & Tags:
Fields for adding categories and tags to the article.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart-WYSIWYG-Editor
محرر مشاركات - Smart WYSIWYG Editor
محرر احترافي متكامل لإنشاء المحتوى وتحريره مع ميزات متقدمة لتحسين تجربة المستخدم وتحسين محركات البحث
- Subsection headings.
Heading 4: - Subheadings within H3.
Heading 5: - Subheadings within H4.
Heading 6: - Subheadings within H5.
(Basic Font Styles)
Drop-down buttons to apply common styles to selected text.
Buttons/Options:
Bold: ( or )
Italic: ()
Underline: ()
Strikethrough: ( or )
Superscript: ()
Subscript: ()
(Lists)
Drop-down buttons for creating structured and unstructured lists.
Buttons/Options:
Bulleted List: ( and - )
Numbered List: (
and - )
(Alignment)
Drop-down buttons to adjust the alignment of text within a paragraph.
Buttons/Options:
Align Right:
Align Center:
Align Left:
Justify: (Aligns text to fill the entire width.)
(Indentation)
Drop-down buttons to increase or decrease paragraph indentation.
Buttons/Options:
Increase Indent:
Decrease Indent:
(Text & Background Color)
Tools to choose the text color and background color of the selected text.
Buttons/Options:
Text Color: (with color picker).
Highlight Color: (with color picker).
(Clear Formatting)
The button removes all formatting applied to the selected text and returns it to plain text.
Button/Option:
Insert Media:
Image:
A button to upload an image or insert it from a link.
Fields for Alt Text, Image Description, and Image Title.
Video:
A button to insert a video from a link (such as YouTube, Vimeo) or upload a video file.
Important for SEO: Videos increase user time on a page.
Link:
A button to insert a URL with anchor text.
An option to open the link in a new window (target="_blank").
An option to add the rel="nofollow", rel="sponsored", or rel="ugc" attribute to external links.
Structural & Special Elements:
Table:
A button to insert a table with options to add/delete rows and columns.
Horizontal Rule:
A button to insert a hr separator line.
Blockquote:
A button to format text as a block quote.
Code Embed:
A button to insert specially formatted code (for technical articles).
Example:
console.log("Hello!");
Save, Export & Import:
Save: Save changes (automatically or manually).
Save As: Save the file with a new name or in a different format.
Export:
HTML: Exports content as an HTML file.
PDF: Exports content as a PDF file.
Word/Docx: Exports content as a Word file.
Import:
Import a text file (TXT, Docx).
Import HTML.
Bottom-toolbar
This bar focuses on providing statistical information, optimization tools, and preview options.
Suggested elements:
Content Statistics:
Word Count: Displays the number of words in the content.
Character Count: Displays the number of characters.
Estimated Reading Time: Displays an estimate of the time it will take to read the article.
SEO Optimization Tools:
SEO Preview:
A button to open a pop-up window or side panel showing how the article will appear in Google search results (title, description, link).
Keyword Analysis:
A field for entering target keywords.
Displays keyword density in the text.
Suggests related keywords.
Readability Score:
A rating of the readability of the text (for example, using the Flesch-Kincaid index).
Suggestions for improving readability (for example, shortening sentences, using simpler words).
View Options:
Full Screen Mode: Enlarges the editing area to fill the screen.
Dark Mode: Changes the app's theme to dark mode. HTML View:
A button to switch between visual editing (WYSIWYG) and HTML source code view.
UX/SEO Importance: For advanced users who want to edit the code directly or ensure the integrity of the HTML structure.
Sidebar Panel (Optional):
Displays advanced options or quick information.
Document Properties:
Page Title: A field for entering the article title .
Meta Description: A field for entering the meta description <meta name="description">.
Meta Keywords: A field for entering meta keywords.
Permalink (Slug): A field for editing the article's permalink (e.g., yourwebsite.com/your-article-slug).
Categories & Tags:
Fields for adding categories and tags to the article.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart-WYSIWYG-Editor
محرر مشاركات - Smart WYSIWYG Editor
محرر احترافي متكامل لإنشاء المحتوى وتحريره مع ميزات متقدمة لتحسين تجربة المستخدم وتحسين محركات البحث
- Subheadings within H4.
Heading 6: - Subheadings within H5.
(Basic Font Styles)
Drop-down buttons to apply common styles to selected text.
Buttons/Options:
Bold: ( or )
Italic: ()
Underline: ()
Strikethrough: ( or )
Superscript: ()
Subscript: ()
(Lists)
Drop-down buttons for creating structured and unstructured lists.
Buttons/Options:
Bulleted List: ( and - )
Numbered List: (
and - )
(Alignment)
Drop-down buttons to adjust the alignment of text within a paragraph.
Buttons/Options:
Align Right:
Align Center:
Align Left:
Justify: (Aligns text to fill the entire width.)
(Indentation)
Drop-down buttons to increase or decrease paragraph indentation.
Buttons/Options:
Increase Indent:
Decrease Indent:
(Text & Background Color)
Tools to choose the text color and background color of the selected text.
Buttons/Options:
Text Color: (with color picker).
Highlight Color: (with color picker).
(Clear Formatting)
The button removes all formatting applied to the selected text and returns it to plain text.
Button/Option:
Insert Media:
Image:
A button to upload an image or insert it from a link.
Fields for Alt Text, Image Description, and Image Title.
Video:
A button to insert a video from a link (such as YouTube, Vimeo) or upload a video file.
Important for SEO: Videos increase user time on a page.
Link:
A button to insert a URL with anchor text.
An option to open the link in a new window (target="_blank").
An option to add the rel="nofollow", rel="sponsored", or rel="ugc" attribute to external links.
Structural & Special Elements:
Table:
A button to insert a table with options to add/delete rows and columns.
Horizontal Rule:
A button to insert a hr separator line.
Blockquote:
A button to format text as a block quote.
Code Embed:
A button to insert specially formatted code (for technical articles).
Example:
console.log("Hello!");
Save, Export & Import:
Save: Save changes (automatically or manually).
Save As: Save the file with a new name or in a different format.
Export:
HTML: Exports content as an HTML file.
PDF: Exports content as a PDF file.
Word/Docx: Exports content as a Word file.
Import:
Import a text file (TXT, Docx).
Import HTML.
Bottom-toolbar
This bar focuses on providing statistical information, optimization tools, and preview options.
Suggested elements:
Content Statistics:
Word Count: Displays the number of words in the content.
Character Count: Displays the number of characters.
Estimated Reading Time: Displays an estimate of the time it will take to read the article.
SEO Optimization Tools:
SEO Preview:
A button to open a pop-up window or side panel showing how the article will appear in Google search results (title, description, link).
Keyword Analysis:
A field for entering target keywords.
Displays keyword density in the text.
Suggests related keywords.
Readability Score:
A rating of the readability of the text (for example, using the Flesch-Kincaid index).
Suggestions for improving readability (for example, shortening sentences, using simpler words).
View Options:
Full Screen Mode: Enlarges the editing area to fill the screen.
Dark Mode: Changes the app's theme to dark mode. HTML View:
A button to switch between visual editing (WYSIWYG) and HTML source code view.
UX/SEO Importance: For advanced users who want to edit the code directly or ensure the integrity of the HTML structure.
Sidebar Panel (Optional):
Displays advanced options or quick information.
Document Properties:
Page Title: A field for entering the article title .
Meta Description: A field for entering the meta description <meta name="description">.
Meta Keywords: A field for entering meta keywords.
Permalink (Slug): A field for editing the article's permalink (e.g., yourwebsite.com/your-article-slug).
Categories & Tags:
Fields for adding categories and tags to the article.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart-WYSIWYG-Editor
محرر مشاركات - Smart WYSIWYG Editor
محرر احترافي متكامل لإنشاء المحتوى وتحريره مع ميزات متقدمة لتحسين تجربة المستخدم وتحسين محركات البحث
- and
- )
Numbered List: (
- and
- )
(Alignment)
Drop-down buttons to adjust the alignment of text within a paragraph.
Buttons/Options:
Align Right:
Align Center:
Align Left:
Justify: (Aligns text to fill the entire width.)
(Indentation)
Drop-down buttons to increase or decrease paragraph indentation.
Buttons/Options:
Increase Indent:
Decrease Indent:
(Text & Background Color)
Tools to choose the text color and background color of the selected text.
Buttons/Options:
Text Color: (with color picker).
Highlight Color: (with color picker).
(Clear Formatting)
The button removes all formatting applied to the selected text and returns it to plain text.
Button/Option:
Insert Media:
Image:
A button to upload an image or insert it from a link.
Fields for Alt Text, Image Description, and Image Title.
Video:
A button to insert a video from a link (such as YouTube, Vimeo) or upload a video file.
Important for SEO: Videos increase user time on a page.
Link:
A button to insert a URL with anchor text.
An option to open the link in a new window (target="_blank").
An option to add the rel="nofollow", rel="sponsored", or rel="ugc" attribute to external links.
Structural & Special Elements:
Table:
A button to insert a table with options to add/delete rows and columns.
Horizontal Rule:
A button to insert a hr separator line.
Blockquote:
A button to format text as a block quote.
Code Embed:
A button to insert specially formatted code (for technical articles).
Example:
console.log("Hello!");Save, Export & Import: Save: Save changes (automatically or manually). Save As: Save the file with a new name or in a different format. Export: HTML: Exports content as an HTML file. PDF: Exports content as a PDF file. Word/Docx: Exports content as a Word file. Import: Import a text file (TXT, Docx). Import HTML. Bottom-toolbar This bar focuses on providing statistical information, optimization tools, and preview options. Suggested elements: Content Statistics: Word Count: Displays the number of words in the content. Character Count: Displays the number of characters. Estimated Reading Time: Displays an estimate of the time it will take to read the article. SEO Optimization Tools: SEO Preview: A button to open a pop-up window or side panel showing how the article will appear in Google search results (title, description, link). Keyword Analysis: A field for entering target keywords. Displays keyword density in the text. Suggests related keywords. Readability Score: A rating of the readability of the text (for example, using the Flesch-Kincaid index). Suggestions for improving readability (for example, shortening sentences, using simpler words). View Options: Full Screen Mode: Enlarges the editing area to fill the screen. Dark Mode: Changes the app's theme to dark mode. HTML View: A button to switch between visual editing (WYSIWYG) and HTML source code view. UX/SEO Importance: For advanced users who want to edit the code directly or ensure the integrity of the HTML structure. Sidebar Panel (Optional): Displays advanced options or quick information. Document Properties: Page Title: A field for entering the article title. Meta Description: A field for entering the meta description <meta name="description">. Meta Keywords: A field for entering meta keywords. Permalink (Slug): A field for editing the article's permalink (e.g., yourwebsite.com/your-article-slug). Categories & Tags: Fields for adding categories and tags to the article. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart-WYSIWYG-Editor محرر مشاركات - Smart WYSIWYG Editor
محرر احترافي متكامل لإنشاء المحتوى وتحريره مع ميزات متقدمة لتحسين تجربة المستخدم وتحسين محركات البحث
- )
(Alignment)
Drop-down buttons to adjust the alignment of text within a paragraph.
Buttons/Options:
Align Right:
Align Center:
Align Left:
Justify: (Aligns text to fill the entire width.)
(Indentation)
Drop-down buttons to increase or decrease paragraph indentation.
Buttons/Options:
Increase Indent:
Decrease Indent:
(Text & Background Color)
Tools to choose the text color and background color of the selected text.
Buttons/Options:
Text Color: (with color picker).
Highlight Color: (with color picker).
(Clear Formatting)
The button removes all formatting applied to the selected text and returns it to plain text.
Button/Option:
Insert Media:
Image:
A button to upload an image or insert it from a link.
Fields for Alt Text, Image Description, and Image Title.
Video:
A button to insert a video from a link (such as YouTube, Vimeo) or upload a video file.
Important for SEO: Videos increase user time on a page.
Link:
A button to insert a URL with anchor text.
An option to open the link in a new window (target="_blank").
An option to add the rel="nofollow", rel="sponsored", or rel="ugc" attribute to external links.
Structural & Special Elements:
Table:
A button to insert a table with options to add/delete rows and columns.
Horizontal Rule:
A button to insert a hr separator line.
Blockquote:
A button to format text as a block quote.
Code Embed:
A button to insert specially formatted code (for technical articles).
Example:
تعليقات
إرسال تعليق