Menu icon Foundation
Help installing CKEditor5 Classic into Zurb Template 6.5

I currently have slick.js playing nicely in my project, but I am having problems installing CKEditor5 [https://ckeditor.com/ckeditor-5/download/].

I have referred to this previous post: https://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64 . Much of the post's solution has already been integrated into the Zurb Template itself such as the dependancies.js file. I have tried the solutions in the post, but all it does it break the slick.js (Slider).

CKEditor's advanced setup guide here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-1-integrating-existing-builds

 

dependancies.js

// custom dependencies
import AOS from 'aos';
import svgInjector from 'svg-injector-2';
import slick from 'slick-carousel';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const deps = {
  AOS: AOS,
  svgInjector: svgInjector,
  slickCarousel: slick,
  ClassicEditor: ClassicEditor
};

module.exports = deps;

app.js

import $ from 'jquery';
import whatInput from 'what-input';

import 'slick-carousel';
// import '@ckeditor/ckeditor5-build-classic';


window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

import 'tablesaw/dist/tablesaw.jquery';
import libs from './lib/dependancies';
window.libs = libs;

// $(document).foundation();

libs.AOS.init();

// SVG Injector
// Elements to inject
var mySVGsToInject = document.querySelectorAll('img.inject-me');

// Options
var injectorOptions = {
  evalScripts: 'once',
  pngFallback: 'assets/png'
};

var afterAllInjectionsFinishedCallback = function (totalSVGsInjected) {
  // Callback after all SVGs are injected
  console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');
};

var perInjectionCallback = function (svg) {
  // Callback after each SVG is injected
  console.log('SVG injected: ' + svg);
};

// create injector configured by options
var injector = new libs.svgInjector(injectorOptions);

// Trigger the injection
injector.inject(
  mySVGsToInject,
  afterAllInjectionsFinishedCallback,
  perInjectionCallback
);

// slick carousel
$(".content-carousel").slick({
  // normal options...
  speed: 5000,
	autoplay: true,
	autoplaySpeed: 0,
	cssEase: 'linear',
  slidesToShow: 5,
	slidesToScroll: 1,
  infinite: true,
  swipeToSlide: true,
	centerMode: true,
  focusOnSelect: true,
  // the magic
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    }, {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }]
});

// ckeditor
libs.ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .catch( error => {
      console.error( error );
} );

// tablesaw table plugin
$(function () {
  $(document)
    .foundation()
    .trigger('enhance.tablesaw');
});

var TablesawConfig = {
  swipeHorizontalThreshold: 15
};

// app dashboard toggle
$('[data-app-dashboard-toggle-shrink]').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.app-dashboard').toggleClass('shrink-medium').toggleClass('shrink-large');
});

There is no scss in this setup, so I did not need to modify the yml file.

 

Browser inspector error:

 

Any help would be much appreciated!

ZURB Templatees6npm

I currently have slick.js playing nicely in my project, but I am having problems installing CKEditor5 [https://ckeditor.com/ckeditor-5/download/].

I have referred to this previous post: https://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64 . Much of the post's solution has already been integrated into the Zurb Template itself such as the dependancies.js file. I have tried the solutions in the post, but all it does it break the slick.js (Slider).

CKEditor's advanced setup guide here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-1-integrating-existing-builds

 

dependancies.js

// custom dependencies
import AOS from 'aos';
import svgInjector from 'svg-injector-2';
import slick from 'slick-carousel';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const deps = {
  AOS: AOS,
  svgInjector: svgInjector,
  slickCarousel: slick,
  ClassicEditor: ClassicEditor
};

module.exports = deps;

app.js

import $ from 'jquery';
import whatInput from 'what-input';

import 'slick-carousel';
// import '@ckeditor/ckeditor5-build-classic';


window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

import 'tablesaw/dist/tablesaw.jquery';
import libs from './lib/dependancies';
window.libs = libs;

// $(document).foundation();

libs.AOS.init();

// SVG Injector
// Elements to inject
var mySVGsToInject = document.querySelectorAll('img.inject-me');

// Options
var injectorOptions = {
  evalScripts: 'once',
  pngFallback: 'assets/png'
};

var afterAllInjectionsFinishedCallback = function (totalSVGsInjected) {
  // Callback after all SVGs are injected
  console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');
};

var perInjectionCallback = function (svg) {
  // Callback after each SVG is injected
  console.log('SVG injected: ' + svg);
};

// create injector configured by options
var injector = new libs.svgInjector(injectorOptions);

// Trigger the injection
injector.inject(
  mySVGsToInject,
  afterAllInjectionsFinishedCallback,
  perInjectionCallback
);

// slick carousel
$(".content-carousel").slick({
  // normal options...
  speed: 5000,
	autoplay: true,
	autoplaySpeed: 0,
	cssEase: 'linear',
  slidesToShow: 5,
	slidesToScroll: 1,
  infinite: true,
  swipeToSlide: true,
	centerMode: true,
  focusOnSelect: true,
  // the magic
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    }, {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }]
});

// ckeditor
libs.ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .catch( error => {
      console.error( error );
} );

// tablesaw table plugin
$(function () {
  $(document)
    .foundation()
    .trigger('enhance.tablesaw');
});

var TablesawConfig = {
  swipeHorizontalThreshold: 15
};

// app dashboard toggle
$('[data-app-dashboard-toggle-shrink]').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.app-dashboard').toggleClass('shrink-medium').toggleClass('shrink-large');
});

There is no scss in this setup, so I did not need to modify the yml file.

 

Browser inspector error:

 

Any help would be much appreciated!