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

Posted 2021-04-16

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

答案

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

What is Coffeescript :

CoffeeScript是一种编译成javascript的小语言。在那个尴尬的Java风格的铜绿之下，JavaScript总是有一颗华丽的心。 CoffeeScript试图以一种简单的方式公开JavaScript的优点。

What is sass :

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

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

How to download and build GetmeUK/ContentTools project ?

首先，你必须使用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代码数周，最后如果你有机会你可以理解生成的代码然后在辛苦工作会话后你可以修改它:)我希望以下代码帮助你：

Coffeescript code:

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)

The compiled JS code:

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