Instead of using HTML underline tags, I want the WYSIWYG editor (CKEditor) to wrap a span around the highlighted text. Does anyone know how I can achieve this? Thanks!
2 Answers
Sure see this great blog post titled WYSIWYG Module + CKEditor: Taming the Beast by Fuse Interactive. I am not affiliated with the company nor the author of it -- it's simply a great resource.
Linked in those blog comments is a link to the CKEditor Configuration Options documentation, which is what you'll end up altering to make this happen.
In the blog post they supply their own config settings for the editor in javascript. I believe you can set all these values in hook_wysiwyg_editor_settings_alter
, the settings for the Styles look like:
{ name : 'Float Right', element : 'div', attributes : { 'style' : 'float:right;' } },
{ name : 'Float Left', element : 'div', attributes : { 'style' : 'float:left;' } },
Where this defines a style called Float Right
that wraps the selected text in a div
with some inline styling. I believe you can easily assign classes instead of inline styles as well.
This should be a huge jumping off point for you to figure it all out. Best of luck!
Go to admin/config/content/wysiwyg/profile/full_html/edit and select "Font Style" then go to the bottom of the page to the "CSS" tab and add Span=span in the "CSS classes" box.
You should now see "Span" in the styles select box on your content edit page.
If you want to give the span a style add Span name=span.name into the "CSS classes" box