javascript - 我可以在 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

您可以使用 contenteditable 属性或在 html 元素上设置 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;      
}