QUESTION Modify or Replace CKEditor

[Samson]

Dear GS Users and Developers:

I do like GetSimple CMS very much - in fact GetSimple is gradually going to become my favorite CMS.

But there is a rub - the same as in most CMSs: The WYSIWYG editor (in most cases CKEditor) is usually coded to provide absolute font and image sizes (as well as line-heights, margins and so on).

So the first thing I do when I start using a new CMS with built-in CKEditor is to hack CKEditor to use "em" instead of "px" to make it easier to produce responsive content.

But this is messy and not the easiest way to go, as there are usually only certain versions of CKEditor which can be used with certain extensions (most important one: lineheight)  and a certain version of the CMS at hand. And this certain version of CKEditor is almost always a version which can't be simply downloaded from the official website. Yes, usually I find a working combination of versions but this is time consuming.

That's why I would like to ask you:

1) Is there built-in API for CKEditor in GetSimple CMS which allows me to easily modify the behavior of CKEditor, for example to show and output em instead of px?

2) What do I have to do to substitute CKEditor with a WYSIWYG editor that is easier to modify like Quill?

3) Do you know of a free offline WYSIWYG HTML editor running on Windows which is programmable in the sense that I can alter the way it outputs HTML?

4) Do you know of a free XML editor running on Windows?

If I succeed in replacing CKEditor -  or modifying it in a non-messy way - I would gladly show you my solution so maybe other users of GetSimple CMS might profit as well.

Best regards
Samson

[shawn_a]

This is covered somewhere in forums and github, I even made an experimental plugin , it is much easier in 3.4 but can possibly be done in 3.3.x also. You might have to search for it, I have no idea where its at.

[shawn_a]

Also you should not have to hack cke, you can inject config settings in gsconfig and add plugins and stuff in config.js

[Samson]

Dear shawn_a:

thank you very much for your two answers (2019-10-02, 00:25:38 and 2019-10-02, 00:26:38).

I will search for your experimental plugin and try out how it works and which tweaks are possible with it.

As for using gsconfig:
Yes, I have used that too, but only with a combination of additional entries in config.js, style.js, content.css , gsconfig.php, and hacking ckeditor.js I could implement all the features which allowed my customers to get responsive texts and images and the ability to control the line-height.
I did that with GS 3.3.12 and it is still working.
I also did that in a version of Drupal 7 and it also works, but getting all this set up is very time consuming and error prone.

I always wonder why there is no offline WYSIWYG editor which allows me to programmatically change its output to relative units and classes instead of absolute sizes. Then there would be no reason to go through all these steps.

If I find one - unfortunately, this seems unlikely, as I have been searching quite a while - I will let you know.

So, again, thank you very much for your answer and your the superb CMS.

Oh, yes there's a related question:

You wrote: "it is much easier in 3.4".
And, on the 3.4.0.9 download page, you wrote:
"Warning
Not all plugins are compatible with this, anything that includes codemirror or ckeditor may have issues or conflicts with the versions included in core now"

So I'm a little confused or have I misunderstood something?

Best regards
Samson

[Felix]

4) Do you know of a free XML editor running on Windows?

Notepad++

Not only for xml but for the whole shebang

[Samson]

4) Do you know of a free XML editor running on Windows?

Notepad++

Not only for xml but for the whole shebang

Dear Felix:

Thank you very much for recommending Notepad++.

Strangely, I've never used it to edit XML files.

Best regards
Samson

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding github:

I can't post my list of commits I checked on github, as the server throws an error.
But the gist is, that I didn't find anything relevant

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Web Server at get-simple.info

Best regards
Samson

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding github:

I can't post my list of commits I checked on github, as the server throws an error.
But the gist is, that I didn't find anything relevant

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Web Server at get-simple.info

Best regards
Samson

This post works, maybe the list is too long ...

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding github:

I can't post my list of commits I checked on github, as the server throws an error.
But the gist is, that I didn't find anything relevant

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Web Server at get-simple.info

Best regards
Samson

This post works, maybe the list is too long ...

It seems your server doesn't like the github links:

github.com/GetSimpleCMS/GetSimpleCMS/commit/7e1a4a22ae3f97a7bd234fc8d73c94c69d5afb12

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding github:

I can't post my list of commits I checked on github, as the server throws an error.
But the gist is, that I didn't find anything relevant

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Web Server at get-simple.info

Best regards
Samson

This post works, maybe the list is too long ...

It seems your server doesn't like the github links:

github.com/GetSimpleCMS/GetSimpleCMS/commit/7e1a4a22ae3f97a7bd234fc8d73c94c69d5afb12

No, one link works.

Commits on Mar 24, 2018

remove uneeded cke assets
github.com/GetSimpleCMS/GetSimpleCMS/commit/7e1a4a22ae3f97a7bd234fc8d73c94c69d5afb12


cke 4.9
github.com/GetSimpleCMS/GetSimpleCMS/commit/38712c5a07c154d4f58fe7b5dcc6abd69e94520c

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding github:

I can't post my list of commits I checked on github, as the server throws an error.
But the gist is, that I didn't find anything relevant

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Web Server at get-simple.info

Best regards
Samson

This post works, maybe the list is too long ...

It seems your server doesn't like the github links:

github.com/GetSimpleCMS/GetSimpleCMS/commit/7e1a4a22ae3f97a7bd234fc8d73c94c69d5afb12

No, one link works.

Commits on Mar 24, 2018

remove uneeded cke assets
github.com/GetSimpleCMS/GetSimpleCMS/commit/7e1a4a22ae3f97a7bd234fc8d73c94c69d5afb12


cke 4.9
github.com/GetSimpleCMS/GetSimpleCMS/commit/38712c5a07c154d4f58fe7b5dcc6abd69e94520c

OK, two links work, but this seems to be the limit.

[Samson]

Dear shawn_a:

As to your answer on 2019-10-02, 00:25:38 regarding this forum:

I searched this GetSimple Community Forum and also found no plugin to modify the HTML output of CKEditor. The only issue which came up was changing absolute paths into relative ones.

Have I missed something?


Best regards
Samson

[datiswous]

I searched this GetSimple Community Forum and also found no plugin to modify the HTML output of CKEditor. The only issue which came up was changing absolute paths into relative ones.

Have I missed something?

Maybe some of this info you already know:

CKeditor has it's own plugins. I think you need to know what version of CKeditor is used in GS and then use a plugin compattible with that. I think it's using CKeditor 4, so then you have to download the plugin here: https://ckeditor.com/cke4/addons/plugins/all

There are also GSconfig settings. You can find some info in the docs section of this site.

[Samson]

I searched this GetSimple Community Forum and also found no plugin to modify the HTML output of CKEditor. The only issue which came up was changing absolute paths into relative ones.

Have I missed something?

Maybe some of this info you already know:

CKeditor has it's own plugins. I think you need to know what version of CKeditor is used in GS and then use a plugin compattible with that. I think it's using CKeditor 4, so then you have to download the plugin here: https://ckeditor.com/cke4/addons/plugins/all

There are also GSconfig settings. You can find some info in the docs section of this site.

Dear datiswous:

Thank you very much for your answer on 2019-10-03, 19:09:41.

Yes, I know about the plugins which an be downloaded for CKEditor.

But it seemed easier to assemble a custom-built version of CKEditor on their website and use this with GetSimple CMS.

Right now I try to set up local versions of different WYSIWYG HTML editors and then I try to modify their HTML outputs. If this succeeds, I simply deactivate CKEditor in GetSimple CMS. Not the optimal solution, but a pragmatical one.

Best regards
Samson

[shawn_a]

http://get-simple.info/forums/showthread.php?tid=7031

[shawn_a]

The above for 3.3.x is a kludge

How the editors were modularized
https://github.com/GetSimpleCMS/GetSimpleCMS/issues/546
https://github.com/GetSimpleCMS/GetSimpleCMS/issues/882
I do not have any instructions on replacing it in 3.4, but I am pretty sure I have code or test plugin somewhere... It might even be in a component somewhere....

I will try to take a look and remember and make an example with your preferred editor, front end editors that manipulate a text area are easy, adding support to backend becomes harder.

But theoretically the editor should be able to be swapped via a plugin now.

[Samson]

Dear shawn_a:

thank you very much for your two answers (2019-10-05, 04:47:51 and 2019-10-05, 05:03:14).

You are a very helpful.

At the moment of writing these lines, I achieved more success in modifying Suneditor than in modifying Quill, so it would be great if in the version 3.4 of GetSimple WYSIWYG editors can be swapped. This reminds me of Drupal in its heydays. Coincidentally, the friendly answers I receive in this forum also remind me of said time.

So thank you again for your help. The moment I have modified one the WYSIWYG HTML editors I'm currently investigating, I will post the results here.

The other option I'm pursuing is to find a free WYSIWYG HTML editor running on Windows which sports a programmable HTML output, but I'm afraid there is none. The funny thing about it is that I have the notion that such an editor most customers of CMSs would embrace with joy. but then there seems to be none. So is there another way besides writing HTML? Have I missed something important?

Best regards
Samson

[shawn_a]

I have seen a few most of them use webdav

[Felix]

 so it would be great if in the version 3.4 of GetSimple WYSIWYG editors can be swapped.

Keep in mind that with this you could lose the wysiwyg custom field (mvlcek plugin)
imho a must have

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:

First of all I want to wish you an optimal going year 2020.

I have searched the web for a wysiwyg editor that is flexible and allows me to choose relative units, line heights, offers an easy way to upload images, self defined styles, doesn't take a zillion additional libraries or frameworks to install and runs locally without the need of a CDN. 

I found one that fits the bill: SunEditor, see
http://suneditor.com/sample/index.html
https://github.com/JiHong88/SunEditor
It can be used locally or with a CDN.

The main developer of this project was very kind and added missing features. The only feature which doesn't work right now is a different dialog language for the buttons, but I think this issue will be resolved in the near future.

So with version 2.23.4 of SunEditor there is a viable - and in my eyes - better alternative to CKEditor.

But I'm stumped how to go about integrating SunEditor with GetSimple CMS.

Here is the local file and folder structure and how I integrated it into a html page:

________________________

Code:

SunEditor-master
|
|
|-- dist (folder)
|    |
|    |
|    |----------------------- css (folder)
|    |                         |
|    |-- fonts (folder)        |
|    |                         |-- suneditor.min.css
|    |-- suneditor.min.js
|
|
|-- src (folder)
|
|
|-- assets (folder)
|
|----------------------- lang (folder)
|                         |
|-- lib (folder)          |
|                         |-- da.js
|-- plugins (folder)      |
|                         |-- de.js
|-- suneditor.js          |
|                         |-- da.js
|-- suneditor_build.js    |
                          |-- es.js
                          |
                          |-- fr.js
                          |
                          |-- index.js
                          |
                          |-- ja.js
                          |
                          |-- pt.js
                          |
                          |-- ru.js
                          |
                          |-- zh_cn.js

________________________

The contents of the html file ("SunEditor - Page Source - 0020.html"):

________________________

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<script src="dist/suneditor.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SunEditor</title>
<!-- sample css -->
</head>
<body>

 

<div class="content" style="max-width: 1452px;">


<!-- suneditor -->
<link href="dist/css/suneditor.min.css" rel="stylesheet">

<textarea id="editor_classic">
<p><br></p>
<p>This is SunEditor</p>
</textarea>

<footer>
<p>Footer</p>
</footer>
</div>


<script src="src/lang/es.js"></script>
<script>

SUNEDITOR.create('editor_classic', {
display: 'block',
width: '100%',
height: 'auto',
popupDisplay: 'full',
charCounter: true,
font : [
'Arial',
'Tahoma',
'Noto Sans'
],
fontSize : [
0.75, 1.00, 1.10, 1.25, 1.50, 1.75, 2.00, 2.50, 3.00, 3.50, 4.00
],
"fontSizeUnit": "em",
colorList : [
['#c0c0c0', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'],
['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen'],
],

"paragraphStyles": [
"neon",
"spaced",
{
"name": "Box",
"class": "__se__box"
},
{
"name": "test",
"class": "__se__test"
}
],
"textStyles": [
"translucent",
{
"name": "blue",
"style": "color: #00f;",
"tag": "span"
}
],
"lineHeights": [
{
"text": "Single",
"value": 1
},
{
"text": "One and a half",
"value": 1.5
},
{
"text": "Double",
"value": 2
}
],
buttonList: [
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['paragraphStyle'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['fontColor', 'hiliteColor', 'textStyle'],
['removeFormat'],
['outdent', 'indent'],
['align', 'horizontalRule', 'list', 'lineHeight'],
['table', 'link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print'],
['save', 'template']
],
placeholder: 'This is a great wysiwyg editor!',
templates: [
{
name: 'Template-1',
html: '<p>HTML source1</p>'
},
{
name: 'Template-2',
html: '<p>HTML source2</p>'
}
]

});

</script>
</body>
</html>

________________________

I would be glad to receive some hints on how I should proceed in replacing CKEditor with SunEditor in GetSimple CMS.

Best regards
Samson

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:

This is an update to my last post. Now - with the kind help of its developer - SunEditor works with non-English button languages.

But I'm still stumped how to go about integrating SunEditor with GetSimple CMS.

Again, here is the local file and folder structure and how I integrated it into a html page:

________________________

Code:

SunEditor-master
|
|
|-- dist (folder)
|    |
|    |
|    |----------------------- css (folder)
|    |                         |
|    |-- fonts (folder)        |
|    |                         |-- suneditor.min.css
|    |-- suneditor.min.js
|
|
|-- src (folder)
|
|
|-- assets (folder)
|
|-------------------------------------------- lang (folder)
|                                              |
|-- lib (folder)                               |
|                                              |-- da.js
|-- plugins (folder)                           |
|                                              |-- de.js
|-- suneditor.js                               |
|                                              |-- da.js
|-- suneditor_build.js                         |
|                                              |-- es.js
|-- SunEditor - Page Source - 0023.html        |                  |
                                               |-- fr.js
                                               |
                                               |-- index.js
                                               |
                                               |-- ja.js
                                               |
                                               |-- pt.js
                                               |
                                               |-- ru.js
                                               |
                                               |-- zh_cn.js

________________________

The structure is the same as in my last post bar two exceptions:
1) In my last post I forgot to show the position of the file "SunEditor - Page Source - 0021.html".
2) Now this file has a new name "SunEditor - Page Source - 0023.html" as I included the changes for switching the button language.

________________________

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 
<script src="dist/suneditor.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>SunEditor</title>
    <!-- sample css -->
</head>
<body>
 
 
 
<div class="content" style="max-width: 1452px;">
    
 
<!-- suneditor -->
<link href="dist/css/suneditor.min.css" rel="stylesheet">
 
<textarea id="editor_classic">
<p><br></p>
<p>This is SunEditor</p>
    </textarea>
 
    <footer>
        <p>Footer</p>
    </footer>
</div>
 
 
<script src="src/lang/es.js"></script>
<script>
    
    SUNEDITOR.create('editor_classic', {     
        display: 'block',
        width: '100%',
        height: 'auto',
        popupDisplay: 'full',
        charCounter: true,
        font : [
             'Arial',
             'Tahoma',
             'Noto Sans'
        ],
        fontSize : [
             0.75, 1.00, 1.10, 1.25, 1.50, 1.75, 2.00,  2.50, 3.00, 3.50, 4.00
        ],
        "fontSizeUnit": "em",
        colorList : [
             ['#c0c0c0', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'],
             ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen'],
        ],
        "paragraphStyles": [
             "neon",
             "spaced",
             {
                 "name": "Box",
                 "class": "__se__box"
             },
             {
                 "name": "test",
                 "class": "__se__test"
             }
         ],
         "textStyles": [
             "translucent",
             {
                 "name": "blue",
                 "style": "color: #00f;",
                 "tag": "span"
             }
         ],
         "lineHeights": [
             {
                 "text": "Single",
                 "value": 1
             },
             {
                 "text": "One and a half",
                 "value": 1.5
             },
             {
                 "text": "Double",
                 "value": 2
             }
         ],
         buttonList: [
             ['undo', 'redo'],
             ['font', 'fontSize', 'formatBlock'],
             ['paragraphStyle'],
             ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
             ['fontColor', 'hiliteColor', 'textStyle'],
             ['removeFormat'],
             ['outdent', 'indent'],
             ['align', 'horizontalRule', 'list', 'lineHeight'],
             ['table', 'link', 'image', 'video'],
             ['fullScreen', 'showBlocks', 'codeView'],
             ['preview', 'print'],
             ['save', 'template']
         ],
         placeholder: 'This is a great wysiwyg editor!',
         templates: [
             {
                 name: 'Template-1',
                 html: '<p>HTML source1</p>'
             },
             {
                 name: 'Template-2',
                 html: '<p>HTML source2</p>'
             }
         ],
         lang : SUNEDITOR_LANG.es
    });
 
</script>
</body>
</html>

________________________

I also want to add the lines the developer of SunEditor wrote to me regarding the output of the editor:

How do I save the output of SunEditor? :

You can use the "save" or "getContents" method.
The "save" method stores the contents in "textarea", which is the basis for editor creation.
The "getContents" method gets the contents of the current editor.
const editor = suneditor.create('id');
editor.save();
editor.getContents();

https://github.com/JiHong88/SunEditor#functions


Is this of any help?

And, well, yes, I would still be glad to receive some hints on how I should proceed in replacing CKEditor with SunEditor in GetSimple CMS. Then not only I would have a wysiwy editor within a superb CMS - the acme of website building!


Best regards
Samson

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:

Yesterday I succeeded in slapdash integrating SunEditor in GetSimple CMS. Today I'm going to clean up the mess I made and post the results. I hope this will work for other users as well.


Best regards
Samson

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:

I started making a basic plugin for integrating SunEditor into GetSimple CMS. Surprisingly it works but shows in one case a behavior which SunEditor doesn't show when integrated into a "pure HTML" page (see my post on 2020-01-07, 08:12:34). But this can be fixed by omitting some code when using the default language (English). A greater issue is that SunEditor swallows white spaces or replaces them with non-breaking spaces.

When this nbsp problem is solved (that is, when the developer of SunEditor is so kind as to fix it), I will continue with modifying the CSS of the button field of SunEditor.

I still have high hopes.


Best regards
Samson

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:


For all the interested I will post my very, very basic - but working - plugin for SunEditor version 2.23.4 and try to describe step by step how to go about using it.
I did it with version 3.3.10 of GS. Yes, I know I should have used the latest version, but I tried to press on and this one was already installed on my localhost.

1) Head to https://github.com/JiHong88/SunEditor and download SunEditor-master.zip by clicking on the green button labeled "Clone or download" and choosing "Download ZIP" in the small box which opens below the green button.

2) In principle, you have many choices where to save and extract the to be downloaded ZIP file. I chose the path .../admin/template/js because there is also the folder ckeditor.
So, download "SunEditor-master.zip" in the folder js and extract it there. The complete path to the folder will be then .../admin/template/js/SunEditor-master.

3) In the path SunEditor-master/dist/ open the file suneditor.min.js with an editor (say, Notepad++) and replace the code 
else t+=e.replace(/(?!>)\s+?(?=<)/g,""); 
with 
else t+=e.replace(/(?!>)\s+?(?=<)/g," ");
and the odd nbsp behavior I mentioned in my last post is gone. The developer of SunEditor knows what changes I made.
(Note: I simply wanted to add this file to this post, but this forum software didn't allow js files and files larger than 200 kB, that's why you have to do the changes yourself.)

4) In the path SunEditor-master/dist/css/ delete the file suneditor.min.css and replace it with the file suneditor.min.css (same name) I added to this post. This css file contains some changes which were necessary to get a better integration of SunEditor with GS.

5) Open your GS website (preferably on your local computer as there is always the chance for things going haywire ...) and head to admin/settings.php.
Here you find below the heading "User Profile" a checkbox labeled "Enable the HTML editor", which to my knowledge exists for enabling CKEditor.
Uncheck this checkbox and click on "Save Settings".

6) In the path [Your Website] ... /theme/[Your Theme folder]/ open the file header.inc.php in an editor (say, Notepad++).
Example: If you are using the theme Bootstrap3 the last part of the path to the file header.inc.php is .../theme/Bootstrap3/header.inc.php.

7) Having opened the file header.inc.php in an editor you can add the small css file called suneditor_helper.css which makes the use of SunEditor easier resp. helps to utilize its full potential.
The position I used in the header.inc.php file was just before
<?php get_header(); ?>
</head>
If you don't have <?php get_header(); ?> or something with a similar function, then use the position directly above </head>.
What goes into that position?
<link href="<?php get_theme_url(); ?>/css/suneditor_helper.css" rel="stylesheet">
Here, the css file suneditor_helper.css is in the folder "css" in the folder of my theme ("Bootstrap3") which itself is in the folder called "theme", giving the path .../theme/Bootstrap3/css/suneditor_helper.css.
You can always create a folder called "css" in the folder of your theme to emulate this situation if there is none - or you can use your own path.

8) Copy the plugin called "SunEditor_for_GS.php" from this post and put it in the usual plugins folder of your GS installation and activate it in the usual way in the path .../admin/plugins.php.

9) Navigate to .../admin/pages.php and find SunEditor at the ready when creating or editing pages.

It would be great if you were as kind as to report how SunEditor works for you and what problems you experienced with installing it in GS.


Best regards
Samson

_____________________________

Downloads from Github (https://github.com/JiHong88/SunEditor):
SunEditor-master.zip

Downloads from this post: 
  suneditor.min.css (Size: 51.68 KB / Downloads: 6)
  suneditor_helper.css (Size: 2.2 KB / Downloads: 6)
  SunEditor_for_GS.php (Size: 4.59 KB / Downloads: 7)

[Samson]

Dear GS Users and Developers,
dear shawn_a and Felix:


With the release of version 2.24.0 of SunEditor, Step 3 as described in my previous post can now be omitted.
But otherwise I haven't looked into it.


Best regards
Samson