How used rich text Simditor

Need Help
#1

I’ve interest to rich text editor Simditor used for posts the longest article,
and install it used

$npm install simditor
$bower install simditor

then embed library css Simditor inside tag <head>...</head>

echo $this->Html->css('/styles/simditor.css');

then embed library js Simditor inside tag <body>...</body>

echo $this->Html->script('/scripts/jquery.min.js');
echo $this->Html->script('/scripts/module.js');
echo $this->Html->script('/scripts/hotkeys.js');
echo $this->Html->script('/scripts/uploader.js');
echo $this->Html->script('/scripts/simditor.js');

<script type="text/javascript">
 jQuery(document).ready(function($) {
  var editor = new Simditor({
	textarea: $('#Artikel')
    placeholder: ''
	params: {}
	upload: false
	tabIndent: true
	toolbar: true
	toolbarFloat: true
	toolbarFloatOffset: 0
	toolbarHidden: false
	pasteImage: false
	cleanPaste: false
   });
 });
</script>

then place in <textarea>...</textarea> below

echo $this->Form->control('Artikel', array('type' => 'textarea', 'id' => 'Artikel'));

the problem is, Simditor doesn’t work and doesn’t show error message.
I hope somone give me the clue to fix this, thanks for your help

#2

Are you looking in your browser’s developer console for errors, or just on the page? Does your control appear but with standard formatting, or does it not appear at all?

#3

good night mr.Zuluru, I have seen the error in console browser, but I don’t know the right answer to fix it

//i'm come from Indonesia, so I will translate to English

loading failed script with source “http://localhost/alseanasa/scripts/module.js”. add: 178: 1
....
...

Gagal memuat <script> dengan sumber “http://localhost/alseanasa/scripts/module.js”. add:178:1
Gagal memuat <script> dengan sumber “http://localhost/alseanasa/scripts/hotkeys.js”. add:178:1
Gagal memuat <script> dengan sumber “http://localhost/alseanasa/scripts/simditor.js”.

and other error shown below

SyntaxError: missing } after property list add:209:1 note: { opened at line 207, column 28

I have question, I was download package Simditor used node js, and I have read the docs.
The docs guide me to include library above.

The folder nodejs package Simditor script js below

C:\xampp\htdocs\alseanasa\Grafik3D\bower_components\simditor\site\assets\scripts

and nodejs package Simditor style css below

C:\xampp\htdocs\alseanasa\Grafik3D\bower_components\simditor\site\assets\styles

the problem is, how to linking their library and call inside CakePHP 3.x,
usually linking js and css below

$this->Html->css('style.css');
$this->Html->script('bootstrap.js');

thanks mr.Zuluru, I need your guide, so I am tired while fixing it

#4

It seems that http://localhost/alseanasa/scripts/module.js is not a valid URL, because that would reference the folder C:\xampp\htdocs\alseanasa\scripts, while you’ve actually put them under C:\xampp\htdocs\alseanasa\Grafik3D\bower_components\simditor\site\assets\scripts. Either move the files so they are in the folder the URL expects, or change the URL you’re using to load them to include the longer path.

#5

good afternoon mr.Zuluru, I have copied library Simditor above from the

C:\xampp\htdocs\alseanasa\Grafik3D\bower_components\simditor\site\assets\styles
C:\xampp\htdocs\alseanasa\Grafik3D\bower_components\simditor\site\assets\scripts

and put them into library Cake, I use plugin nasa that own create self. Below this copied of them

C:\xampp\htdocs\alseanasa\plugins\Nasa\webroot\js
C:\xampp\htdocs\alseanasa\plugins\Nasa\webroot\css

next I call them use linking files, below this

echo $this->Html->css('Nasa.simditor.css');
echo $this->Html->script('Nasa.module.js');
echo $this->Html->script('Nasa.hotkeys.js');
echo $this->Html->script('Nasa.uploader.js');
echo $this->Html->script('Nasa.simditor.js');

then call the function of Simditor used jQuery event

echo $this->Form->control('Artikel', array('type' => 'textarea', 'id' => 'Artikel', 'label' => false));

<script type="text/javascript">
 jQuery(document).ready(function($) {
  var editor = new Simditor({
    textarea: $('#Artikel')
	placeholder: 'Tulis artikel anda'
	params: {}
	tabIndent: true
	toolbar: true
	toolbarFloat: true
	toolbarFloatOffset: 0
	toolbarHidden: false
	pasteImage: false
	cleanPaste: false
  });
 });
</script>

afther I had complet that, inside browser console, there’s shown error below

SyntaxError: missing } after property list add:196:1 note: { opened at line 194, column 28add:194:28

where’s the error line code and some failed code write,
I hope your guide mr.Zuluru, thanx and happy launch

#6

I think that those line numbers refer to the HTML that your browser is seeing. “View source” on the page in question and hopefully it will be obvious what the error is.