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

Question

我尝试向 ContentTools 添加新的 tool/function，但我不想学习 Coffeescript，正如网站上所述，它应该运行与普通 jquery 一样.
而且我找不到任何关于如何将简单工具添加到我的工具栏的进一步文档。
我希望你能帮助我，或者是否有任何其他开源 WYSIYG 编辑器具有这种漂亮的内联编辑风格，如 ContentTools，它有更好的文档？

Answer 1

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

什么是 Coffeescript :

CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

什么是sass：

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. just like coffeescripts sass finally is converted to css.

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

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

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

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

要重建此项目，您需要在操作系统中安装 NPM 和 GEM。按照 link https://nodejs.org/en/download/ for NPM and https://rubygems.org/pages/download 中针对 GEM.

中提到的说明进行操作

cd ContentTools; npm install; gem install sass;

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

顺便说一句，还有一种更难的方法是坐下来阅读这个项目编译后的 JS 代码数周，最后如果你有机会你可以理解生成的代码，然后在经过艰苦的工作后你可以修改它:)我希望以下代码对您有所帮助：

Coffeescript 代码：

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 ...) 语法。

还有 links 到我与您分享的这个项目的行文件： Tools CoffeeScript File and Exported JS File

毕竟我认为没有Coffescript语法或概念的知识是无法完成这项工作的，我建议你学习它，它会帮助你拥有更高性能和更清晰的代码。

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

ContentTools - How to add new tool with pure js / jquery?

javascript

jquery

wysiwyg

coffeescript

什么是 Coffeescript :

什么是sass：

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

Coffeescript 代码：

编译后的JS代码：