Skip to content

Commit b82b1e5

Browse files
committed
adding some automation to migrate from a tinyMCE 4 config to tinyMCE 6
1 parent 0e206e0 commit b82b1e5

File tree

6 files changed

+66
-61
lines changed

6 files changed

+66
-61
lines changed

_build/assets/js/Plugins/modxlink/modxlink.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default (fred, pluginTools) => {
109109
{
110110
id: 'pagecontainer',
111111
type: 'htmlpanel',
112-
html: '<input type="hidden" name="page_page" /><label for="page_url">' + fredConfig.lng('fredrtetinymce.page_title') + '</label><select id="page_url"></select>'
112+
html: '<input type="hidden" name="page_page" /><label for="page_url" class="tox-label">' + fredConfig.lng('fredrtetinymce.page_title') + '</label><select id="page_url"></select>'
113113
},
114114
{
115115
type: 'input',

_build/assets/js/index.js

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import registerPlugins from './Plugins/RegisterPlugins';
22

33
export default (fred, pluginTools) => {
44
const { Finder } = pluginTools;
5+
const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
56

67
registerPlugins(fred, pluginTools);
78

@@ -11,19 +12,59 @@ export default (fred, pluginTools) => {
1112
const finalConfig = {
1213
menubar: false,
1314
inline: true,
14-
plugins: 'modxlink image imagetools media lists powerpaste',
15-
insert_toolbar: "image media quicktable modxlink",
16-
toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist | modxlink h2 h3 h4 blockquote',
15+
toolbar: false,
16+
plugins: 'quickbars modxlink image media lists powerpaste',
17+
quickbars_insert_toolbar: "image media quicktable modxlink",
18+
quickbars_selection_toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist | modxlink h2 h3 h4 blockquote',
1719
image_advtab: true,
18-
imagetools_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | flipv fliph | editimage imageoptions',
19-
auto_focus: false,
2020
branding: false,
2121
relative_urls: false,
2222
image_dimensions: false,
2323
powerpaste_word_import: 'clean',
2424
powerpaste_html_import: 'clean',
25+
a11y_advanced_options: true,
26+
skin: useDarkMode ? 'oxide-dark' : 'oxide',
2527
...config
2628
};
29+
// remove the theme if it is inlite
30+
if (finalConfig.theme === 'inlite') {
31+
finalConfig.theme = null;
32+
}
33+
// clean up plugins list
34+
const renamePlugins = {
35+
'contextmenu': ' ',
36+
'hr': ' ',
37+
'imagetools': ' ',
38+
};
39+
finalConfig.plugins = finalConfig.plugins.split(' ').map(plugin => {
40+
return renamePlugins[plugin] || plugin;
41+
}).join(' ');
42+
// check if it is missing quickbars plugin
43+
if (!finalConfig.plugins.includes('quickbars')) {
44+
finalConfig.plugins += ' quickbars';
45+
if (finalConfig.insert_toolbar) {
46+
finalConfig.quickbars_insert_toolbar = finalConfig.insert_toolbar;
47+
delete finalConfig.insert_toolbar;
48+
}
49+
if (finalConfig.selection_toolbar) {
50+
finalConfig.quickbars_selection_toolbar = finalConfig.selection_toolbar;
51+
delete finalConfig.selection_toolbar;
52+
}
53+
}
54+
// rename toolbar options
55+
const renameTools = {
56+
'styleselect' : 'styles',
57+
};
58+
finalConfig.quickbars_insert_toolbar = finalConfig.quickbars_insert_toolbar.split(' ').map(tool => {
59+
return renameTools[tool] || tool;
60+
}).join(' ');
61+
finalConfig.quickbars_selection_toolbar = finalConfig.quickbars_selection_toolbar.split(' ').map(tool => {
62+
return renameTools[tool] || tool;
63+
}).join(' ');
64+
finalConfig.contextmenu = finalConfig.contextmenu.split(' ').map(tool => {
65+
return renameTools[tool] || tool;
66+
}).join(' ');
67+
2768

2869
finalConfig.target = el;
2970
finalConfig.file_picker_callback = (callback, value, meta) => {

_build/assets/sass/_modxlink.scss

Lines changed: 12 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,19 @@
11
.mce-fred--modxlink{
2-
.mce-fred--modxlink-panel {
3-
left: 0 !important;
4-
width: 100% !important;
5-
padding-top: 15px;
2+
.choices {
3+
margin-bottom: 4px;
64
}
7-
.mce-container-body.mce-abs-layout{
8-
overflow:visible;
5+
.tox-form > div {
6+
margin-bottom: 4px;
97
}
10-
.mce-content-body { line-height: unset }
11-
.mce-tab{
12-
border: 1px solid transparent;
13-
font-weight: bold;
14-
font-size: 15px;
15-
&.mce-active{
16-
border: 1px solid #c5c5c5;
17-
background: #fff;
18-
border-bottom-color: transparent;
19-
height: 15px;
8+
@media screen and (prefers-color-scheme: dark) {
9+
.choices__inner,
10+
.choices__list--dropdown,
11+
.choices[data-type*=select-one] .choices__input {
12+
background-color: #2b3b4e;
13+
border-color: #161f29;
2014
}
21-
}
22-
.mce-tabs, .mce-tabs+.mce-container-body{
23-
background-color: transparent;
24-
}
25-
26-
#page, #page-body, #page-body > div, #pagecontainer, #pagecontainer-body{
27-
width: 100% !important;
28-
height: auto !important;
29-
position: relative !important;
30-
}
31-
#page-body > div{
32-
top: auto !important;
33-
margin-top: 15px;
34-
label{
35-
position: relative !important;
36-
}
37-
input#page_anchor{
38-
position: relative !important;
39-
left: 15px !important;
40-
}
41-
}
42-
#pagecontainer{
43-
label{
44-
margin-top: 5px;
45-
}
46-
.choices{
47-
width: calc(100% - 137px);
48-
position: absolute;
49-
top: 0;
50-
left: 116px;
51-
&__inner{
52-
min-height: 20px;
53-
border-radius: 0;
54-
}
55-
&__list--single{
56-
min-height: 20px;
57-
}
15+
.choices__list--dropdown .choices__item--selectable.is-highlighted {
16+
background-color: #161f29;
5817
}
5918
}
6019
}

_build/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"lowCaseName": "fredrtetinymce",
44
"description": "",
55
"author": "John Peca",
6-
"version": "1.1.1-pl",
6+
"version": "1.2.0-pl",
77
"package": {
88
"menus": [],
99
"elements": {

core/components/fredrtetinymce/docs/changelog.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
Changelog for FredRTETinyMCE.
22

3+
1.2.0-pl
4+
==============
5+
- Migrate to TinyMCE 6
6+
7+
38
1.1.1-pl
49
==============
510

webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = (env, options) => {
2020
libraryTarget: 'umd',
2121
libraryExport: 'default',
2222
filename: 'fredrtetinymce.min.js',
23-
clean: true,
23+
clean: {keep: '.gitignore'}
2424
},
2525

2626
module: {

0 commit comments

Comments
 (0)