Is it available to change the webviewer button icon of 'annotationStyleEditButton' & ' annotationDeleteButton' - javascript

I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?

There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!

Related

How can we make our custom PDF editor with our custom editable logics with vuejs?

I want to make a feature using vuejs jsust like MS word to edit PDFs. How can I make such pdf editor with vuejs in which I can add my own customization logic?
e.g.
Feature should be able to do things like
Adding conditional replace text
Adding tags to text within pdf
Change background color of text.
This would be a fairly major project. Perhaps you should look for libraries already built, read through issues on Github and project documentation to get a sense as to how these products are built.
There are only a handful of packages in the 'awesome vuejs' library that deal with PDF viewers. No PDF creators that I can see; it's probably very hard to do.
This one has 1700 stars and is not recently active, meaning there may not be a lot of people actively working on the custom PDF editor space. This may be the largest in the Vue community for viewing, not editing.
https://github.com/FranckFreiburger/vue-pdf
Take a look at this curated list for inspiration in various UI areas:
https://awesome-vue.js.org/components-and-libraries/ui-components.html#pdf
Best of luck to you,
Marcus

Extjs default class properties

I came across a defualt class called 'x-btn-over' on Extjs which is triggered on a mouse hover. I wanted to ask what the default properties of this class is? Also where can I find all the list of these built-in classes. The docs doesn't seem to cover these properties. Thanks
These css classes are generated when the application is built. It's not documented because it is not recommended to use them for styling ExtJS apps (though you can guess them by using an inspector tool like "Inspect Element" in Chrome dev tools). Although nothing would stop you to use these css classes in scss files and manually created stylesheets, and personally I use it sometimes when I want to do a quick and dirty solution, it should be avoided because chances are these values could be changed or removed in a new version of the framework.
The ExtJS framework has its own theming system.
The scss variables are usually documented in the "Theme Variables" section of a component. For example: Button theme variables
To find "over" related scss variables filter the properties with "over" and scroll down to the "Theme variable" section:

Javascript package or library for UI component

I am looking for a implementation for the following image of a component. It runs through each header and text and scrolls up the associated image periodically. The user may also select a text block and the image on the right will scroll to the associated image, much like a carousel. Is there a library or package that may help me create this?
(I'm not sure what the best term for such an interface is)
Try to check components from this collection of JavaScript UI frameworks.

how to create a style selector in google closure editor

I wonder how difficult it is to create a working "style selector" selector in the goog closure editor similar to the one in tinymce.
I mean a selector of text styles such as
heading 1
heading 2
heading 3
paragraph
From the documentation I take that there's none available by default, even though there are slightly related default buttons such as bold etc. The logic for the pre-existing buttons I am aware of are provided in a plugin called basictextformatter.js.
I'm familiar with writing plugins and I would implement this using the .execCommandInternal function, and using the ToolbarFactory to create a selectButton.
But my issue is, do I really have to write all the logic from scratch, such as: how much text to enclose in the style selection if the selection is a caret, and removing previous styles on applying new selections, handling cross-browser tagging insonsistencies, displaying the selected style in the button and all of this?
As it seems to be a standard feature in many other editors, is there a chance I have just missed a pre-existing plugin function or other building blocks?
I'd be grateful for any hints for not re-inventing the wheel.
It sounds like you're referring to "plugins," which are objects you can inject into Google Closure's goog.editor.Field text editor. There are many standard plugins that are included in the Google Closure Library (bold, italicize, underline, make a link, etc), though you can always roll your own. For example, I had to make my own paste plugin that removed HTML formatting from pasted text.
After you pick out the plugins you want, you can then add buttons to the editor's toolbar which fire command events that those injected plugins listen to.
Here's a blog post that gives a much better explanation of how to actually set this up than I ever could here:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html
Well I think I found the answer.
There's a plugin which is part of the lib called HeaderFormatter. It's unfortunately dependent on BasicFormatter plugin and doesn't seem to come with a default button (you have to create your own) - but looks exactly like it's the answer to this question.

CKEditor: how to change editor behaviour without changing it's source code?

I mean next thing: I want to add some specific class to table when it's creating in editor area (iframe) for default styling reasons. I now how to do this with changing it's source code of plugin table, but it is bad decision to change that files... And it is impossible to do through configs. Maybe there is some way to redefine table behaviour on the fly...
What will be the best solution in this case?
Thanks in advance!
You can write a plugin to modify the behavior of the table dialog or any other one on the fly. How far you can go with this approach depends on your abilities and which changes do you want. If it becomes too complex to adjust this way then the second approach is to copy the original plugin that you want to modify and create your own version based on that (but outside the CKEditor source folder)
This plugin for example adds a field in the Table and Cell dialogs to pick a background image: http://cksource.com/forums/viewtopic.php?f=18&t=23607
You can learn how to write your plugins by following the CKEditor tutorials.
I think changing the source code for "styling reasons" is a bad idea.
You can easily change the default CSS by changing the default skin (v2 skin I think) or by adding a custom skin to CKEditor.
Documentation
Developers Guide

Categories