Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Having trouble installing Oxygen? Got a bug to report? Post it all here.
Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
I want to create a dropdown as the Oxygen web author toolbar action and the options in the dropdown will change the tag display for the entire document. Is there a way to do that?
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hello,
In the last version of Web Author (24.1) we added a Tags Display Mode switcher in the breadcrumb bar. Is this feature what you need for your use case or do you want to add it also on the toolbar?
You can check our demo server to test the Tags Display Mode drop down.
Best Regards,
Mihaela
In the last version of Web Author (24.1) we added a Tags Display Mode switcher in the breadcrumb bar. Is this feature what you need for your use case or do you want to add it also on the toolbar?
You can check our demo server to test the Tags Display Mode drop down.
Best Regards,
Mihaela
Mihaela Calotescu
http://www.oxygenxml.com
http://www.oxygenxml.com
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
You can follow the instructions from this tutorial, to add an action to a toolbar. See the "If you want to add the action on the DITA toolbar, in a dropdown" section.
Here's an example for how to write a dropdown descriptor that lists tags related actions:
Best,
Gabriel
You can follow the instructions from this tutorial, to add an action to a toolbar. See the "If you want to add the action on the DITA toolbar, in a dropdown" section.
Here's an example for how to write a dropdown descriptor that lists tags related actions:
Code: Select all
{
type: "list",
name: "Tags Display Mode",
displayName: tr(msgs.TAGS_DISPLAY_MODE_),
small: true,
toBottom: positionBottom,
children: [{
type: "list",
name: "sentinels_on_toolabar",
displayName: 'Display Name',
iconDom: goog.dom.createDom('div', {className: 'ui-action-small-icon', id: 'sentinels_mode'}),
children: [{
type: "action",
id: "Author/NoTags"
},{
type: "action",
id: "Author/PartialTags"
},{
type: "action",
id: "Author/InlineTags"
},{
type: "action",
id: "Author/BlockTags"
},{
type: "action",
id: "Author/FullTags"
},{
type: "action",
id: "Author/FullWithAttrsTags"
}]
}
]
}
Gabriel
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Thank you for the solution.
I am trying to change tag display through plugin by invoking JS Operation but it is giving me this error "Error For security reasons, the execution of ro.sync.ecss.extensions.commons.operations.JSOperation with user-provided parameters is blocked. If the operation is safe, consider annotating it with ro.sync.ecss.extensions.api.webapp.WebappRestSafe.". How to get around that or what else should I use to change tag display through plugins?
I am trying to change tag display through plugin by invoking JS Operation but it is giving me this error "Error For security reasons, the execution of ro.sync.ecss.extensions.commons.operations.JSOperation with user-provided parameters is blocked. If the operation is safe, consider annotating it with ro.sync.ecss.extensions.api.webapp.WebappRestSafe.". How to get around that or what else should I use to change tag display through plugins?
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
The actions are registered with these IDs: Author/NoTags, Author/PartialTags, Author/InlineTags, Author/BlockTags, Author/FullTags, Author/FullWithAttrsTags
You can write custom javascript code that changes the structure of a toolbar by following this example.
You can find an example plugin here, as a starting point.
And here's an example for how to add the tags-related actions to the DITA toolbar:
Best,
Gabriel
You don't need to call a JSOperation. The actions that change the tags display mode are already available to call/add to a toolbar from a javascript plugin.I am trying to change tag display through plugin by invoking JS Operation
The actions are registered with these IDs: Author/NoTags, Author/PartialTags, Author/InlineTags, Author/BlockTags, Author/FullTags, Author/FullWithAttrsTags
You can write custom javascript code that changes the structure of a toolbar by following this example.
You can find an example plugin here, as a starting point.
And here's an example for how to add the tags-related actions to the DITA toolbar:
Code: Select all
workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
var editor = e.editor;
editor.listen(sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
var actionsConfig = e.actionsConfiguration;
var ditaToolbar = null;
if (actionsConfig.toolbars) {
for (var i = 0; i < actionsConfig.toolbars.length; i++) {
var toolbar = actionsConfig.toolbars[i];
if (toolbar.name === "DITA") {
ditaToolbar = toolbar;
}
}
}
if (ditaToolbar) {
ditaToolbar.children.push({
type: "list",
name: "Tags Display Mode",
displayName: tr(msgs.TAGS_DISPLAY_MODE_),
children: [{
type: "action",
id: "Author/NoTags"
},{
type: "action",
id: "Author/PartialTags"
},{
type: "action",
id: "Author/InlineTags"
},{
type: "action",
id: "Author/BlockTags"
},{
type: "action",
id: "Author/FullTags"
},{
type: "action",
id: "Author/FullWithAttrsTags"
}]
});
}
});
});
Gabriel
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
Best,
Gabriel
[1] https://www.oxygenxml.com/maven/com/oxy ... figuration
[2] https://www.oxygenxml.com/maven/com/oxy ... Event.html
How are you building this custom toolbar? You can push a toolbar descriptor to the actionsConfig.toolbars [1] list during the ACTIONS_LOADED [2] event to create your own toolbar. The code I posted should work for any toolbar, not the DITA toolbar specifically.It's a normal custom toolbar and these IDs are not working there.
Best,
Gabriel
[1] https://www.oxygenxml.com/maven/com/oxy ... figuration
[2] https://www.oxygenxml.com/maven/com/oxy ... Event.html
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hi, I have used the same code as you have given. The dropdown comes in the toolbar in the web author but on click of any of the dropdown action, the tags are not changing. There are no errors as well. It is just not reflecting. Similarly, I have tried to achieve the same with framework as well. It works in the Oxygen XML Editor but after importing the same framework in the Oxygen Web Author, I'm facing the same problem. The dropdown comes up in the toolbar but functionality not working. Is there anything I'm missing?
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
You can upload an archive with relevant information here.
Best,
Gabriel
We need more information to help you. Are there any errors in the browser's console? Can you share your code?There are no errors as well. It is just not reflecting
You can upload an archive with relevant information here.
Best,
Gabriel
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
I have created a dropdown for changing the tag display mode in the custom toolbar. I have tried to do that using the framework and also as well as using plugin. But I am facing problems with each of these processes. The dropdown is coming up in the toolbar but on click of the action, no changes are reflecting on the screen. There are no browser console errors present either. I am loading the oxygen web author like this :
http://localhost/oxygen-xml-web-author/ ... Only=false
Even when I am trying to invoke operation as editor.getActionsManager().getActionById("Author/InlineTags").actionPerformed(callback) , nothing is happening.
I am also updating we are updating editor options on 'BEFORE_EDITOR_LOADED' event like below:
After that I have added the code which you had shared previously. I am not sure If I am missing something or if anything is getting overriden. Kindly check and let me know.
http://localhost/oxygen-xml-web-author/ ... Only=false
Even when I am trying to invoke operation as editor.getActionsManager().getActionById("Author/InlineTags").actionPerformed(callback) , nothing is happening.
I am also updating we are updating editor options on 'BEFORE_EDITOR_LOADED' event like below:
Code: Select all
e.options["tags-mode"] = 'full-tags-with-attributes';
e.options["compactTagsMode"] = false;
e.options.modes = 'edit';
e.options.searchMode = "dialog";
e.options.autoSaveInterval = 0;
e.options.contentType = "application/xml;charset=utf-8";
if(e.options.textModeReadOnly == "true"){
editor.setReadOnlyState({
readOnly: true,
message: 'Content is not checked out',
code:'0'
})
editor.setReadOnlyStripeRenderer((state, renderer) => {
renderer.parentElement.remove(renderer);
})
e.options.textModeReadOnly = false;
}
-
- Posts: 496
- Joined: Thu Sep 04, 2014 4:22 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by cristi_talau »
The "tags-mode" loading option is imposing the "full-tags-with-attributes" display mode. If you just want to provide a default, you can use the following server option "tagless.editor.tags.display.mode" which is documented here: https://www.oxygenxml.com/doc/versions/ ... splay.mode .
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hi,
Even after removing the "tags-mode" loading option there was no difference. I mean the dropdown actions are still not reflecting any changes in the editor. Is there any way to fix it?
Even after removing the "tags-mode" loading option there was no difference. I mean the dropdown actions are still not reflecting any changes in the editor. Is there any way to fix it?
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
If removing this line does not work, try to inspect the object (console.log('Loading options: ' + e.options)). Maybe the tags-mode property is set in the URL query params?
If you can't find the cause of the problem please upload a more significant code sample from your plugin to help us reproduce this problem on our side.
Best,
Gabriel
If removing this line
Code: Select all
e.options["tags-mode"] = 'full-tags-with-attributes';
Code: Select all
e.options
If you can't find the cause of the problem please upload a more significant code sample from your plugin to help us reproduce this problem on our side.
Best,
Gabriel
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hi,
So the tags-mode was getting set in the query params which I had not noticed before. Thank you for pointing it out. It works well now.
So the tags-mode was getting set in the query params which I had not noticed before. Thank you for pointing it out. It works well now.
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hi,
Is there any way to make any edits to the code of the preset tag display IDs of "Author/NoTags", "Author/PartialTags", "Author/InlineTags", "Author/BlockTags", "Author/FullTags", "Author/FullWithAttrsTags". I want to add a class at the click of each of these actions. Is there any way to achieve that.?
Is there any way to make any edits to the code of the preset tag display IDs of "Author/NoTags", "Author/PartialTags", "Author/InlineTags", "Author/BlockTags", "Author/FullTags", "Author/FullWithAttrsTags". I want to add a class at the click of each of these actions. Is there any way to achieve that.?
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
What are you trying to achieve? Do you want to set a CSS class for the Web Author user interface, or a CSS class/pseudo-class in the edited XML document? What is the expected result of the class change?
Best,
Gabriel
What are you trying to achieve? Do you want to set a CSS class for the Web Author user interface, or a CSS class/pseudo-class in the edited XML document? What is the expected result of the class change?
Best,
Gabriel
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Hi, I have added another action to the tag display dropdown. The "limited tags" option will add a css class "limited" to change some styles in the document. Now on click of other tag display options, I want to remove the class but I am not able to do so. Is there any event where I can check which action is called on click. or is there any other way to do that?
This is my code:
This is my code:
Code: Select all
var tagDisplayObj = {
type: "list",
name: "Tags Display Mode",
displayName: tr(msgs.TAGS_DISPLAY_MODE_),
iconDom: goog.dom.createDom('div', {className: 'ui-action-large-icon', id: 'sentinels_mode', style: 'background-image: url(../plugin- resources/content-plugin/images/tagDisplaySettings.png);'}),
children: [{
type: "action",
id: "Author/NoTags"
}, {
type: "action",
id: "Author/PartialTags"
}, {
type: "action",
id: "Author/InlineTags"
}, {
type: "action",
id: "Author/BlockTags"
}, {
type: "action",
id: "Author/FullTags"
}, {
type: "action",
id: "Author/FullWithAttrsTags"
},{
type: "action",
id: "content/limitedTags"
}]
};
class LimitedTags extends sync.actions.AbstractAction {
#editor;
constructor(editor) {
super();
this.#editor = editor;
}
renderLargeIcon() {
var largeIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
return sync.util.renderLargeIcon(largeIcon);
}
renderSmallIcon() {
var smallIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
return sync.util.renderSmallIcon(smallIcon);
}
getDisplayName() {
return 'Limited Tags';
}
getDescription() {
return "Displays tags with limited display.";
}
actionPerformed(callback) {
document.querySelector("#editor-frame-wrapper").classList.add("limited");
callback();
}
}
-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
Post by Gabriel Titerlea »
Hello,
You can call custom code after the tags-display mode has changed like this (repeat for all tag-related actions):
Best,
Gabriel
You can call custom code after the tags-display mode has changed like this (repeat for all tag-related actions):
Code: Select all
var action = this.actionsManager.getActionById('Author/FullTags');
// save the original actionPerfomed method
var actionPerformed = action.actionPerformed;
// replace the actionPerformed method with one that adds custom code at the end
action.actionPerformed = callback => {
// call the original actionPerfomed
actionPerformed.call(action, () => {
// custom code here. the original actionPerformed has finished
// Don't forget to call the callback function when your custom code has finished.
callback();
});
};
Gabriel
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service