Wrap multiple lines in one div - ckeditor

Currently in CKeditor, the style drop-down let you wrap content with block or inline tags.
If you select multiples lines in the editor and chose a div element in the style menu, each lines will be wrapped individually in a div element.
Is it possible to select multiple lines and then wrap them in one div?

Related

Need a non-TAB character to traverse li items in a drop-down menu

default elements in html that are tabbable are:
<a> , <area> , <button> , <input> , <object> , <select> , and <textarea>
If someone were to “plop” my code for drop-down menus, my tabbable elements are my li.
What I wish to do is select a non- TAB key to traverse my li, thus keeping the TAB key reserved by HTML
FWIW, I just let my selection of the TAB key ride ... eventually it gets to my last li and then tabs to your <a> or <input> etc. html and then proceeds to the Browser's tabbable stuff and cycles back to the beginning of my li items.
Not too awful I guess?
Suggestions appreciated.
You can give your <li> items a tabindex of -1 to make sure they're not focusable vith the TAB character, then focus the next element with Javascript using the HTMLElement.focus() method and onkeyup event.

Xpath based on another element value

I need to use Selenium Java to click on some links based on another element in the same line. I have the following HTML:
HTML image
I need to click on the span link (red color) of every line which contains that empty checkbox (green color). I can find all empty checkboxes by using xpath //img[contains(#src,'completion-auto-n')], but I can't find a XPATH to click on these span based on the checkbox's values.
From the img elements, you could use the ancestor:: axis with a predicate to look up the tree for the first div, and then look down the tree with the // descendant axis from that div for an span that is a child of an a:
//img[contains(#src,'completion-auto-n')]/ancestor::div[1]//a/span

How to dynamically append unknown number of div elements to your svg

I need to append a number of div elements based on the result of calling my db, and inside those div elements append other elements.
For example, I get back 10 rows, so I have to append 10 texts and 10 lines (the divs) on each of which I am appending some circles based on the data for each row. Since the number of circles is unbounded, I was thinking of appending a scrollable div.
Now that I have done this, the elements are appended with the right attributes (according to developer tools), but one cannot see them on the page!
Is there a way to dynamically append divs so that the elements within them are visible?

Get cursor position in CKEditor 4 within edited element's HTML

I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.

Sublime text 3: How can I insert wrapping HTML elements like Dreamweaver

Everytime I'm putting HTML tags I need to wrap into a new element. I remember you can do this on Dreamweaver just inserting an element when you select something. Is there a way to do this with sublime text?
Select the text you want to wrap, and hit AltShiftW. It will initially be wrapped in <p> tags, but you can just type the tag you want and the tags will automatically change.

Resources