JasmanXcrew

<p><strong>Creating a web page you like professionals</strong></p>
<p>GUI-VisualEditor (VE) is a project to provide a “visual” or “WYSIWYG” like online rich-text editor, It was developed by Ihsana’s lab. GUI-VisualEditor gives you the ability to edit without needing to learn HTML markup, and front-end framework code like as Bootstrap, Foundation, FontAwesome, Animate.CSS and other. GUI-Visual Editor has given the easy of visual editing because it has been equipped with various plugins.<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/5nFfZj0GFrs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/riPdRg5Jrps?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Vnj_MUkdhag?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Features</h4>
<ul>
<li><a href="http://visual-editor.com/#many-framework" rel="nofollow ugc">Supports Many Frameworks</a></li>
<li><a href="http://visual-editor.com/#native-and-dialog-mode" rel="nofollow ugc">Support Native or Dialog Mode</a></li>
<li>Support Inline/Live Editing</li>
<li>Support Content Delivery Network or Built-in CSS</li>
<li>Support Undo Redo</li>
<li>Toolbar Fonts Automatic </li>
<li>Filebrowser Automatic</li>
<li>Support Textdomain</li>
</ul>
<h4>Addons</h4>
<p>Addons are created TinyMCE plugin is suitable for this plugin, available in more than 35 addons on this plugin. However, you can still add it to purchase services from us.</p>
<h4>Premium Addons</h4>
<blockquote>
<p>You can add more features to the editor using our premium add ons, is charged.</p>
</blockquote>
<p>Here are a few add ons that we offer premium:</p>
<ul>
<li>GUI-Animate CSS is addons for adapter Animate.CSS into GUI-VisualEditor. By using this, you do not need to memorize or write code to create animations on your web content, such as animated bounce, flash, pulse, rubberBand, shake, swing, tada, and others</li>
<li>GUI-Bootstrap Alert is addons that allow create and edit Alert Component that use bootstrap framework.</li>
<li>GUI-Bootstrap Buttons is addons that allow create and edit Button Component that use bootstrap framework, such as color, size, attributes or others, either using classic or inline editor.</li>
<li>GUI-Bootstrap Carousel is addons that allow create and edit Carousel Component that use bootstrap framework</li>
<li>GUI-Bootstrap Glyphicons is addons that allow create icons that use bootstrap framework, includes 200 glyphs in font format from the Glyphicon Halflings set.</li>
<li>GUI-Bootstrap Images is addons that allow create and edit image element that use bootstrap framework, such as: thumbnail, rounded and circle</li>
<li>GUI-Bootstrap Label is addons that allow create and edit label component that use bootstrap framework</li>
<li>GUI-Bootstrap Navigator is addons that allow create and edit nav, pills, stacked, pagination, breadcrumbs or pager component that use bootstrap framework</li>
<li>GUI-Bootstrap Panel is addons that allow create and edit panels that use bootstrap framework</li>
<li>GUI-Bootstrap Quicktags is addons that allow create and edit container, row, column, well, jumbotron and shortcut that use bootstrap framework</li>
<li>GUI-Bootstrap Table is addons that allow create and edit table element that use bootstrap framework</li>
<li>GUI-Bootstrap Visualblocks is addons for display grid bootstrap</li>
<li>GUI-Dashicons is addons that allow create icons that use WordPress Dashboard</li>
<li>GUI-editArea is addons to view or edit the source code. EditArea has several features such as syntax highlighting, Word-wrap, Search and replace and others.</li>
<li>GUI-Foundation Buttons is addons that allow create and edit buttons Component that use foundation framework, either using classic or inline editor.</li>
<li>GUI-Foundation Icons is addons that allow create icons that use Foundation Icons v3.</li>
<li>GUI-Foundation Images is addons that allow create and edit image element that use foundation framework.</li>
<li>GUI-Foundation Label is addons that allow create and edit label component that use Foundation framework</li>
<li>GUI-Foundation Quicktags is addons that allow create and edit container, row, column and shortcut that use foundation framework</li>
<li>GUI-Foundation Table is addons that allow create and edit table that use Foundation framework</li>
<li>GUI-Foundation Visualblocks is addons for display grid foundation framework</li>
<li>GUI-File Browser is addons use for file browser</li>
<li>GUI-FontAwesome is addons that allow create and edit icon that use FontAwesome</li>
<li>GUI-KCFinder, that allow integrated KCFinder File Browser</li>
</ul>
<p>You can get <a href="http://codecanyon.net/item/gui-visual-editor-package-for-tinymce/14858024" rel="nofollow ugc">here</a></p>
<h3>Credits</h3>
<ol>
<li>http://tinymce.com</li>
<li>http://getbootstrap.com</li>
<li>http://fontawesome.io</li>
<li>http://daneden.me/animate</li>
<li>http://foundation.zurb.com/</li>
<li>http://zurb.com/playground/foundation-icon-fonts-3</li>
<li>http://kcfinder.sunhater.com/</li>
<li>http://www.cdolivet.com/editarea/</li>
<li>http://www.lampungcyber.co.id/</li>
</ol>


GUI – Visual Editor

directly integrates with the theme. if the editor trouble with your theme, please contact our support.



Integrates with the theme

This plugin for edit your posts on the front-end of your site without going to wp-admin edit page, this work using tinymce inline technology.

Joop Laan

<p><strong>Inline Context</strong> is a powerful Block Editor enhancement that lets you create inline expandable notes or clean tooltip-style popovers anywhere in your content. It is ideal for <strong>content-rich websites</strong>, including editorial platforms, research sites, online magazines, documentation hubs, and educational blogs that rely on clear explanation without breaking the reader’s focus.</p>
<p>Instead of sending readers to glossary pages or external links, Inline Context allows you to provide definitions, references, clarifications, and annotations <em>in place</em> — keeping readers engaged and your content structured.</p>
<p>Notes can be <strong>reusable</strong>, categorized, styled, centrally managed, and automatically updated everywhere they appear.</p>
<p><a href="https://wordpress.org/plugins/inline-context/?preview=1" rel="ugc">Check the live preview</a></p>
<h4>Why this is valuable for content-heavy websites</h4>
<p>Websites with substantial text often need:</p>
<ul>
<li>definitions and terminology</li>
<li>source references</li>
<li>background information</li>
<li>contextual inline explanations</li>
<li>mini footnotes without scrolling</li>
<li>inline callouts, tips, or warnings</li>
</ul>
<p>Inline Context delivers all of this with a frictionless, accessible user experience. It helps readers stay focused, reduces navigation fatigue, and improves knowledge retention — especially in long articles or research-based content.</p>
<h4>How it works</h4>
<ol>
<li>Highlight text in the Block Editor.</li>
<li>Click <strong>Inline Context</strong>.</li>
<li>Enter your note content (rich text supported).</li>
<li>Optionally assign a category with custom icon & color.</li>
<li>Publish — your note appears inline or as a tooltip, depending on settings.</li>
</ol>
<p>You can also create <strong>reusable</strong> notes from a dedicated Custom Post Type. Updating a reusable note updates all instances site-wide.</p>
<h3>Key Features</h3>
<h4>Display modes</h4>
<ul>
<li>Inline expansion (reveals a small content panel)</li>
<li>Tooltip popovers (floating contextual bubbles)</li>
<li>Smart tooltip positioning to avoid off-screen display</li>
<li>Direct anchor links (<code>#context-note-xxx</code>) for deep linking</li>
<li>Auto-open on page load when accessed via link</li>
</ul>
<h4>Editor productivity</h4>
<ul>
<li>Reusable notes with global updates</li>
<li>Notes Library with usage tracking (shows where each note is used)</li>
<li>Quick Search inside the editor to insert existing notes</li>
<li>Rich text support via ReactQuill (bold, italic, lists, links)</li>
<li>Clean, integrated Rich Text toolbar button</li>
</ul>
<h4>Categories & icons</h4>
<ul>
<li>Create unlimited categories (Definition, Reference, External Article, Tip, Warning, etc.)</li>
<li>Choose from curated Dashicons or any of 300+ icons</li>
<li>Separate icons for open and closed states</li>
</ul>
<h4>Styling & customization</h4>
<p>Full styling control from <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Inline Context</strong>:</p>
<ul>
<li><strong>NEW in v2.6</strong>: Five pre-configured color presets for one-click professional styling</li>
<li>Choose from Modern Blue, Minimalist Gray, High Contrast, Warm Earth Tones, or Dark Mode</li>
<li>All presets meet WCAG 2.1 AA accessibility standards</li>
<li>Link colors, hover, and focus states</li>
<li>Note padding, spacing, borders, backgrounds, shadows</li>
<li>Tooltip appearance</li>
<li>Chevron/indicator styling</li>
<li>Live interactive preview of all style changes</li>
</ul>
<h4>Accessibility & security</h4>
<ul>
<li>ARIA support, focus lock, Escape key behavior</li>
<li>Keyboard-navigable for both link and note</li>
<li>DOMPurify sanitization of note content</li>
</ul>
<h3>Internationalization</h3>
<p>Inline Context is fully translation-ready.</p>
<h3>Examples & inspiration</h3>
<p>The idea for this plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links. We looked at the Dutch journalism platform De Correspondent, which use subtle inline notes to provide context without interrupting the flow of reading. You can see examples of their inline notes in this article: <a href="https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3" rel="nofollow ugc">Hoe Nederland kampioen deeltijdwerken werd</a></p>
<h3>Source code</h3>
<p>Inline Context uses <code>@wordpress/scripts</code> with webpack and npm to build assets.</p>
<p>Full source (including uncompiled JS and CSS) is available at:<br />
<a href="https://github.com/jooplaan/inline-context" rel="nofollow ugc">https://github.com/jooplaan/inline-context</a></p>


Inline Context

Add inline expandable notes or tooltips to provide context, definitions, and references without disrupting the reading flow.

GUI – Visual Editor vs Inline Context