我可以在我的angular 2項目中使用javascript內聯編輯庫嗎？

Question

這是庫：

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

用於html頁面上的內聯編輯。 我在HTML頁面上的代碼如下所示-

 <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> 

我想在我的角度項目中使用它。 我可以按原樣使用嗎？ 像<p id="alert"> ，我需要以完全相似的方式來做嗎？ 請指教。

Answer 1

您可以使用contenteditable屬性或在html元素上設置designmode使其可編輯。 有關更多信息，請參考Mozilla開發人員網絡。

 $(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> 

范例程式碼

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

腳本文件

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

constructor(private rd: Renderer2) {}

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

Answer 2

選項1：直接添加腳本

您可以使用$("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();

選項2：轉換為指令

在那里，您可以將editable轉換為偽指令以對元素進行更多訪問

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", []);

指令

您也可以改進此指令以從開發人員那里獲得更多選擇

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