Question

我尝试向ContentTools添加一个新的工具/功能，但我不想学习Coffeescript，因为它在网站上说它应该可以用普通的jquery运行。我找不到任何进一步的文档如何在我的工具栏中添加一个简单的工具我希望你可以帮助我，或者是否有其他开源WYSIYG编辑器具有像ContentTools这样美观的内联编辑风格，它有更好的文档？

Answer 1

据我所知，GetmeUK/ContentTools项目是一个使用coffeescript和sass技术编写的开源项目。

什么是Coffeescript：

CoffeeScript是一种小语言，可以编译为JavaScript。在尴尬的Java风格的古铜色之下，JavaScript始终有着一颗华丽的心。 CoffeeScript试图以一种简单的方式公开JavaScript的优秀部分。

什么是无礼：

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

据我所知，可以修改coffeescript编译器生成的最终JS文件，但是更简单的方法是学习如何编译coffeescript，然后可以修改和重建任何其他开源软件，库等。 ..。

如何下载和构建GetmeUK / ContentTools项目？

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

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

要重建此项目，您需要在操作系统中安装NPM和GEM。请遵循链接https://nodejs.org/en/download/（适用于NPM）和https://rubygems.org/pages/download（适用于GEM）中所述的说明。

cd ContentTools; npm install; gem install sass;

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

通过这种方式，还有另一种更困难的方式来坐下来阅读该项目的已编译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网站提供的教程进行操作，并将Coffescript中编写的代码替换为JS中的等效代码。为此目标，我为您提供了一些样品：

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

我也与您共享此项目的行文件的链接： Tools CoffeeScript File和Exported JS File

毕竟，我认为在不了解Coffescript语法或概念的情况下无法完成此工作，我建议您学习它，这将帮助您拥有更高性能和更清晰的代码。

ContentTools - 如何使用纯js / jquery添加新工具？

1 个答案:

什么是Coffeescript：

什么是无礼：

如何下载和构建GetmeUK / ContentTools项目？

咖啡代码：

已编译的JS代码：