Question

我最近遇到ContentTools.js，我认为这可能是我工作的网站的一个很好的补充。通过入门/教程让我无处可去 - 脚本不起作用，但我看着它。

从作者页面复制完全相同的脚本或从主bin运行它，但实现到实际网站失败。

对我来说唯一有用的东西（在空的html页面上）是脚本加载了可编辑的字段，删除它的内容要么保存要么取消编辑（如果这对你有意义的话）。

＆＃13;

$(document).ready(function() {

      window.onload = function() {
        var editor;
        editor = ContentTools.EditorApp.get();
        editor.init('.editable', 'data-name');
        editor.bind('save', function(regions) {
          var xhr, payload, name;
          this.busy(true);
          payload = new FormData();
          for (name in regions) {
            if (regions.hasOwnProperty(name)) {
              payload.append(name, regions[name]);
            }
          }

          function onStateChange(ev) {
            if (ev.target.readyState == 4) {
              editor.busy(false);
              if (ev.target.status == '200') {
                new ContentTools.FlashUI('ok');
              } else {
                new ContentTools.FlashUI('no');
              }
            }
          }

          xhr = new XMLHttpRequest();
          xhr.addEventListener('readystatechange', onStateChange);
          xhr.open('POST', '/save-my-page');
          xhr.send(payload);
        });
      }).call(this);

＆＃13;

<link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
<script src="http://getcontenttools.com/scripts/content-tools.js"></script>
<!DOCTYPE html>
<html>

<body>
  <p class="editable" data-name="c1">asd</p>
  <p class="editable" data-name="c2">123</p>
  <p class="editable" data-name="c3">asd123</p>

  <div class="ct-app">
    <div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
      <div class="ct-ignition__button ct-ignition__button--edit"></div>
      <div class="ct-ignition__button ct-ignition__button--confirm"></div>
      <div class="ct-ignition__button ct-ignition__button--cancel"></div>
      <div class="ct-ignition__button ct-ignition__button--busy"></div>
    </div>
  </div>
</body>

</html>

＆＃13;

＆＃13; Ofc所有库都已加载，并且没有js错误。它只是不起作用。

Answer 1

首先，你的代码中有错误，一些括号没有对齐，你的p元素和init编辑器周围应该有一个div元素，在这种情况下，每个p都会有一个init编辑器，这里是小提琴http://jsfiddle.net/zx4sw47L/

P.S。由于跨域问题，加载字体存在问题，但示例正在运行。

Answer 2

我也开始使用getContentTools。根据我的理解，你的HTML标记中有一些错误，并且你错过了另一个js文件来初始化getContentTools

<!DOCTYPE html>
<html>
     <head>
          <link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
          <script src="http://getcontenttools.com/scripts/content-tools.js"></script>
          <script src="/path/to/editor.js"></script>
     </head>
     <body>
        <div data-editable data-name="c1">
            <p class="editable">asd</p>
        </div>
        <div data-editable data-name="c2">
            <p class="editable">123</p>
        </div>
        <div data-editable data-name="c3">
            <p class="editable">asd123</p>
        </div>
        <!-- this should be deleted as it is generated by getContentTools -->
        <!--
        <div class="ct-app">
            <div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
            <div class="ct-ignition__button ct-ignition__button--edit"></div>
            <div class="ct-ignition__button ct-ignition__button--confirm"></div>
            <div class="ct-ignition__button ct-ignition__button--cancel"></div>
            <div class="ct-ignition__button ct-ignition__button--busy"></div>
        </div>
        -->
    </body>
</html>

editor.js文件应如下所示

window.addEventListener('load', function() {
    var editor;

});

希望这有帮助

ContentTools.js让我无处可去

2 个答案: