I want to create a little WYSIWYG editor.
The idea:
First I want to add the feature to write and change text. So I add an onClick and onKeyBoard Listener to my div container. When I click the div I set a varaible named "focused" to true. When an key event is fired I check if focused is true. In case focus is false nothing will happen else the new charater will be added on the cursor's position.
My questions:
Is this the right way? I tried to check how other editors handle the text input but I wasnt able to get it.
In case this is the right way - how can I simulate a blinking cursor. In a textarea the cursor will blink but who about a div container? The cursor will hide immideatly after clicking.
I'm assuming you're doing this for fun/practice. If you're doing this for professional reason then I HIGHLY recommend you don't reinvent the wheel and use something like Ckeditor, tinyMCE or YUI.
That being said; you need to look into event handling. Specifically, for your question about focusing, you can look here. The way you're describing (setting a variable to true/false) seems like it is going to just run into problems. If you use the standard events attribute (as opposed to setting a "focus" variable onclick) you should define functions to execute and then set them as an onfocus/onblur attribute for the element you're listening to.
That is if you aren't using a javacript library like mootools, jquery, extJS, etc. If you're using one of those they likely have their own way of handling events, so you should search their respective documentation for how to implement event handlers.
One more note; you really should be using a textarea over a div (unless I'm misunderstanding and you just want to do something when a user focuses on your div). If you're using javascript only to completely reinvent a texteditor from a div; then your web page will not function without javascript. If you keep the text area; users could still type information in and you still get the benefit of grabbing text contents for form submits but using divs means your web page will just be rendered useless without javascript.
Related
Is there any way to keep the current selection inside a Jodit-editor, when clicking outside of it? E.g. I'd like to have a button completely outside the editor (e.g. in a sidebar of the application) that can insert some elements in the editor window at the current position.
You can store the selection by using editor.selection.save() and it will be temporarily written in the markup. This can be restored using editor.selection.restore(). This mechanism would actually work for my use-case, but unfortunately, the 'helper-markup' is also removed/reset in the moment of the editor losing focus.
Also, I didn't find something like a 'selection'-event, that I could use to 'remember' the selection in my own state. Plus the selection. The set method from the selection doesn't seem to work, but I haven't dug into that yet.
I had the same problems and I have solved that a small trick.
As you know you can catch selection in the "onBlur" event and in there I added a special string for the check after losing focus.
for example "{}".
and then string replace with my want.
I have an ASP.NET CompositeControl that I need to react to loss of focus. I've tried various techniques to try and get it to respond, but have had no luck. The control consists of a text box, label, and button. I can get it to post back from leaving the text box, but I need it to respond to the button as well. It has to be a vanilla JavaScript solution, because not all applications that will have this control have jQuery included. I've scoured for answers and haven't been able to find a solution that works.
Is there a way to trigger a post back from the entire composite control container element, or is there a way to attach 'blur' events to elements that don't normally have them?
I have an element with a text that shows a tooltip when the text is truncated. I want to remove the tooltip when the element's text is no longer truncated. The problem is I can't get to the event of the tooltip. I add the tooltip by setting the attribute to the element on truncation. However, removing the attribute doesn't remove the event and the tooltip still shows up. I am using Angular bootstrap tooltip.
I searched the internet and removeEventListener() didn't help because I don't have the tooltip event handler. The only workaround I was able to use and worked is triggering the event mouseleave on the element which hid the tooltip, not removed it. I think this is not a good way of doing it, I need to remove that event.
By the way, I am using angular and javascript only, no jQuery.
Any ideas how to do this?
Edit:
My element is like this:
<span>Here goes the text</span>
and after adding the tooltip the element looks like this
<span uib-tooltip="Here goes the text" tooltip-append-to-body="true" tooltip-placement="bottom">Here goes the text</span>
You should provide tooltip-enable expression in attributes which will return if text is truncated or not. This can be easily determined like so: https://stackoverflow.com/a/143889/2337927. Keep in mind though that you can't use DOM elements directly in angular expressions due to security issues. What you want to do is for example register isTextOverflowing function on controller and call it from the expression: tooltip-enable="vm.isTextOverflowing()"
Edit
If you are positive that what you want is to remove event listener completely then I'm afraid that will involve writing a decorator but in really messy (or even hacky) way but if what you're up to is simply closing the tooltip when text becomes fully visible it's easy to accomplish using combination of tooltip-enable and tooltip-is-open such as shown in this plunk.
I'm trying to modify this: jquery desktop
by adding a input field inside one of the windows. However, I can't type anything into the input. I opened firebug and the classes are flashing when I click the text input so I'm guessing that's what's blocking it. But I don't know how to fix this. Any help is appreciated.
In his very long article, do a page search for 'Cancel mousedown'. You'll see he's canceled any mousedown event that's not a link. That's what you'll have to alter to make it usable. You could either delete the whole thing (the point was to bind a context menu, which he ended up not doing) or add input as an exception like a is.
I'm working on a project that approximates the functionality of Firebug's inspector tool. That is, when mousing over elements on the page, I'd like to highlight them (by changing their background color), and when they're clicked, I'd like to execute a function that builds a CSS selector that can be used to identify them.
However, I've been running into problems related to event bubbling, and have thoroughly confused myself. Rather than walk you down that path, it might make sense just to explain what I'm trying to do and ask for some help getting started. Here are some specs:
I'm only interested in elements that contain a text node (or any descendant elements with text nodes).
When the mouse enters such an element, change its background color.
When the mouse leaves that element, change its background color back to what it was originally.
When an element is clicked, execute a function that builds a CSS selector for that element.
I don't want a mouseover on an element's margin area to count as a mouseover for that element, but for the element beneath (I think that's default browser behavior anyway?).
I can handle the code that highlights/unhighlights, and builds the CSS selector. What I'm primarily having trouble with is efficiently binding event handlers to the elements that I want to be highlightable/clickable, and avoiding/stopping bubbling so that mousing over a (<p>) element doesn't also execute the handler function on the <body>, for example. I think the right way to do this is to bind event handlers to the document element, then somehow use bubbling to only execute the bound function on the topmost element, but I don't have any idea what that code looks like, and that's really where I could use help.
I'm using jQuery, and would like to rely on that as much as possible.
You can add an event listeners to document.body. The handler function can inspect the event to figure out which element was originally targeted. If you were using the Prototype library, you would use this:
http://prototypejs.org/api/event/element
I know you're using jQuery, but I'm sure it has equivalent functionality; I'm just not as familiar with it.
This is going to be fairly problematic, because you can't directly style the text nodes in your document. That means that if you've got something like this:
<div>
Hello world how are you
<ul>
<li>First of all, it is a lovely day outside</li>
<li>Second, it's important that you
<a href='http://somewhere.else'>click here</a>
</li>
</ul>
</div>
Well when you try to restyle the text block at the head of that <div>, you'll need to do it in such a way that the rest of the <div> doesn't also get a new background color. (At least, I think that's what you're asking for.)
There's a "highlight" plugin for jQuery that you might look at as a guide to how you can replace simple text nodes with <span> tags that have some given class. The plugin is intended to let you style words/phrases that you search for, but it's not terribly complicated and you might be able to adapt it. The plugin is here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html