Question

这是图书馆：

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

这用于在html页面上进行内联编辑。我在HTML页面上的代码如下所示 -

＆＃13;

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

＆＃13;

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

＆＃13;

我想在我的角度项目中使用它。我可以使用它吗？像<p id="alert">一样，我需要以完全相同的方式做什么？请指教。

Answer 1

您可以使用contenteditable属性或在html元素上设置designmode以使其可编辑。有关详细信息，请参阅Mozilla Developer Network

＆＃13;

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

＆＃13;

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

＆＃13;

示例代码

<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：直接添加脚本

您可以使用<h2 id="basic"> Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing. </h2>   <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>  <script src="app.js"></script> <script src="your-editable.js"></script>
直接在页面中添加该抄写员

<强>的index.html

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

<强> app.js

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

您-editable.js

<h2 content="basic"> Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing. </h2>   <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>  <script src="app.js"></script> <script src="directive.js"></script>

选项2：转换为指令

在那里，您可以将editable转换为指令，以便对元素具有更多访问权限

<强>的index.html

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

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

<强> directive.js

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

.info({ angularVersion: '1.6.4' }).

我可以在角度2项目中使用javascript内联编辑库吗？

2 个答案: