CKEditor5 wrap custom widget in a link, but prevent link clicks - javascript

I am trying to implement a custom widget plugin for CKEditor5, but am having hard time creating a widget that would prevent link clicks so that user stays on the same page and can edit the component itself.
I've initially started with this structure:
pluginWrapper > contentItemA + contentItemB + contentItemC
but although that mostly worked, balloons for that widget were misaligned. Meaning if I set a link it wrapped properly and link clicks actions were prevented, but the floating bar for link edit was misaligned as pluginWrapper was also positioned to "float: right";
So, I've tried to get some inspiration with a figure as e.g. visible here in the editor demo at the top of the page: https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
Here, if you set a link it works properly, including the balloons. Apparently because the figure is floating but all content is not. So I tried doing the same. Unfortunately unlike in the official example my link now became clickable when editing, which is far from desirable :(. And I can't prevent that with css to keep the content clickable and editable and my attempts in JS were not successful.
I was somehow hoping it does this automatically, either by the evt.stop() or data.preventDefault() here: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-link/src/linkediting.js#L267 (definitely looks like it should), but it doesn't seem to like my plugin.
I have also tried doing something like that as part of my plugin, but that made no difference.
Either I am missing something or I am thinking I perhaps set the link up incorrectly. But if I omit that from my plugin and set the link up manually it still behaves this incorrect way :(.
However yes, this may not be the proper way to do this from the code, as I just add these attributes:
attributes: {
linkHref: "https://www.xxx.zz",
target: "_blank"
},
to the pluginWrapper (under pluginTopWrapper > pluginWrapper), and it ends up doing pluginTopWrapper > a > pluginWrapper with the a tag having the proper link, but seems to also ignore the target attribute :/. But I guess me being unable to set the link properly in code still doesn't explain why would the link be clickable when set up manually (using the link button in the editor toolbar) around my widget.
If you have any thoughts on this it would be very much appreciated. Thank you!

Related

How can I use inspect elements on Chrome to identify the source of a particular section of a website?

This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?
I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.
This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.

Find plugin on a page

On a website, I see some charts with animation. I am sure they have used a plugin to design those charts but which one, I DONT KNOW...
Is there any way to find which plugin or .js file is used ?
I right-clicked on the chart and clicked "Inspect Element" too but no success. Can't seem to find the correct chart or the code that invoked the animations (hover, mouseOver etc)
The theme I am looking at is here
If you look at the chart underneath VISITORS, and hover over any line, it shows some values. I want to know what is triggering the show of these values.
EDIT
Muhammad answered helped me a lot. Here is what I did for someone looking for the answer.
I right-click on the plugin that I wanted to know more about, and looked at the ID and the class of the same.
By the look of it, i could see that some plugin called 'HighCharts' is used. Then I pressed
ctrl+Shift+F
After that the search option was shown to me, which I couldn't notice since it was right in the bottom of the screen.
I entered "High" in the search bar and it showed me the script and the javascript file that was used to call it.
Hope this helps
For checking which plugin they are using for this. Right click and go to inspect Element and then check the parent div class which contain the particular chart of something and after that go to sources next to the network and for the main.js OR custom.js OR app.js You can quickly search by press ctrl+shift+f or simple look into js folder and search for the class that you got from the inspect Element and you will find which function they are using for this class and u will have idea from the function name and you can search for that partical file.
Ex:
This is a simple example I hope you have got the better idea.
Step 1
Step 2
Step 3

z-index for jquery object issue

First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}

CLeditor uses the HTML 'align' attribute. How can I change that to CSS 'text-align'?

I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.

How can I create a pop up like the one Google Calendar uses ?

when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).
How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.
Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .
Also notice the close behaviour (close button and if I click out of the popup it will close).
If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.
Thanks !
There is a plugin called jquery tip-tip which might do what you are after. You essentially want to display some HTML above the area you have clicked. Tip-tip can display html as a 'bubble' above the point you have clicked. It's also easy to style. It is mainly used for tooltips but I see no reason why it can't be adapted to do this.
http://code.drewwilson.com/entry/tiptip-jquery-plugin
(p.s. you would need to use the 'content' property to set the content)
"content: string (false by default) - HTML or String to use as the content for TipTip.
Will overwrite content from any HTML attribute."
I assume that you are talking regarding the tooltips here is link which will help you
http://jquerytools.org/demos/tooltip/index.html
http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
http://craigsworks.com/projects/qtip/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
The other answers contained links about tooltips. However, I believe that a dialog component like the jQuery UI dialog would match your requirements better.
Perhaps this did not exist back in March when this question was asked, but current version of Bootstrap has popovers like the one in the question. See:
http://twitter.github.com/bootstrap/javascript.html#popovers
You can use FireBug to analyse the page and check the actual values for CSS properties (ie. what colour is the border, or how much padding is there).

Categories