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

Question

我尝试向 ContentTools 添加一个新工具/功能，但我不想学习 Coffeescript，正如网站上所说，它应该可以使用纯 jquery 正常运行。
而且我找不到任何进一步的文档如何向我的工具栏添加一个简单的工具。
我希望你能帮助我，或者是否有任何其他具有这种漂亮内联编辑风格的开源 WYSIYG 编辑器，比如 ContentTools，它有更好的文档？

Answer 1

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

什么是 Coffeescript ：

CoffeeScript 是一种编译成 JavaScript 的小语言。在那种尴尬的 Java 式古铜色之下，JavaScript 总是有一颗美丽的心。 CoffeeScript 试图以一种简单的方式暴露 JavaScript 的优点。

什么是sass：

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 语法或概念是无法完成这项工作的，我建议你学习它，它会帮助你拥有更高性能和更清晰的代码。