Can i use a javascript inline edit library in my angular 2 project?

Question

This is the library:

http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/

This is used for inline editing on html pages. My code on HTML page is shown below -

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script src="http://sco7.com/del/jquery-contenteditable.js"></script> <script> $("#basic").editable(); $("#paragraph").editable({ multiline: true, autoselect: true }); $("#alert").editable({ multiline: true, saveDelay: 800, save: function(e, ui) { alert("Saving actual content: " + ui.content); } }); $("#scalable").editable({ multiline: true }); $("#nonempty").editable({ multiline: true, saveDelay: 600, autoselect: true, save: function(e, ui) { alert("Saving actual content: " + ui.content); }, validate: function(e, ui) { return ui.content !== ""; } }); $("#complex").editable({ content: "a", //only link <a> is editable autoselect: true, save: function(e, ui) { alert("New link: " + ui.content); }, validate: function(e, ui) { return ui.content !== "" } }); </script> 

 <p id="alert"> This sample fires alert each time changed content is supposed to be saved (eg sent to server). It is currently set up to fire after 800ms delay of not typing anything. </p> 

I want to use this in my angular project. Can i use this as it is ? Like the <p id="alert"> , i need to do in exact similar way ? Please advise.

Answer 1

You can use contenteditable attribute or set designmode on html elements to make it editable. For more information you can refer Mozilla Developer Network

 $(document).ready(function(){ $("#alert").keyup(function(){ console.info($(this).html()); // prints edited text console.info("Inner Html---->"+$("#container").html()); // prints html of edited text }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <p id="alert" contenteditable="true"> EDIT ME </p> </div> 

Example Code

<div #container>
 <p #alert contenteditable="true">EDIT ME</p>
</div>

Script File

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('container') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
  this.el.nativeElement.innerHtml;      
}

Answer 2

Option 1: Add scripts directly

You can add that scrips directly in your page using $("selector")

index.html

<h2 id="basic">
    Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing.
</h2>

<!--do not forget add scripts-->

<!--basic scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/src/jquery-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>

<!--your scripts-->
<script src="app.js"></script>
<script src="your-editable.js"></script>

app.js

var app = angular.module("app", []);

your-editable.js

$("#basic").editable();

Options 2: convert to directive

There you can convert the editable to directive to have more access on elements

index.html

 <!--options: basic, paragraph, alert, scalable, nonempty, complex-->
<h2 content="basic">
    Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing.
</h2>

<!--do not forget add scripts-->

<!--basic scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/src/jquery-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>

<!--your scripts-->
<script src="app.js"></script>
<script src="directive.js"></script>

app.js

var app = angular.module("app", []);

directive.js

Also you can improve this directive to get more options from developers

app.directive("content", function () {
  return {
     restrict: "A",
     scope: {
        content: "@"
     },
     link: function ($scope, $element) {
       switch ($scope.content) {
         case "basic":
           $element.editable();
         break;
         case "paragraph":
           $element.editable({
             multiline: true,
             autoselect: true
            });
         break;
         case "alert":
            $element.editable({
              multiline: true,
              saveDelay: 800,
              save: function (content) {
                alert("Saving actual content: " + content);
              }
         });
         break;
         case "scalable":
           $element.editable({
             multiline: true
           });
         break;
         case "nonempty":
           $element.editable({
              multiline: true,
              saveDelay: 600,
              autoselect: true,
              save: function (content) {
                 alert("Saving actual content: " + content);
              },
              validate: function (content) {
                 return content !== "";
              }});
          break;
          case "complex":
            $element.editable({
               content: "a",
               autoselect: true,
               save: function (content) {
                  alert("New link: " + content);
               },
               validate: function (content) {
                  return content !== "";
               }});
         break;
         default:
              $element.editable();
         }}}});