Question

我正在尝试使用此JavaScript插件https://www.npmjs.com/package/maxlength-contenteditable#commonjs 问题是我不知道如何初始化它。

我的插件路径

cookies

在我的html上使用插件

<script type="text/javascript" src="../node_modules/maxlength-contenteditable/dist/maxlength-contenteditable.js"></script>

在文档中说使用以下三种方式之一进行初始化：

<div class="myDiv" contenteditable="true" data-max-length="10"></div>

有人可以解释我将如何使用初始化以及在哪里使用吗？

Answer 1

局部更新：

如果要在本地执行此操作，请执行以下操作：安装它：

$ npm install maxlength-contenteditable --save

然后将此代码粘贴到文件中以进行测试：

<style>
  h2 {
    color: lightslategray;
  }
  span {
      color: red;
  }

  .content-editable-element {
    border: 1px solid lightslategray;
    width: 300px;
  }
</style>

<body>
  <h2>maxlength contenteditable demo</h2>
  <span>the max length is set to 10!!!!</span>
  <div class="content-editable-element" contenteditable="true" data-max-length="10"></div>
  <script src="node_modules/maxlength-contenteditable/dist/maxlength-contenteditable.js"></script>
  <script>maxlengthContentEditableModule.maxlengthContentEditable();</script>
</body>

代替此：

<script type="text/javascript" src="../node_modules/maxlength-contenteditable/dist/maxlength-contenteditable.js"></script>

为什么不简单地做：

<script src="https://unpkg.com/maxlength-contenteditable@1.0.1/dist/maxlength-contenteditable.js"></script>

您的问题可能出在您的路上。尝试改用CDN版本。

如果使用CDN版本，则在JS中执行以下操作：

<script>
    maxlengthContentEditableModule.maxlengthContentEditable(); // to initialize
</script>

在这里工作：

maxlengthContentEditableModule.maxlengthContentEditable();

  .content-editable-element {
    border: 1px solid lightslategray;
    width: 300px;
  }

<script src="https://unpkg.com/maxlength-contenteditable@1.0.1/dist/maxlength-contenteditable.js"></script>

<div class="content-editable-element" contenteditable="true" data-max-length="10"></div>

如何初始化javascript插件？

1 个答案: