DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Exploring Shadow DOM With Examples Using Cypress
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • Cracking the Code: 7 Secrets Every Web Developer Should Know
  • Iframes in HTML: Enhancing Web Development

Trending

  • Bad Software Examples: How Much Can Poor Code Hurt You?
  • Monkey-Patching in Java
  • Top 7 Best Practices DevSecOps Team Must Implement in the CI/CD Process
  • Decoding Business Source Licensing: A New Software Licensing Model
  1. DZone
  2. Coding
  3. Languages
  4. Aloha Editor–simple and easy to use HTML5 WYSIWYG editor

Aloha Editor–simple and easy to use HTML5 WYSIWYG editor

Gunnar Peipman user avatar by
Gunnar Peipman
·
Jun. 10, 13 · Interview
Like (0)
Save
Tweet
Share
7.29K Views

Join the DZone community and get the full member experience.

Join For Free

some sites need a simple wysiwyg editor just to provide some simple formatting options for some texts. i needed an editor like this on one of my asp.net mvc projects. although there are a lot of editors and it is not hard to build your own simple editor i took aloha editor . let’s see why.

aloha editor

if you go to aloha editor homepage you will find working example of editor and example html page with javascript that works as simple getting started guide. it took me couple of minutes to add aloha editor to my page and get it working.

configure on page, use from cdn

you can include aloha editor files from their cdn and configure editor on your page. this is the block of javascript from my page:

<!-- load the aloha editor core and some plugins -->
<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
                    data-aloha-plugins="common/ui,
                                        common/format,
                                        common/list,
                                        common/link,
                                        common/table,
                                        common/highlighteditables">
</script>

notice how easy it is to say what functions you want to plug to editor. i mean even beginners should be able to get this editor work with no markable problems.

visible only when needed

here is one text field where simple html editing is needed:

aloha editor: text area for description editing

when i move mouse to text area to start editing text then aloha toolbar appears:

aloha editor: toolbar is visible only when needed

toolbar is lightweight and doesn’t take space on screen when it is not needed. toolbar like this leaves way more space for content on screen and it allows to focus better on information on form.

conclusion

aloha editor is small, compact and easy to use. it may save a remarkable amount of space on views where more than one wysiwyg editor is needed. files can be included from aloha cdn and this way it possible to save some traffic and keep load of server lower. javascript you must add to your pages is short, simple and easy to understand. alhtough i have been aloha user for some hours i am very happy with it.

HTML

Published at DZone with permission of Gunnar Peipman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Exploring Shadow DOM With Examples Using Cypress
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • Cracking the Code: 7 Secrets Every Web Developer Should Know
  • Iframes in HTML: Enhancing Web Development

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: