WYSIWYG toolbar Link option and link component improvements

when dragging and dropping a paragraph/heading etc into a design, the out of the box WYSIWYG editor is activated and in its current state we have the option to select some text and then click the link icon and a dialog box pops up that allows us to enter a URL for linking too.

my improvement idea would be to allow users to:

  1. link to internal pages already created within their designs (ie click an option which will open a list of pages, and user uses radio button selection to pick page to link to)
  2. allow more options for alt and title tags to be added in this dialog window.

Point 2 would also be a worthwhile addition to the existing link component as well. i know that we can add this attribute in the attributes pane, but.... think its more intuitive and easier for it to be administered here.


+1 on adding more attributes for links and images too could use the title attribute as well.

Ok Now I got the right thread! lol

Yes agreed on image too ?

Thanks for the suggestion! This would be a great addition to the app. I am adding it to our todo for one of the next 2.6.x releases.

One way to do it, would be to make the dialog tabbed:

  • Custom - the current fields for manual url entry
  • Pages - List of pages to choose from
  • Images - List of images in your library (maybe with small thumbnails next to them)

This dialog can also be shown for the link component. We can use the new text field widget with the plus sign that is used for the Bg Image setting. When you click the little plus, the dialog will pop up.

Perfect - I think that will work well.

Whilst we are talking about the wysiwyg can we have option to insert a line break ?

In fact taking improving the wysiwyg to the extreme, would there be a way of building in a better functioning wysiwyg similar to what tiny mce offers? Ok

+1 on the line break and could that also include a built in feature that doesn't have to be custom code for a non breaking space as well?

Well, this escalated quickly :D. The text editing functionality will be rewritten in the next releases, but this is a massive undertaking. We will do it after Bootstrap 4 support lands, which is our next big milestone.

+1 on the line break. or is it there yet? :D

@erikbriones: You can create one yourself fairly easily which you can add to your components list and then drag in as needed. You can do that both for Line breaks and for Non breaking spaces.

For the Line break just create a custom code and inside there just add:


after you delete everything that is default. You can adjust how many as well and then label it so you can tell on the Dom tree what it is too.

The nbsp is a little more complicated as in you need to create the custom code, but you need to add it as a span rather than a straight $nbsp; so you would put:


and once again you can add as many spaces in there as you need.

You can then drag and drop either of these wherever you need them. You can put them within paragraphs/headings/etc. as well as between items and so on. Just drag it to the exact spot you want it and drop and you're all set.

Hope that helps!

Awesome thanks Martin ?