3

I know how to set up custom styles in Wyvern and Wygwam so that my client can apply, say, a <dfn> tag or <abbr> tag to some text. And I can set attributes within that tag. But the values of the attributes (in this case, lang and title attributes) are hard-coded via the custom style configuration.

Is there any way, using either Wygwam or Wyvern, to let the client specify the content of those attributes without them having to click the Source button and wallow around, shrieking, in the raw horror of HTML?

  • This is going to be a CKEditor specific issue since both editors use it. You might find more information by searching CKEditor forums, or searching for CKEditor elsewhere in StackExchange. – Brian Litzinger Mar 28 '13 at 14:42
  • Yes, fair enough Brian. I'll look elsewhere. – RickL Mar 28 '13 at 17:26
1

That should be possible by just adding a custom styleset. You can create a new .js file and then set the values in a Javascript array format:

CKEDITOR.stylesSet.add( 'my_styles',
[
    { name: 'Abbreviation', element: 'abbr', attributes: { 'lang': 'en' } }
]);

Full documentation is here.

So if you're using Wygwam for instance then create a new folder in the themes third party directory and call it something easy to recognise such as:

/themes/third_party/wygwam_assets

Create your new .js file inside this folder with the above (or something similar) in it.

Then tell Wygwam where to find the new styleset. In Addons > Modules > Wygwam select the configuration you want to use the new styleset. Then "Add an advanced setting" and choose "styleSet". In the text field that then appears enter the following (with your specific paths and file names replaced):

my_styles:/themes/third_party/wygwam_assets/my_styles.js
| improve this answer | |
  • Ian: I've already done that. The problem is that the value of the attribute (e.g. 'lang' : 'en' ) is set in the javascript, not set by the user at the time that the tag is applied. Ideally I want some solution that opens a dialogue when the user chooses the style, asking for the user to supply the value of the attribute (e.g. if the style from the menu applied a <abbr> tag, then the user would be able to supply the expansion of the abbreviation to populate the title attribute). – RickL Mar 28 '13 at 17:34
  • As Brian (above) pointed out, this is essentially a CKEditor issue, so unless the facility exists in CKEditor and it just happens that neither Wygwam nor Wyvern bothered to make use of it (seems unlikely), I guess I'm out of luck. My current workaround is to put temporary, easily-spotted placeholder attributes into the styleset's code (e.g. title="XXXXXXXXXX") so that when the client does switch over to the source code they'll hopefully be able to find where to enter their content without too much difficulty. – RickL Mar 28 '13 at 17:39
1

Why not use a javascript solution like this - http://www.zazar.net/developers/jquery/zglossary/

Create a channel called "glossary" then create the json file from the channel?

There are a ton of plugins out there with a few more features then the plugin above.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.