ContentTools-如何使用纯JS / jQuery添加新工具

Question

我尝试在ContentTools添加一个新的工具/功能，但我不想学习CoffeeScript，并且正如它在网站上所述的，它应该使用Pline Jquery运行。
而且我找不到任何进一步的文档如何在工具栏中添加简单工具。
我希望您能为我提供帮助，或者还有其他OpenSource Wysiyg编辑器具有这种美丽的内联编辑风格，例如ContentTools，它具有更好的文档？

Answer 1

据我所知，getmeuk/contentTools项目是一个用coffeescript和sass Technologies编写的开源项目。

什么是咖啡网：

CoffeeScript是一种编译为JavaScript的小语言。在那个尴尬的爪哇风格的古铜色下，JavaScript一直拥有一颗美丽的心。Coffeescript是一种试图以简单的方式揭示JavaScript的好部分。

什么是sass：

sass是世界上最成熟，稳定和强大的专业级CSS扩展语言。就像Coffeescripts Sass终于转换为CSS一样。

我知道，可以修改Coffeescript编译器生成的最终JS文件，但是更容易的方法是学习如何编译Coffeescript，然后您可以修改并重建任何其他任何其他开源软件，Libs等。..。

如何下载和构建getmeuk/contentTools项目？

首先，您必须使用git克隆该项目：

git clone https://github.com/GetmeUK/ContentTools.git

要重建此项目，您需要在操作系统中安装NPM和GEM。遵循链接中提到的说明https://nodejs.org/en/download/for NPM和https://rubygems.org/pages/pages/download forGem。

cd ContentTools; npm install; gem install sass;

通过运行grunt build，您可以构建项目并为此项目保存纯JS导出。通过这种方式，您可以使用纯JS，该JS是通过编译CoffeeScript文件生成的。这是对您的建议。

顺便说一句，还有另一种困难的方法可以坐下并阅读该项目的JS代码数周，最后，如果您有机会了解生成的代码，然后经过努力工作，您可以修改它:)我希望:)我希望我以下代码为您提供帮助：

咖啡本代码：

class ContentTools.Tools.Paragraph extends ContentTools.Tools.Heading
# Convert the current text block to a paragraph (e.g <p>foo</p>)
ContentTools.ToolShelf.stow(@, 'paragraph')
@label = 'Paragraph'
@icon = 'paragraph'
@tagName = 'p'
@canApply: (element, selection) ->
    # Return true if the tool can be applied to the current
    # element/selection.
    if element.isFixed()
        return false
    return element != undefined
@apply: (element, selection, callback) ->
    # Apply the tool to the current element
    forceAdd = @editor().ctrlDown()
    if ContentTools.Tools.Heading.canApply(element) and not forceAdd
        # If the element is a top level text element and the user hasn't
        # indicated they want to force add a new paragraph convert it to a
        # paragraph in-place.
        return super(element, selection, callback)
    else
        # Dispatch `apply` event
        toolDetail = {
            'tool': this,
            'element': element,
            'selection': selection
            }
        if not @dispatchEditorEvent('tool-apply', toolDetail)
            return
        # If the element isn't a text element find the nearest top level
        # node and insert a new paragraph element after it.
        if element.parent().type() != 'Region'
            element = element.closest (node) ->
                return node.parent().type() is 'Region'
        region = element.parent()
        paragraph = new ContentEdit.Text('p')
        region.attach(paragraph, region.children.indexOf(element) + 1)
        # Give the newely inserted paragraph focus
        paragraph.focus()
        callback(true)
        # Dispatch `applied` event
        @dispatchEditorEvent('tool-applied', toolDetail)

编译的JS代码：

ContentTools.Tools.Paragraph = (function(_super) {
__extends(Paragraph, _super);
function Paragraph() {
  return Paragraph.__super__.constructor.apply(this, arguments);
}
ContentTools.ToolShelf.stow(Paragraph, 'paragraph');
Paragraph.label = 'Paragraph';
Paragraph.icon = 'paragraph';
Paragraph.tagName = 'p';
Paragraph.canApply = function(element, selection) {
  if (element.isFixed()) {
    return false;
  }
  return element !== void 0;
};
Paragraph.apply = function(element, selection, callback) {
  var forceAdd, paragraph, region, toolDetail;
  forceAdd = this.editor().ctrlDown();
  if (ContentTools.Tools.Heading.canApply(element) && !forceAdd) {
    return Paragraph.__super__.constructor.apply.call(this, element, selection, callback);
  } else {
    toolDetail = {
      'tool': this,
      'element': element,
      'selection': selection
    };
    if (!this.dispatchEditorEvent('tool-apply', toolDetail)) {
      return;
    }
    if (element.parent().type() !== 'Region') {
      element = element.closest(function(node) {
        return node.parent().type() === 'Region';
      });
    }
    region = element.parent();
    paragraph = new ContentEdit.Text('p');
    region.attach(paragraph, region.children.indexOf(element) + 1);
    paragraph.focus();
    callback(true);
    return this.dispatchEditorEvent('tool-applied', toolDetail);
  }
};
return Paragraph;
})(ContentTools.Tools.Heading);

您可以逐步访问GetContentTools网站提供的教程，并替换用CoffScript编写的代码，并在JS中等效。对于这个目标，我为您提供了一些样本：

在您看到@propertyName的每个地方都可以用PackageName.ClassName.propertyName替换它，也可以调用super(parameters ...)方法，您必须使用Paragraph.__super__.constructor.apply.call(this, parameters ...)语法。

此外，还有我与您分享的该项目的行文件的链接：工具库存文件和导出的JS文件

毕竟，我认为没有办法不了解咖啡本语法或概念，我建议您学习它，它将帮助您拥有更多的性能和清晰度的代码。

<</p>