How to edit ol tags in rich text editor


Tags: html,css,angularjs,html5,textangular

Problem :

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:

  1. test
  2. 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

  1. test
  2. 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.

  1. number 4
  2. 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.



Solution :

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;
    });

    CSS Howto..

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    How to change radio button place & add line separator

    how to style simple_form with material design or custom css

    How to reference nested classes with css?

    How to strike through obliquely with css showing the text on top of the strike through

    How to have css hover effect affect child elements differently?

    How to apply same event to multiple buttons?

    How to Clear Every Third Box in a Row? [duplicate]

    How do you make these div elements display correctly?

    CSS/Web design: how to create an oblique/sided button

    How to Manage Responsive Design in percentage(%)?

    How to give shadow to a border

    How to keep divs position fixed even after deleting its neighbors?

    how to deal with repeated letters in a javascript hangman game

    How to add materialize css to an angularjs project?

    why will my border not show?

    How to keep background image on css gradient

    how to place bg image with css

    How to achieve horizontally centered layout with partially liquid column?

    How can I make a div horizontally center itself in another div? [duplicate]

    How to create a QT plugin that customizes UI?

    How do I reduce the vertical space between list items in an unordered list?

    How to Create paragraph first letter uppercase in html & css (in special format)

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

    How to reverse z-index on stacked divs

    how to increase/decrease font-size from external css [closed]

    HTML/CSS How to have to tags on same line?

    How to Convert RGB to HEX ( for Gradients )

    how to include css style to modify existing placeholder