Download
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:
________________________
________________________
The contents of the html file ("SunEditor - Page Source - 0020.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
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
