It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Links
Link Styles
While using the link.min.js
plugin it is possible to add custom style on the selected link inside the WYSIWYG HTML editor.
Try it yourself:
The classes should be defined in CSS, otherwise no changes will be visible on the link's appearance.
You can define your own link styles using the linkStyles
option. This option is an Object where the key represents the class name and its value is the style name that appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.
By default you can select multiple link styles at a time. If you want to toggle them and allow only one style to be selected at a time use the linkMultipleStyles
option.
HTML
<div id="froala-editor"> <p>The classes should be defined in <a href="http://www.w3schools.com/css/" title="CSS" target="_blank" rel="nofollow">CSS</a>, otherwise no changes will be visible on the link's appearance.</p> </div>
CSS
<style> .class1 { text-decoration: underline; } .class2 { color: blue; } </style>
JAVASCRIPT
<script> $(function() { $('div#froala-editor').froalaEditor({ // Define new link styles. linkStyles: { class1: 'Class 1', class2: 'Class 2' }, }) }); </script>