我可以在我的 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 (e.g. sent to server).
        It is currently set up to fire after 800ms delay of not typing anything.
    </p>

我想在我的 Angular 项目中使用它。我可以按原样使用它吗？像<p id="alert"> 一样，我是否需要以类似的方式执行此操作？

Answer 1

您可以在 html 元素上使用contenteditable 属性或设置designmode 以使其可编辑。更多信息可以参考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>

示例代码

<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：转换为指令

您可以在此处将可编辑转换为指令以对元素有更多访问权限

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

您还可以改进此指令以从开发人员那里获得更多选择

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