How to edit ol tags in rich text editor - css

Question

I am creating and ordered list using Text Angular and able to create orderlist which starts with 1,2,3 by default. Text angular has 2 modes
1. Rich Text mode
1. HTML mode
HTML mode shows
<ol>
<li>test</li>
<li>test</li>
</ol>
Rich Text mode will show as:
test
test
If I need to start ordered list with number 5, I need to switch to HTML mode first and do the below change
<ol start="5">
<li>test</li>
<li>test</li>
</ol>
Now the Rich Text mode starts the numbering with 5
test
test
The real problem is how to change the numbering by clicking on the pseudo element generated by the < ol> tag while on the rich text editor mode. After googling and research it seems the pseudo element cannot be changed.
Stack overflow editor gives the option of changing this in Rich Text mode itself!
So while adding the below data in Rich Text mode starting with 4 for example
4. number 4
3. number 3
The preview mode ends up displaying buggy result.
number 4
number 3
if you noticed 5. number 3. this was generated from the Rich text editor.
There are JS way to replace tags in the DOM and give a simlar tag look n feel using combination of html tags etc which I am not looking for at this point.
Would there be a creative CSS way to change the number on the fly in the rich text mode (rather than doing html mode) in Text Angular.

Answer 1

As I understood, what you need is a feature for changing the starting number when using the ordered list which is not implemented by the text-angular editor at the moment. What text-angular provides you in such cases is easy extending of the toolbar by adding new or overriding existing functionalities.
Here is a Plunker with an example implementation of the feature you need. I have implemented it by overriding the ol button configuration like this:
app.decorator('taTools', function ($delegate, $document, taSelection) {
// NOTE: override the ol action
var olAction = $delegate.ol.action;
$delegate.ol.action = function () {
if (!this.active) {
// NOTE: replace with better way for integrating the feature
var startingNumber = $document.find('#startingNumber').val();
// do the ordering
var result = olAction.apply(this, arguments);
// change the starting number
var element = angular.element(taSelection.getSelection().start.element);
var parentOls = element.parents('ol');
if (parentOls.length > 0) {
angular.element(parentOls[0]).attr('start', startingNumber);
}
// clean up
element = null;
parentOl = null;
return result;
} else {
return olAction.apply(this, arguments);
}
};
return $delegate;
});
The way for configuring the starting number IMO is not so good, it's just for showcase because replacing it with better way takes more effort (ex. dropdown on the ol button). You can replace it with what is most convenient for you.
For more information and examples on Text-Angular editor you can check its documentation and the page for customizing the toolbar.

Answer 2

Edit: After the question was edited my answer no longer fits very well. Since it still received upvotes afterwards I'm going to assume that it was nonetheless helpful and just leave it here.
As has been mentioned in comments and other answers, the clicking part is not possible. It is possible to highlight the numbering.
Add a custom counter in the :before part of your <li> tags and have them react to hovering:
ol {
counter-reset: my-counter;
}
ol > li {
list-style-type:none;
}
ol > li:before {
counter-increment: my-counter;
content: counter(my-counter) '. ';
}
ol > li:hover:before {
color: red;
}
Example here: http://jsfiddle.net/u1uhr7s8/
Again, it is not possible to add anything clickable in place of the numbers because the before: bit does not truly become part of the DOM.

Answer 3

'selected' here could mean a number of different things. You'll need to clarify your question to get the answers you're after, but if you're looking to reference this in Javascript somewhere, you can use any of the following:
document.getElementsByTagName('ol') //Will return a list of all OLs on the page
document.querySelectorAll('ol') //Will return a list of all OLs on the page
$('ol') //Will return a list of all OLs on the page, but requires JQuery
To get the '1' or '2' li elements, you'd include the LI within the query, or select it as a child of what's returned:
var myOL = document.getElementsByTagName('ol')[0];
var myItems = myOL.children;
or with JQuery
var myItems = $('ol li');
If you're talking about targeting the OL with CSS rules, you just use the tag name, e.g.
ol {
background-color: #FF0000;
}
and again, if you're after the LIs you can either target them all:
ol li {
background-color: #FFFF00;
}
or target a specific child using nth-child:
ol li:nth-child(2) { /* second child - '2' in your case */
background-color: #FFFF00;
}

Answer 4

Below solution is inspired by S.Klechkovski's answer. On the editor type a number, say 5 , select the number, click on on ol tag in TextAngular, the old now starts with 5
The difference is in var startingNumber = parseInt($(taSelection.getSelectionElement()).text());
$provide.decorator('taTools', function ($delegate, $document, taSelection) {
// NOTE: override the ol action
var olAction = $delegate.ol.action;
$delegate.ol.action = function () {
if (!this.active) {
// NOTE: replace with better way for integrating the feature
var startingNumber = parseInt($(taSelection.getSelectionElement()).text());
// do the ordering
var result = olAction.apply(this, arguments);
// change the starting number
var element = angular.element(taSelection.getSelection().start.element);
var parentOls = element.parents('ol');
if (parentOls.length > 0) {
angular.element(parentOls[0]).attr('start', startingNumber);
}
// clean up
element = null;
parentOl = null;
return result;
} else {
return olAction.apply(this, arguments);
}
};
return $delegate;
});