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

这是图书馆：

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

$basic.editable； $PARATION.editable{ 多行：对， 自动选择：真 }; $alert.editable{ 多行：对， 保存延迟：800， 保存：function，ui{ AlertSave实际内容：+ui.content； } }; $scalable.editable{ 多行：正确 }; $nonempty.ediate{ 多行：对， 保存延迟：600， 自动选择：正确， 保存：function，ui{ AlertSave实际内容：+ui.content； }, 验证：函数，用户界面{ 返回ui.content！==； } }; $complex.ediate{ 内容：a，//只有链接是可编辑的 自动选择：正确， 保存：function，ui{ alertNew链接：+ui.content； }, 验证：函数，用户界面{ 返回ui.content！== } };

此示例在每次保存更改的内容（例如发送到服务器）时发出警报。 它目前设置为在不输入任何内容的800毫秒延迟后启动。

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

$document.readyfunction{ $alert.keyup函数{ console.info$this.html；//打印编辑的文本 console.infoInner Html-->+$container.Html；//打印已编辑文本的Html }; };

编辑我

选项1：直接添加脚本

您可以使用$selector直接在页面中添加该纸条

index.html

your-editable.js

选项2：转换为指令

在那里，您可以将“可编辑到”指令转换为对图元具有更多访问权限

index.html

指令.js

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

---

为什么要使用库进行内联编辑。为什么不使用默认浏览器功能呢？我正在创建一个html编辑器，有什么其他方法代替内联编辑呢？上面的解决方案是针对anguar2的？由于我是angular的新手，我发现如果我创建一个组件，那么它相应的.ts文件也会生成，这个app.js基本对我来说不清楚，例如，我使用cli ng g c exportexample创建了一个组件，它创建了export-example.component.html和export-example.component.ts。我也不清楚angular.moduleapp，[]，请指导我学习这些基础知识的正确途径，以及你在哪里提出了与angular 2相关的问题？您使用的是哪个版本！很抱歉，我没有提到，我在Angular2上，当您创建新组件angular cli时，它将创建.html、.ts、.spec.ts，并且您的新组件将作为导入语句包含在app.module.ts文件中。如果您不打算编写test.in edit.component.ts，则可以避免使用spec.ts。在edit.component.ts中，我可以编辑我，但在angular2中，添加了如何获取示例代码中的html内容。如果这不能解决您的问题，请使用Plunker或JSFIDLE共享您的工作代码@user2828442@ViewChild“容器”el:ElementRef；上面写着未使用的标签

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

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

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

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

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