question: how to add horizontal line, blockquote and other tags ?

[badpenguin]

Is there a way to add tools for other common and simple HTML tags without messing with the cofee script source?

[anthonyjb]

To add other HTML tag types you'll need to extend the ContentEdit collection of elements. You don't need to use CoffeeScript as JavaScript (ES5 or ES6) can both be used with the project.

The blockquote tag you mentioned is already supported (see here https://github.com/GetmeUK/ContentEdit/blob/master/src/scripts/text.coffee#L536) so if you have a blockquote in your content it will already be editable - however by default there's no tool to insert blockquotes however creating a new tool to insert one is relatively easy as you can extend the heading tool, just like sub heading does: https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/tools.coffee#L483

[fxi]

Note for future self or maybe webpack user :

If you build your project with webpack, adding a new tool (like blockquote) is easy.

I did not find a way of rebuilding the icons file, but I'm already using fontawesome, so that's it.

I have no idea if this is a "good way" of doing it, but it works.

Build config

1. Install coffee-loader : npm install coffee-loader --save-dev
2. In the webpack file, set the loader to run when importing coffee files:

   {
   test: /\.coffee$/,
   use: 'coffee-loader'  
   }

   File

   Write this into extend_content_tools.coffee

class ContentTools.Tools.Blockquote extends ContentTools.Tools.Heading

    # Convert the current text block to a blockquote (e.g <blockquote>foo</blockquote>)

    ContentTools.ToolShelf.stow(@, 'blockquote')

    @label = 'Blockquote'
    @icon = 'blockquote'
    @tagName = 'blockquote'

Set css

.ct-tool--blockquote::before {
    font-family: fontawesome;
    content: '\f10e'; /* double quote icon */
}

Import ContentTools and extension (asynchronously)

var ContentTools;

import('ContentTools').then(function(ct) {

  ContentTools = ct;
  return import("./extend_content_tools.coffee");

}).then(function() {

  ContentTools.DEFAULT_TOOLS[0].push("blockquote");

  /**
   *  Your script
   */

})

Result