Download
2020-01-07, 08:12:34
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:
________________________
________________________
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.
________________________
________________________
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
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
