Tags:
- 💥 [Breaking Change]
- 🚀 [New Feature]
- 🐛 [Bug Fix]
- 📝 [Documentation]
- 🏠 [Internal]
- 💅 [Polish]
- Remove all languages from lang/index.js for ESM build
- Only base plugins list in plugins/index.js for ESM build
- Remove polyfills from ESM build
- Remove
composer.json
@types/node ^18.15.12 → ^20.1.0
@typescript-eslint/eslint-plugin ^5.59.0 → ^5.59.2
@typescript-eslint/parser ^5.59.0 → ^5.59.2
axios ^1.3.6 → ^1.4.0
core-js ^3.30.1 → ^3.30.2
cssnano-preset-advanced ^6.0.0 → ^6.0.1
eslint ^8.38.0 → ^8.40.0
glob ^10.2.1 → ^10.2.2
karma ^6.4.1 → ^6.4.2
lint-staged ^13.2.1 → ^13.2.2
open ^8.4.2 → ^9.1.0
postcss-loader ^7.2.4 → ^7.3.0
prettier ^2.8.7 → ^2.8.8
puppeteer ^19.10.0 → ^20.1.1
stylelint ^15.5.0 → ^15.6.1
terser-webpack-plugin ^5.3.7 → ^5.3.8
webpack 5.80.0 → 5.82.0
webpack-cli ^5.0.1 → ^5.1.0
webpack-dev-middleware ^6.0.2 → ^6.1.0
webpack-dev-server ^4.13.3 → ^4.15.0
yargs ^17.7.1 → ^17.7.2
- !!! Build files removed from repository and only available in npm package !!!
- !!! bowers.json was removed !!!
- server.js was removed
- All build js files was rewritten to typescript
build-system
was renamed astools
- Removed
exludeLangs
build option. Instead use--includeLanguages=en
option. - Default target for build was changed to es2015
- Build in es2018 target was removed, instead es2021 was added
- Event
getIcon
was removed. Use optiongetIcon
instead
Jodit.make('#editor', {
getIcon: (name: string) => {
if (name === 'bold') {
return '<svg>...</svg>';
}
return null;
}
});
-
Removed
errorMessage
event. Usemodule.messages
insteadJodit.make('#editor').message.info('Hello world');
- Added
Jodit.modules.Dom.isList
method - Added
Jodit.modules.Dom.isLeaf
method - Added plugin
delete
for correct delete content with commanddelete
@types/node ^18.13.0 → ^18.15.12
@typescript-eslint/eslint-plugin ^5.50.0 → ^5.59.0
@typescript-eslint/parser ^5.50.0 → ^5.59.0
autoprefixer ^10.4.13 → ^10.4.14
axios ^1.3.3 → ^1.3.6
core-js ^3.28.0 → ^3.30.1
css-minimizer-webpack-plugin ^4.2.2 → ^5.0.0
cssnano-preset-advanced ^5.3.9 → ^6.0.0
eslint ^8.34.0 → ^8.38.0
eslint-config-prettier ^8.6.0 → ^8.8.0
expect-mocha-image-snapshot ^3.0.1 → ^3.0.13
glob ^8.1.0 → ^10.2.1
karma-chrome-launcher ^3.1.1 → ^3.2.0
lint-staged ^13.1.2 → ^13.2.1
mini-css-extract-plugin ^2.7.2 → ^2.7.5
postcss >=8.4.21 → >=8.4.23
postcss-css-variables ^0.18.0 → ^0.19.0
postcss-loader ^7.0.2 → ^7.2.4
prettier ^2.8.4 → ^2.8.7
puppeteer ^19.7.0 → ^19.10.0
style-loader ^3.3.1 → ^3.3.2
stylelint ^15.1.0 → ^15.5.0
stylelint-config-standard ^30.0.1 → ^33.0.0
stylelint-prettier ^2.0.0 → ^3.0.0
terser-webpack-plugin ^5.3.6 → ^5.3.7
tsc-alias ^1.8.2 → ^1.8.5
typescript ^4.9.5 → ^5.0.4
webpack 5.76.0 → 5.80.0
webpack-dev-middleware ^6.0.1 → ^6.0.2
webpack-dev-server ^4.11.1 → ^4.13.3
yargs ^17.6.2 → ^17.7.1
Jodit.modules.Helpers.htmlspecialchars
marked as deprecated. Instead useJodit.modules.Helpers.stripTags
Jodit.modules.Helpers.stripTags
added third argument for excluding tags
Jodit.modules.Helpers.stripTags(
'<p>test <strong>po<br/>p</strong><br/>stop <em>lop</em><br/></p>',
document,
new Set(['p', 'br'])
);
// <p>test po<br>p<br>stop lop<br></p>
- Inside
safeMode
will init onlysafePluginsList
plugins. It used to initextraPlugins
too. size
plugin was added in defaultsafePluginsList
const editor = Jodit.make('#editor', {
safeMode: true,
safePluginsList: ['enter', 'backspace']
});
console.log(editor.__plugins); // only 'enter', 'backspace'
- Wrong new empty paragraph location when cursor is set after a table and key is pressed #953
- The PluginSystem module has been refactored: now asynchronous plugins do not block the initialization of the editor and it is ready to work without them.
- Remove anchor element when set black text color. #936
- Insert_only_text makes mistakes when i copy a text html that includes a style tag #934
- Selected font styling reverts to default style after removing the added text using the backspace key #925
core-js ^3.27.2 → ^3.28.0
@types/node ^18.11.19 → ^18.13.0
axios ^1.3.2 → ^1.3.3
eslint ^8.33.0 → ^8.34.0
karma-sourcemap-loader ^0.3.8 → ^0.4.0
lint-staged ^13.1.0 → ^13.1.2
open ^8.4.0 → ^8.4.1
prettier ^2.8.3 → ^2.8.4
puppeteer ^19.6.3 → ^19.7.0
stylelint ^14.16.1 → ^15.1.0
stylelint-config-prettier ^9.0.4 → ^9.0.5
stylelint-config-standard ^29.0.0 → ^30.0.1
synchronous-promise 2.0.15 → 2.0.17
- Options to hide the functionality of editing directories and files
filebrowser.createNewFolder
,filebrowser.editImage
,filebrowser.deleteFolder
,filebrowser.renameFolder
,filebrowser.moveFolder
,filebrowser.moveFile
were marked as deprecated. - Instead added
filebrowser.permissionsPresets: Partial<IPermissions>
option.
Before:
Jodit.make('#editor', {
filebrowser: {
createNewFolder: false,
deleteFolder: false,
renameFolder: false,
moveFolder: false,
moveFile: false,
editImage: false,
ajax: {
url: 'https://xdsoft.net/jodit/finder/'
}
}
});
Now
Jodit.make('#editor', {
filebrowser: {
permissionsPresets: {
allowFiles: false,
allowFileMove: false,
allowFileUpload: false,
allowFileUploadRemote: false,
allowFileRemove: false,
allowFileRename: false,
allowFolders: false,
allowFolderCreate: false,
allowFolderMove: false,
allowFolderRemove: false,
allowFolderRename: false,
allowImageResize: false,
allowImageCrop: false
},
ajax: {
url: 'https://xdsoft.net/jodit/finder/'
}
}
});
core-js ^3.26.1 → ^3.27.2
@types/node ^18.11.9 → ^18.11.19
@typescript-eslint/eslint-plugin ^5.45.0 → ^5.50.0
@typescript-eslint/parser ^5.45.0 → ^5.50.0
axios ^1.2.0 → ^1.3.2
css-loader ^6.7.2 → ^6.7.3
eslint ^8.28.0 → ^8.33.0
eslint-config-prettier ^8.5.0 → ^8.6.0
eslint-plugin-import ^2.26.0 → ^2.27.5
expect-mocha-image-snapshot ^2.0.14 → ^3.0.1
glob ^8.0.3 → ^8.1.0
husky ^8.0.2 → ^8.0.3
lint-staged ^13.0.4 → ^13.1.0
mini-css-extract-plugin ^2.7.0 → ^2.7.2
mocha ^10.1.0 → ^10.2.0
nock ^13.2.9 → ^13.3.0
postcss >=8.4.19 → >=8.4.21
postcss-loader ^7.0.1 → ^7.0.2
prettier ^2.8.0 → ^2.8.3
puppeteer ^19.3.0 → ^19.6.3
stylelint ^14.15.0 → ^14.16.1
synchronous-promise 2.0.15 → 2.0.17
ts-loader ^9.4.1 → ^9.4.2
tsc-alias ^1.7.1 → ^1.8.2
tslib ^2.4.1 → ^2.5.0
typescript ^4.9.3 → ^4.9.5
webpack-cli ^5.0.0 → ^5.0.1
- Constant array
MAY_BE_REMOVED_WITH_KEY
was replaced on setINSEPARABLE_TAGS
- Method
Select.applyStyle
marked as deprecated. UseSelect.commitStyle
instead.
Before:
jodit.select.applyStyle(
{ color: red },
{
element: 'strong'
}
);
Now:
jodit.s.commitStyle({
element: 'strong',
attributes: {
style: {
color: 'red'
}
}
});
- In the options of the
Select
.commitStyle
method, theattributes
property has been added, which allows you to also set attributes when applying a style.
jodit.s.commitStyle({
element: 'a',
attributes: {
href: 'https://stename.ru'
}
});
Wraps the selected text into a link with the specified address.
-
When inserting a url, if the text is selected, it will automatically be replaced with a link
-
In Tab plugin allow use shift+tab for lists
- Fixed deletion of the asserts function from the production code, instead of regular expressions, transformers are used****
- Added option
IControlType.childExec
Allows you to set a separate handler for list items
Jodit.make('.editor', {
buttons: [
{
name: 'add-date',
iconURL: 'stuf/dummy.png',
list: {
options: 'Open options'
},
exec(editor, current, control) {
editor.s.insertHTML(new Date().toString());
},
childExec(editor, current, control) {
if (control.args[0] === 'options') {
editor.alert('Options');
}
}
}
]
});
- Deleted ajax.dataType option, because it was not used
- Remove
IJodit
from first argument ofAjax
constructor.
- The focus method and the isFocused property have been added to the
IJodit
interface. These are just aliases for the same methods and properties of theSelect
module.
const editor = Jodit.make('#editor');
editor.focus();
- The
IJodit.fetch
method has been added to theIJodit
interface, which is similar in signature to thefetch
method in the browser
const editor = Jodit.make('#editor');
const data = await editor.fetch('https://somesite.com?type=json');
- Fixed error when using
superscript
andsubscript
commands. If the cursor was inside sub or sup tags, then nothing happened. - Fixed a bug in the placeholder plugin when indent styles were set for the edit area, they were not taken into account in the positioning of the placeholder. As a result, it was shifted relative to the focus.
ISnapshot.isBlocked
- is readonly nowIHistory.snapshot
- is readonly nowIHistory.processChanges
andIHistory.upTick
were removed.- Instead of
IHistory.snapshot.isBlocked=true...IHistory.snapshot.isBlocked=false
should be usedIHistory.snapshot.transaction(() => {...})
IJodit.registerCommand<C extends string>
- is generic nowIJodit.getNativeEditorValue
- marked as internal, please do not use it in your code- To class
.jodit-container
was addedbackground-color: var(--color-background-light-gray);
- To class
.jodit-workplace
was addedbackground-color: var(--color-background-default);
- Selection markers now are marked as temporary with
Dom.markTemporary
- Search plugin move selection to the next found element after replacing. See bug fix section
- WrapNodes plugin added
emptyBlockAfterInit=true
option. After the editor is initialized, if it is empty, an empty block will be added to it.
core-js ^3.25.5 → ^3.26.0
@types/node ^18.11.0 → ^18.11.9
@typescript-eslint/eslint-plugin ^5.40.0 → ^5.42.0
@typescript-eslint/parser ^5.40.0 → ^5.42.0
autoprefixer ^10.4.12 → ^10.4.13
cssnano-preset-advanced ^5.3.8 → ^5.3.9
eslint ^8.25.0 → ^8.26.0
puppeteer ^19.0.0 → ^19.2.1
replace ^1.2.1 → ^1.2.2
tslib ^2.4.0 → ^2.4.1
yargs ^17.6.0 → ^17.6.1
@types/node ^18.8.3 → ^18.11.0 axios ^1.1.2 → ^1.1.3 css-minimizer-webpack-plugin ^4.2.1 → ^4.2.2 mocha ^10.0.0 → ^10.1.0 postcss >=8.4.17 → >=8.4.18 puppeteer ^18.2.1 → ^19.0.0 stylelint ^14.13.0 → ^14.14.0 stylelint-config-standard ^28.0.0 → ^29.0.0
- Filebrowser adds a timestamp to the image preview url, now it will be the same as the server returned the
changed
field in the response. This is necessary for better caching in the browser. cleanHTML.denyTags
default equalscript
Those. script tags are disabled by default. If you need them then turn off this rule:
Jodit.make('#editor', {
cleanHTML: {
denyTags: false
}
});
- The order of the hotkeys plugin keys has been changed to a more popular one.
It used to be:
b+meta
,b+ctrl
Now:meta+b
,ctrl+b
This is expressed in the installation of handlers for keyboard shortcuts:
Jodit.make('#editor', { disablePlugins: ['bold'] }).e.on('meta+b', () => {
alert('Do smth with text');
return false;
});
- Remove
assert
calls from production build. - Update deps
core-js ^3.24.1 → ^3.25.5
@types/node ^18.7.3 → ^18.8.3
@typescript-eslint/eslint-plugin ^5.33.0 → ^5.39.0
@typescript-eslint/parser ^5.33.0 → ^5.39.0
autoprefixer ^10.4.8 → ^10.4.12
axios ^0.27.2 → ^1.1.2
css-minimizer-webpack-plugin ^4.0.0 → ^4.2.1
eslint ^8.22.0 → ^8.25.0
eslint-plugin-tsdoc ^0.2.16 → ^0.2.17
express ^4.18.1 → ^4.18.2
karma ^6.4.0 → ^6.4.1
less-loader ^11.0.0 → ^11.1.0
postcss >=8.4.16 → >=8.4.17
puppeteer ^17.0.0 → ^18.2.1
stylelint ^14.10.0 → ^14.13.0
stylelint-config-idiomatic-order v8.1.0 → v9.0.0
stylelint-config-standard ^27.0.0 → ^28.0.0
synchronous-promise ^2.0.15 → ^2.0.16
terser-webpack-plugin ^5.3.4 → ^5.3.6
ts-loader ^9.3.1 → ^9.4.1
typescript ^4.8.2 → ^4.8.4
webpack 5.73.0 → 5.74.0
webpack-dev-server ^4.9.3 → ^4.11.1
webpack-hot-middleware ^2.25.1 → ^2.25.2
yargs ^17.5.1 → ^17.6.0
- Move
error-messages
functionality tomessages
module. - Improved appearance of popup messages in the messages module.
- Fixed a bug in the limit plugin. When the limit was reached, he checked the limits strictly, when entering from the keyboard. Therefore, every time I change the input focus.
- Events are added to the same plugin when limits are reached. More details can be found in the documentation limit
- En lang is loaded as is
- Fix types generation:
- Remove styles
- Replace aliases
- Tooltip plugin functionality moved to
ui/button/tooltip
so that it can be used not only with the editor
- Fixed bug in add-new-line in iframe-mode
- Removed Panel and IPanel
- Made IDlgs and Dlgs traits
- Added @derive decorator
- Mods/Elms/Dlgs traits now uses with @derive
- Added
dtd
plugin. Read more
- Added documentation for Image properties - Input fields are not clickable ( react + material ui ) #879
- After adding hyperlink and hit enter the hyperlink added to first letter of the next word.
- After reaching the maximum character limit unable to copy the content from the editor.(eg:- if limit is 50000 then we are able to copy only 49999)
- When typing Japanese characters in Jodit editor, extra characters are being added to the beginning of the first word. Same Composing japanese text is decided unintentionally. #870
- Added
cleanHTML.disableCleanFilter:Set<string>
options. Node filtering rules that do not need to be applied to content The full list of rules is generated dynamically from the folder https://github.com/xdan/jodit/tree/main/src/plugins/clean-html/helpers/visitor/filters - Added
allowCommandsInReadOnly:string[]
options. Allow execute commands in readonly mode. activeButtonsInReadOnly: ['source', 'preview'] is not working. #878const editor = Jodit.make('#editor', { readonly: true, allowCommandsInReadOnly: ['alert'] }); editor.registerCommand('alert', (_, _2, text) => { alert(text); }); editor.execCommand('alert', '', 'Hello!');
- Pasting html breaks full screen mode #864
- Using BR tag as enter element results reset of cursor while typing in newlines. #860 Fixed bugs with invisible aand empty nodes.
- Adding paragraph when copying and pasting with little text #851
Options
select.normalizeSelectionBeforeCutAndCopy
now default is false - Jodit-selection-marker span appears after clicking Undo button. #880
- Added [[IUploader.getDisplayName]] option. Allow change file name before display it inside editor. Can we customize uploaded file's name? #869
Jodit.make('#editor', {
uploader: {
url: 'https://sitename.net/jodit/connector/index.php?action=fileUpload',
getDisplayName: (_, name) => 'File:' + name
}
});
- Added
cleanHTML.useIframeSandbox
:boolean
option(default: false). Use iframe[sandbox] to paste HTML code into the editor to check it for safety. Allows you not to run scripts and handlers, but it works much slower
- applyLink event is only fired when link is inserted via menu button but not when it is pasted #874
- Dialogs don't work inside Shadow DOM #866
- Popups don't work inside Shadow DOM #865
- Pb with cleanHTML.safeJavaScriptLink option #862
- Quick fix bug with webpack output.clean=true.
- Big bugfix in es2021 version, sideEffect cut all styles and configs
- Plugin icons moved to their respective plugins
- Used plugin
webpack.ids.DeterministicModuleIdsPlugin
for more reliable sharing of exported module names between builds. Now you can include plugins from 'es5' in the assembly for 'es2021.en'. - Deps
@types/node ^17.0.36 → ^17.0.41 @typescript-eslint/eslint-plugin ^5.27.0 → ^5.27.1 @typescript-eslint/parser ^5.27.0 → ^5.27.1 cssnano-preset-advanced ^5.3.6 → ^5.3.7 eslint ^8.16.0 → ^8.17.0 lint-staged ^12.4.3 → ^13.0.0 terser-webpack-plugin ^5.3.1 → ^5.3.3 typescript ^4.7.2 → ^4.7.3 webpack ^5.72.1 → ^5.73.0 webpack-dev-server ^4.9.0 → ^4.9.2 core-js ^3.22.7 → ^3.22.8
- Allow custom resizing with Alt btn How to resize image with the handle bars without fixed aspect ratio #839
- Multiple modals 'Paste as HTML' after longer pressing ctrl+v #849
- All added videos are deleted when you click Delete or Backspace #847
- Separate plugin for voice recognition and input of recognized text into the editor.
Feature Request: Add ability for user to dictate using local device microphone as input #828
This plugin is not included in the main Jodit build. It must be connected separately Подробнее
- Added default table style to
createAttributes
option:
Jodit.defaultOptions.createAttributes = {
table: {
style: 'border-collapse:collapse;width: 100%;'
}
};
- Fixed a bug where the download cancellation business exceptions were shown as errors in the file browser. Also fixed uncatchable exceptions inside Async.promise
- Fixed Eraser delete "" tag! #705 #845 Thanks @s-renier-taonix-fr
- Update Docker Env #844 Thanks @s-renier-taonix-fr
- Fixed table default styles Jodit doesn't keep table borders #295
- All td elements got double border style. #842
- Added option
uploader.processFileName
- The method can be used to change the name of the uploaded file
Jodit.make('#editor', {
uploader: {
url: 'some-connector.php',
processFileName: (key, file, name) => {
return [key, file, 'some-prefix_' + name];
}
}
});
- Fixed file naming error when uploading to server
- Fixed a bug where pressing
Esc
did not close the dialog
The on/one/off methods of the Jodit Event System have been greatly simplified:
instead:
editor.e.on(
'click',
() => {
alert('Clicked!');
},
undefined,
true
);
Now:
editor.e.on(
'click',
() => {
alert('Clicked!');
},
{
top: true
}
);
Also, the methods now support an array of events:
editor.e.on('click mousedown mouseup', () => {
alert('Some event!');
});
editor.e.on(['click', 'mousedown', 'mouseup'], () => {
alert('Some event!');
});
- All components have their own instance of the Async module. What used to be
this.j.async
is nowthis.async
. - New option
resizer.useAspectRatio
How to resize image with the handle bars without fixed aspect ratio - Added event
applyLink
for issue change default target for all links #841
- Fixed non-removal of the event handler on destruct
- Extra br are not removed
- Bold removing line break in table #838
- Cleans
that should be there #835 - Cursor goes out of edit box when moving to a new line #824
- Couldn't click next line button, when table is resized. #831
- Unable to add line height for Html pasted content. #830
-
Instead of a self-written truncated polyfill for
Array.from
, the core-js module is used -
Moved the test files to the appropriate directories
-
Update deps
@types/node ^17.0.23 → ^17.0.31 @typescript-eslint/eslint-plugin ^5.19.0 → ^5.22.0 @typescript-eslint/parser ^5.19.0 → ^5.22.0 autoprefixer ^10.4.4 → ^10.4.7 axios ^0.26.1 → ^0.27.2 eslint ^8.13.0 → ^8.14.0 express ^4.17.3 → ^4.18.1 karma ^6.3.17 → ^6.3.19 lint-staged ^12.3.7 → ^12.4.1 mocha ^9.2.2 → ^10.0.0 postcss >=8.4.12 → >=8.4.13 stylelint ^14.6.1 → ^14.8.2 ts-loader ^9.2.8 → ^9.3.0 tslib ^2.3.1 → ^2.4.0 typescript ^4.6.3 → ^4.6.4 webpack-dev-server ^4.8.1 → ^4.9.0 core-js ^3.21.1 → ^3.22.4
Some minifier configurations do not correctly handle inheritance in the component
decorator,
we added some helper code earlier to make this work correctly.
We tried to determine belonging by the name of the component and not by its constructor or prototype.
Because in some build system(ex. create-react-app):
@component
class A extends Component {
className() {
return 'A';
}
}
const a = new A();
a instanceof Component; // false - only in some cases
elm.className() === A.prototype.className(); // true
In most cases, this entailed new bugs, so in 3.17 we decided to remove this heuristic. If something broke in your assembly, please create an issue on github.
- Fixed processing of inserting videos from YouTube. Now you can start playing the video.
- selection.insertHTML causes infinite blur loop when Jodit editor not active Added
insertCursorAfter
argument. - Preview missing non styled content in a paragraph when there is any styled text in that paragraph #823
- Image hyperlink is not working without https:// #821
const editor = Jodit.make('#editor');
editor.s.insertHTML('test', false);
- Update
@typescript-eslint/eslint-plugin ^5.16.0 → ^5.19.0
@typescript-eslint/parser ^5.16.0 → ^5.19.0
cssnano-preset-advanced ^5.3.1 → ^5.3.3
eslint ^8.12.0 → ^8.13.0
eslint-plugin-tsdoc ^0.2.14 → ^0.2.16
prettier ^2.6.1 → ^2.6.2
webpack ^5.70.0 → ^5.72.0
webpack-dev-server ^4.7.4 → ^4.8.1
yargs ^17.4.0 → ^17.4.1
- Keyboard Trap in Source Code mode #817 Author: @haruanm
- "Uncaught TypeError: Cannot redefine property: __activeTab" occurs when I use 'brush' button twice in inline-popup for a element. #815
- imageProcessor.replaceDataURIToBlobIdInView
The
imageProcessor
plugin has added the functionality of replacing data-uri objects in thesrc
of images withblob-url
. This allows you to more conveniently work with an HTML document without loading the processor. Checks if theimageProcessor.replaceDataURIToBlobIdInView
option is enabled then converts image src which hasdata:base64
to blob-object-uri
In this case, Jodit.value
returns images with data-uri
. And original textarea
itself does the reverse replacement take place.
const editor = Jodit.make('#editor', {
imageProcessor: {
replaceDataURIToBlobIdInView: true // This is the default value, but for examples we set it
}
});
editor.value =
'<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="/></p>';
console.log(editor.value); // <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="/></p>
console.log(editor.getElementValue()); // '<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="/></p>'
console.log(editor.getNativeEditorValue()); // <p><img src="blob:http://localhost:2000/03377cf0-6260-4351-82ad-8a8901ea104f"></p>
- Method
Jodit.setElementValue
marked us deprecated and will be removed in next major release.
- Update
@types/node ^17.0.21 → ^17.0.23
@typescript-eslint/eslint-plugin ^5.14.0 → ^5.16.0
@typescript-eslint/parser ^5.14.0 → ^5.16.0
autoprefixer ^10.4.2 → ^10.4.4
cssnano-preset-advanced ^5.2.4 → ^5.3.1
eslint ^8.11.0 → ^8.12.0
lint-staged ^12.3.5 → ^12.3.7
postcss >=8.4.8 → >=8.4.12
prettier ^2.5.1 → ^2.6.1
stylelint ^14.5.3 → ^14.6.1
typescript ^4.6.2 → ^4.6.3
yargs ^17.3.1 → ^17.4.0
- Sass compile error Css3 min() #809
- The preview popup has double scrollbars #808
- Fixed bug with sync editor size with iframe mode (Works only with ResizeObserver)
- Fixed composition
wait
anddebounce
decorators
- Added
spellcheck
plugin. - Added
Config.pasteHTMLActionList
andConfig.pasteFromWordActionList
options xdan#802. - Added
Jodit.synchronizeValues()
method. The method synchronizes the WYSIWYG values of the editor - and the original input field. The method works through
Async.throttle
. - Added a new class for working with DOM without blocking the main thread
LazyWalker
- Search engine replace on
LazyWalker
- CleanHTML plugin engine replace on
LazyWalker
- Search plugin now highlights all found options xdan#798
- Added
Jodit.constants
xdan#806
- Renamed
wrap-text-nodes
plugin towrap-nodes
- Option
spellcheck
= false by default. This is due to the fact that the built-in spell check slows down the editor very much on large tests. - Enabled
@typescript-eslint/explicit-function-return-type
in eslint
- Fixed a bug in the
watch
decorator, when multiple watchers were set, it used only one context - Default is not working for insert ordered list and insert unordered list #799
- In print preview, table border color and background color is not showing #803
clean-html
plugin now works viarequestIdleCallback
and doesn't slow down the browser
Observer
module renamed toHistory
, accessed viaJodit.history
Jodit.observer
field deprecated and will be removed in future releases- Changed to
history
inobserver
settings. Theobserver
field has been deprecated. - Removed
stack
field fromHistory
class (formerObserver
). - Separated default editor timeout and
history.timeout
. Now the second setting is just for history. Timeouts for all asynchronous operations in Jodit now apply thedefaultTimeout
setting
Before:
const editor = Jodit.make({
observer: {
timeout: 122,
maxHistoryLength: 100
}
});
console.log(editor.defaultTimeout); // 122
editor.observer.stack.clear();
Now:
const editor = Jodit.make({
defaultTimeout: 122,
history: {
timeout: 1000,
maxHistoryLength: 100
}
});
console.log(editor.defaultTimeout); // 122
editor.history.clear();
- When adding information to the editor via
Jodit.value
, the history of changes will be process immediately, without a timeout. Read more xdan#792
- Fixed a bug when it was impossible to select a normal font after selecting any other
- Dropdowns not hiding when clicking again on the arrow #791
- The problem that the selected text disappears #790
- When copying elements, their hierarchy is taken into, for example, if you selected
<ul><li><span>|test|</span></li></ul>
, then when copying to the clipboard, the selection will be expanded to root elementUL
. For this, the [[Select.expandSelection]] method has been added to the [[Select]] class. Ordered Bullets are getting changed to unordered bullets after copy and pasting within the editor #789Method called before copy/cut/selectall operations
- The [[Dom.isNode]] method now uses Duck Typing instead of inctanceof, this seems to be enough
- Update @types/node ^17.0.18 → ^17.0.21 @typescript-eslint/eslint-plugin ^5.12.0 → ^5.13.0 @typescript-eslint/parser ^5.12.0 → ^5.13.0 cssnano-preset-advanced ^5.1.12 → ^5.2.1 eslint ^8.9.0 → ^8.10.0 eslint-config-prettier ^8.4.0 → ^8.5.0 karma ^6.3.16 → ^6.3.17 mini-css-extract-plugin ^2.5.3 → ^2.6.0 postcss >=8.4.6 → >=8.4.7 stylelint ^14.5.1 → ^14.5.3 ts-loader ^9.2.6 → ^9.2.7 typescript ^4.5.5 → ^4.6.2 webpack ^5.69.1 → ^5.70.0
- Added an experimental module for working with VDom<->Dom, an attempt to switch to this technology in the editor
- @types/node ^17.0.15 → ^17.0.18
- @typescript-eslint/eslint-plugin ^5.10.2 → ^5.12.0
- @typescript-eslint/parser ^5.10.2 → ^5.12.0
- axios ^0.25.0 → ^0.26.0
- cssnano-preset-advanced ^5.1.11 → ^5.1.12
- eslint ^8.8.0 → ^8.9.0
- eslint-config-prettier ^8.3.0 → ^8.4.0
- express ^4.17.2 → ^4.17.3
- karma ^6.3.15 → ^6.3.16
- lint-staged ^12.3.3 → ^12.3.4
- mocha ^9.2.0 → ^9.2.1
- stylelint ^14.3.0 → ^14.5.1
- stylelint-config-standard ^24.0.0 → ^25.0.0
- webpack ^5.68.0 → ^5.69.1
- core-js ^3.21.0 → ^3.21.1
- Changed the positions of some buttons on different resolutions for greater density
- Disabled the ability to drag and drop elements on mobile devices as it affected page scrollability
- Plugin for setting line spacing
- Added a plugin to handle pressing the Tab key, it added the functionality of processing a keystroke inside the UL/li element and allows you to add tree-like lists.
- Added static
Jodit.isJoditAssigned
method: Checks if the element has already been initialized when for Jodit
const area = document.getElementById('editor');
(Jodit.make(area) === Jodit.make(area)) === Jodit.make(area);
console.log(Jodit.isJoditAssigned(area)); // true
const editor = Jodit.make(area);
editor.destruct();
console.log(Jodit.isJoditAssigned(area)); // false
- Fixed a bug when switching between source and wysiwyg mode, the FORM tag was wrapped in P
- Not maintaining styles set when switching format blocks #773
ObserveObject
removed- Added
observable
function which makes object observable. In this case, the function returns the same object.
const obj = {
a: 1,
b: {
c: 5
}
};
const obsObj = Jodit.modules.observable(obj);
console.log(obj === obsObj); // true
obsObj.on('change', () => {
console.log('Object changed');
});
obsObj.on('change.a', () => {
console.log('Key a changed');
});
obsObj.on('change.b.c', () => {
console.log('Key b.c changed');
});
obj.a = 6;
// Object changed
// Key a changed
obj.b = { c: 6 };
// Object changed
obj.b.c = 8;
// Object changed
// Key b.c changed
- Fixed autotest in Chrome on Windows
- Added options
safeMode:boolean
andsafePluginsList:string[]
for debugging
Jodit.make('#editor', {
safeMode: true,
safePluginsList: ['about']
});
Only one plugin will be activated. Convenient for debugging and your plugins, you can turn off all the others.
- Fixed a bug due to which Jodit did not work in ie11, + added a polyfill for the iterator
- [Fixed Full Screen showing elements not part of editable content #763](Issue: xdan#763)
- Added
monospace
button in format list xdan#767 - In plugin
paste
addedmemorizeChoiceWhenPasteFragment
option: when the user inserts a piece of HTML, the plugin will ask - How to insert it. If after that user insert the same fragment again, the previous option will be used without extra question.
memorizeChoiceWhenPasteFragment = false, by default, it is Breaking change
ObserveObject
renamed toObservableObject
const obj = { a: 1, b: 2 };
const observed = Jodit.modules.ObservableObject.create(obj);
observed.on('change', (oldV, newV) => console.log(oldV, newV));
observed.a = 5;
- In addition to the preinstalled editors, the source plugin adds the ability to use its own implementation. You can read more in the documentation
- Fixed a bug when resizing images whose size was specified in the style attribute - the size did not change
- Plugin
Delete
renamed toBackspace
. And it is highly refractory.
- Open localhost in browser on
npm start
- Added
Async.prototype.delay
method
await editor.async.delay(1000);
alert('Alert after 1s');
- Added
Ajax.options.responseType
optionXMLHttpRequestResponseType
- Added
Response.prototype.blob()
method
const ajax = new Jodit.modules.Ajax({ responseType: 'blob' });
await ajax.send().then(resp => resp.blob());
- Added handling of
contenteditable = false
elements to the pluginBackspace
. - es2021 build don't works properly starting from jodit 3.9.4 #758
- shadow dom support only partly fixed #746
- The hotkeys have been castled in the Delete plugin: Was:
const hotkeys = {
delete: ['delete', 'cmd+backspace'],
deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
backspace: ['backspace'],
backspaceWord: ['ctrl+backspace']
};
But the setting was called incorrectly, when the combination was pressed, not one word was deleted, but a whole sentence. Now added one more setting:
const hotkeys = {
delete: ['delete', 'cmd+backspace'],
deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
deleteSentence: ['ctrl+shift+delete', 'cmd+shift+delete'],
backspace: ['backspace'],
backspaceWord: ['ctrl+backspace'],
backspaceSentence: ['ctrl+shift+backspace', 'cmd+shift+backspace']
};
- fixed sync between WYSIWYG and source editor
- Update
TypeScript@4.5.2
- In
IJodit.getEditorValue
added second argument for using withafterGetValueFromEditor
event. You can see example insource
plugin. - In UIButton
state.status
changed tostate.variant
beforeClose
event can prevent closing the dialog
const dialog = new Jodit.modules.Dialog();
dialog.setContent('Hello world!').open();
dialog.e.on('beforeClose', () => confirm('Are you sure?'));
- fix: Proxy blur event to parent triggered on the ACE editor
- Feature request: Open the inline toolbar without having to highlight text. #600
Allow open inline toolbar. This feature is implemented on the basis of the
inline-popup
plugin, a setting has been added to it:popup.toolbar
, which lists the buttons that will be shown in such a toolbar. Added theshowInline
method to theToolbarEditorCollection
itself:
const editor = Jodit.make('#editor', {
preset: 'inline',
popup: {
toolbar: Jodit.atom(['bold', 'italic', 'image'])
}
});
editor.s.focus();
editor.toolbar.showInline();
// or
editor.e.fire('showInlineToolbar');
Also added ToolbarCollection.hide
and ToolbarCollection.show
methods.
const editor = Jodit.make('#editor');
editor.toolbar.hide();
editor.toolbar.show();
- Allow use prototype as component name
console.log(Jodit.modules.UIButton.getFullElName('element')); // jodit-ui-button__element
console.log(Jodit.modules.UIButton.componentName); // jodit-ui-button
- Remember last opened folder with FileBrowser #675
Boolean option
filebrowser.saveStateInStorage
split to dictionary:
interface IFileBrowserOptions {
saveStateInStorage:
| false
| {
storeLastOpenedFolder?: boolean;
storeView?: boolean;
storeSortBy?: boolean;
};
}
By default:
opt = {
saveStateInStorage: {
storeLastOpenedFolder: true,
storeView: true,
storeSortBy: true
}
};
Disable it:
Jodit.make('#editor', {
filebrowser: {
saveStateInStorage: false
}
});
// or
Jodit.make('#editor', {
filebrowser: {
saveStateInStorage: {
storeLastOpenedFolder: false
}
}
});
- Spacer in Button Toolbar
In addition to the
|
metacharacters and\n
which stand for separator and newline, the---
metacharacter has appeared, which allows you to add a spacer element which pushes all buttons behind the spacer to the right side of the toolbar and creates space in the middle.
Jodit.make('#editor', {
buttons: [
'source',
'bold',
'|',
'---',
'|',
'brush',
'about',
'\n',
'italic'
]
});
- Changed style resize rectangle for resize image or table
- Added link
POWERED BY JODIT
in statusbar - Changed icon for resize handle in the bottom right corner
- Fixed popup color for dark theme
- Change html tags when list style on/off #738
- order list/unorder list in source view #732
- dots supplementary buttons shown incorrectly #692
- Jodit adds unexpected tag when user lefts cursor inside <script> tag #687
- The style
table-layout: fixed
has been removed from tables. When inserting a table, the width of the columns is immediately set for it.
- Removed
Travis.CI
👋👋👋 EventsNative
module - renamed toEventEmitter
const editor = Jodit.make('#editor');
console.log(editor.e instanceof Jodit.modules.EventEmitter); // true
console.log(editor.events instanceof Jodit.modules.EventEmitter); // true
console.log(editor.events instanceof Jodit.modules.EventsNative); // true, deprecated
- BOOM: Move Ajax class into
request
folder.
import { Ajax } from 'jodit/core/request';
- Changed the signature of the send method in the Ajax API and is closer to the fetch () API
const editor = Jodit.make('#editor');
// Before
await new Ajax(editor, {
url: 'index.php'
}).send(); // {success: true, data: ...}
// Now
await new Ajax(editor, {
url: 'index.php'
})
.send()
.then(resp => resp.json()); // {success: true, data: ...}
- In
.npmignore
added:- build-system/
- test.html
- .eslintrc.js
- .eslintignore
- .editorconfig
- .gitignore
- .prettierrc.json
- .stylelintrc
- app.css
- composer.json
In Dom
module added nextGen
and eachGen
methods. These methods return generators:
const editor = Jodit.make('#editor');
editor.value = '<ul><li><img>1</li><li>2</li><li>3</li></ul>';
const gen = Dom.nextGen(editor.editor.querySelector('img'), editor.editor);
let next = gen.next();
while (!next.done) {
console.log(next.value); // 1, LI, 2, LI, 3
next = gen.next();
}
const gen2 = Dom.eachGen(editor.editor);
let next2 = gen2.next();
while (!next2.done) {
console.log(next2.value); // UL, LI, 1, LI, 2, LI, 3
next2 = gen2.next();
}
- Indent doesn't work in table cell #729
- cleanHTML replaceOldTags doesn't seem to do anything #728
- Fixed Resize column table #712
- Font and font size settings are not applied to all text if part of it has been changed earlier #706
- Delete multi rows and colums #690
- When {"enter": "BR"} option is enabled, adding a heading to the text causes it to become wrapped by a "h*" tag #547
- Issue with clear format on
tags #680
- The build system is divided into modules and is now located in the 'build-system' folder, the
src/utils
folder has been moved to it.
- When I merged some cells by dragging it to change its width. #737
- Color dropdown looks broken #736
- all popups and dialogs are outside shadow dom #731
- shadow dom browser support #730
- fix removal of attributes width and height when editing images
- Fixed work in IE11
- toolbar menus are almost not visible on IE11 #458
- В eventEmitter добавлены методы:
mute(event?: string)
Doesn't start any handler;isMuted(event?: string)
No handlers are triggered for the eventunmute(event?: string)
Returns event handling
const editor = Jodit.make('#editor');
editor.events.on('change', () => {
console.log(editor.value);
});
editor.value = '1'; // Console '1'
editor.events.mute('change');
editor.value = '2'; // Nothing
editor.events.unmute('change');
editor.value = '3'; // Console '3'
- beforeSetNativeEditorValue - get object {value: string} and can change value
- Added
resizer.forImageChangeAttributes=true
option. Issue: xdan#696
// Disable
Jodit.make('#editor', {
resizer: {
forImageChangeAttributes: false
}
});
- The Source button has been moved to the depth of the toolbar as it is not cool for the WYSIWYG editor
- Trying to get in touch regarding a security issue #702
- Scrolling to top of editor bug in Safari. #715
- Refused to run the JavaScript URL because it violates the following Content Security Policy directive #716
- Popup doesn't follow the toolbar on scroll #703
- Fixed the link dialog: the unlink button does not work in some cases, and the selection is not restored
- Rename
Style
toCommitStyle
const editor = Jodit.make('#editor');
const style = new Jodit.ns.CommitStyle({
style: {
color: 'red'
}
});
editor.execCommand('selectall');
style.apply(editor);
Dom
refactoring: fromisNode
,isElement
,isHTMLElement
removedWindow
argument.
Before
const editor = Jodit.make('#editor', { iframe: true });
Dom.isNode({}, editor.ow); // false
Dom.isNode(document.body, window); // true
Dom.isNode(document.body, editor.ow); // true
Dom.isNode(editor.od.body, editor.ow); // true
Dom.isNode(editor.ed.body, editor.ow); // false
Now
const editor = Jodit.make('#editor', { iframe: true });
Dom.isNode({}); // false
Dom.isNode(document.body); // true
Dom.isNode(document.body); // true
Dom.isNode(editor.od.body); // true
Dom.isNode(editor.ed.body); // true
- Added
KeyArrowOutside
, allowing to go outside an inline element if there is no other element after that. - Dictionary of variable values in css, a complete list can be found
here https://github.com/xdan/jodit/blob/main/src/styles/variables.less#L25
const editor = Jodit.make('#editor', { styleValues: { 'color-icon': '#0f0', 'color-text': 'red', colorBorder: 'black', 'color-panel': 'blue' } });
- Toolbar buttons are not read by screen reader correctly #725
- Bug : table & background color #722
- Video links are not reliably converted to an IFrame. #714
- Eraser delete "" tag! #705
- Update Typescript 4.3.2 - and used override keyword.
noImplicitOverride
set true.- Enable
@typescript-eslint/explicit-module-boundary-types
- Remove
type
helper. BuyjQuery
- it was your last part.
- hovering over the text editor triggers hover over source button instantly #138
- Allow insert in image dialog - relative path
- Added
idle
decorator - allow wrap class method inrequestIdleCallback
@component
class UIInput extends UIElement {
@idle()
onSomeEvent() {
console.log('Some data');
}
}
const elm = new UIInput(jodit);
elm.onSomeEvent();
for (let i = 0; i < 5; i += 1) {
console.log(i);
}
Output
1
2
3
4
Some data
- Fixed table cells selection
- isUrl add rtmp schema #677
- The editor is very slow when working with tables in IE #673
- Added
IJodit.waitForReady(): Promise<IJodit>
method.
const jodit = Jodit.make('#editor', {
extraPlugins: ['myPlugin']
});
await jodit.waitForReady(); // wait for all plugins will be initialised
jodit.e.fire('someAsyncLoadedPluginEvent', test => {
alert(test);
});
- Fixed selection restoring after blur and set source mode.
- Fixed bug with fixed width and auto height resizing
- Hot fix
focus
plugin +Select
.save
deny set focus in another place.
- Added
Select
.hasMarkers
method.
-
Added
cursorAfterAutofocus=end
option insideautofocus
plugin. Allow change default autofocus position. Possible valuesstart
,end
. autofocus plugin should focus on the end of the text #649 -
Added
saveSelectionOnBlur=true
option insideautofocus
plugin. Allow restore position after editor has focus after blur.
- Renamed
autofocus
>focus
plugin.
- The
Dom
.wrap
method changed signature - instead IJodit call with ICreate. - The
Select
.restore
method is called with no arguments. It finds the range using the data attribute selector. In theSelect
.save
method addedsilent=false
argument.
Earlier
const editor = Jodit.make('#editor');
const info = editor.s.save();
// Change code
editor.s.restore(info);
Now
const editor = Jodit.make('#editor');
editor.s.save(true); // Do not change current range
// Change code
editor.s.restore();
- 'allowResizeX' option does not work without 'height' option #668
- Pasting link with a colon (:) crashes the browser/makes it unresponsive #667
- Inserting images/videos scrolls user to top of text area #644
- Change event is fired twice after inserting a link #636
- iPhone is out of text selection #632
- Pasting an MS Excel cell inserts the cell as image #474
- Fixed a bug when FONT was inserted into the change history
- Video alignment request #646
- Set
component
property for source textarea with Jodit instance.
<textarea id="editor" cols="30" rows="10"></textarea>
<script>
Jodit.make('#editor');
console.log(document.getElementById('editor').component.value);
document.getElementById('editor').component.filebrowser.open();
</script>
- Hide popup after deleting target node with key press.
- image-editor : onChangeSizeInput #663
- image-editor : switcher #662 Replace buttons to switcher
- Error from ESlint, please fix it #658
- Support Mobile platform’s slide to type feature. #654
- The Jodit eraser tool doesn't work for
tags #652
- Links at the end of editor after unlink #648
- When deleting a file via the context menu - the list of files was not updated.
- Added the ability to open a file browser and any dialog in a new window. To do this, you need to define
the
ownerWindow
field. For example, this can be done so that the file browser opens in a separate popup window.
const editor = Jodit.make('#editor', {
uploader: {
url: 'https://xdsoft.net/jodit/connector/index.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'https://xdsoft.net/jodit/connector/index.php'
}
}
});
// Rewrite default filebrowser instance
editor.e.on('getInstanceFileBrowser', options => {
const win = window.open(
'about:blank',
'File Browser',
'location=0,menubar=0,status=0,toolbar=0,titlebar=0,width=700,height=500'
);
win.document.open();
// Need append css for Jodit
win.document.write(
'<html><head><title>File Browser!</title><link rel="stylesheet" type="text/css" href="./build/es2015/jodit.min.css"></head><body></body></html>'
);
win.document.close();
const browser = new Jodit.modules.FileBrowser({
ownerWindow: win, // set window which will be used for opening
headerButtons: [], // disable buttns - close and fullscreen
fullsize: true,
events: {
beforeOpen: () => {
win.focus();
},
afterClose: () => {
win.close();
}
},
ajax: options.ajax
});
browser.noCache = true; // Becouse window can be closed - create instance on every getInstanceFileBrowser
return browser;
});
- Removed options:
useIframeResizer
,useImgResizer
,useTableResizer
fromresizer
plugin. Instead, addedallowResizeTags
.
Config.prototype.allowResizeTags = ['img', 'iframe', 'table', 'jodit'];
- Error when resizing tables and tables cells
- Image and video resizing in the table does not work correctly
- The link popup closes when trying to add it to an image inside a table. #524
- Fixed a bug when command
emptyTable
didn't work.
- <style> tag wrapping problem #620
- Disable Link Checking #618
- Changing text style undoes text alignment #614
tag is always wraped once when toggle the wysiwyg/source mode #612 - Error when resizing tables and tables cells. #611
- Backspace and Delete have an errant character #597
- Added
classSpan
plugin. Applying some className to selected text. Thanks https://github.com/s-renier-taonix-fr
const editor = new Jodit('#editor', {
controls: {
classSpan: {
list: {
class1: 'Classe 1',
class2: 'Classe 2',
class3: 'Classe 3',
class4: 'Classe 4',
class5: 'Classe 5'
}
}
}
});
- Added
UIFileInput
element. - Added
UIButtonGroup
element.
const group = new UIButtonGroup(jodit, {
label: 'Theme',
name: 'theme',
value: this.state.theme,
radio: true,
options: [
{ value: 'default', text: 'Light' },
{ value: 'dark', text: 'Dark' }
],
onChange: values => {
this.state.theme = values[0].value as string;
}
});
- Enabled
"importsNotUsedAsValues": "error"
intsconfig
- Refactoring
Filebrowser
module - Refactoring
Dialog
module - Added "stylelint-config-idiomatic-order" in style linter
- Added "en" bundle without another languages.
- Replaced
Config
system. You can change default setting in you extensions.
// before
const a = new Jodit();
a.options.allowResizeY; // true
Jodit.defaultOptions.allowResizeY = false;
a.options.allowResizeY; // true
// Now
const a = new Jodit();
a.options.allowResizeY; // true
Jodit.defaultOptions.allowResizeY = false;
a.options.allowResizeY; // false
- Added
promisify
mode indebounce
andthrottle
decorators. - Removed
src/core/ui/form/validators/key-validator.ts
. - Added
Async
.requestIdlePromise
method. - Removed
Helpers
.extend
method. - Added
Helpers
.loadImage
method. - Changed
render
method in state/ui system.
// Before
@component
class UIBtn extends UIElement {
className() {
return 'UIBtn';
}
createContainer() {
const button = this.j.c.element('button');
button.style.color = 'red';
button.classList.add(this.getFullElName('button'));
this.j.e.on('click', button, this.onClick);
return button;
}
@autobind onClick() {
alert('click');
}
}
// Now
@component
class UIBtn extends UIElement {
className() {
return 'UIBtn';
}
render() {
return `<button class="&__button" style="color:red"></button>`;
}
@watch('container:click') onClick() {
alert('click');
}
}
and styles
.jodit-ui-btn__button {
border: 1px solid #ccc;
}
- Fixed es2021 version xdan#585
- Added
async.requestIdleCallback
method https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback. - Focused inputs have box shadow.
- The link and image popup closes automatically on the inline preset. #582
- Preset:inline / Link Popup Closes #515
- Missing autobind-decorator types on the latest release #583
- link does not carry when dragging/dropping #581
- When editor is disabled/readonly (both), list controls are still available by using the arrow bug #572
Execute new command openLinkDialog
. Related: xdan#576
- Removed
useAceEditor
option. xdan#544 - Added
component
andpersistent
decorators
import { component, persistent } from './src/core/decorators';
@component
class Item extends UIElement {
@persistent
options = {
some: true
};
}
const item = new Item(jodit);
console.log(item.options); // {some: true}
item.options = {
some: false
};
const item2 = new Item(jodit); // or reload page
console.log(item.options); // {some: false}
- In
UIInput
addedautocomplete
,clearButton
,icon
options.
- Clear formatting control does not clear all styles (keeps underline and strikethrough) #575
- Reset in size change not rescaling image #568
- Backspace in beginning of a _ styled_ line does not affect the line positioning #567
- Table cell elements are always left-aligned #550
- editor.destruct throws error #543
- How I can get Iframe without parent element ... #540
- Layout bug and drag&drop image loading #536
- Popups are not showing at all on Legacy Edge #531
- Fixed a bug when the search bar was shown in the scrolling editor, the editor was scrolled up. And the search box was not in sticky mode.
Jodit.Array
and Jodit.Object
marked as deprecated. In 3.5
they will be removed. Instead, use Jodit.atom
.
const editor = Jodit.make('#editor', {
buttons: Jodit.atom(['bold', 'italic']),
popup: {
img: Jodit.atom({
// full rewrite
})
}
});
Related with xdan#574. In some cases need to limit size of undo history.
- @property {"input"|"select"|""} link.modeClassName="input" Use an input text to ask the classname or a select or not ask
- @property {boolean} link.selectMultipleClassName=true Allow multiple choises (to use with modeClassName="select")
- @property {number} link.selectSizeClassName=3 The size of the select (to use with modeClassName="select")
- @property {IUIOption[]} link.selectOptionsClassName=[] The list of the option for the select (to use with modeClassName="select")
- ex: [
-
{ value: "", text: "" },
-
{ value: "val1", text: "text1" },
-
{ value: "val2", text: "text2" },
-
{ value: "val3", text: "text3" }
-
PR: xdan#577 Thanks @s-renier-taonix-fr
]
Issue xdan#535
const editor = Jodit.make('#editor', {
statusbar: false
});
console.log(editor.statusbar.isShown); // false
editor.statusbar.show();
console.log(editor.statusbar.isShown); // true
The buttons
option can contain named groups of buttons. Each plugin decides which button belongs to which group. Thus,
if you turn off the plugin, then its buttons will not be shown either. Available
groups: ["source", "font-style", "script", "list", "indent", "font", "color", "media", "state", "clipboard", "insert", "history", "search", "other", "info"]
;
const editor = Jodit.make('#editor', {
buttons: [
{
group: 'custom',
buttons: []
},
'bold'
]
});
Jodit.defaultOptions.controls.someButton = {
icon: 'pencil',
command: 'selectall'
};
Jodit.plugins.add('somePlugin', function (editor) {
editor.registerButton({
name: 'someButton',
group: 'custom'
});
});
Added hotkey settings for Delete and Backspace buttons. And added hotkey ctrl+backspace
for removing left part of
text. Issue: xdan#532
Jodit.make('#editor', {
delete: Jodit.atom({
hotkeys: {
delete: ['delete', 'cmd+backspace'],
deleteWord: [
'ctrl+delete',
'cmd+alt+backspace',
'ctrl+alt+backspace'
],
backspace: ['backspace'],
backspaceWord: ['ctrl+backspace']
}
})
});
const editor = Jodit.make('#editor');
editor.events
.one('keydown', () => {
console.log('Fire only one time');
})
.on('keydown', () => {
console.log('Fire everytime');
});
Added extraIcons
option. By default, you can only install an icon from the Jodit suite. You can add your icon to the
set using the Jodit.modules.Icon.set (name, svg Code)
method. But for a declarative declaration, you can use this
option.
Jodit.modules.Icon.set('someIcon', '<svg><path.../></svg>');
const editor = Jodit.make({
extraButtons: [
{
name: 'someButton',
icon: 'someIcon'
}
]
});
const editor = Jodit.make({
extraIcons: {
someIcon: '<svg><path.../></svg>'
},
extraButtons: [
{
name: 'someButton',
icon: 'someIcon'
}
]
});
const editor = Jodit.make({
extraButtons: [
{
name: 'someButton',
icon: '<svg><path.../></svg>'
}
]
});
- xdan#514 Run command insertUnorderedList & insertOrderedList should replace all headings (h1, h2, etc.) to ul>li
- xdan#513 allow set percentage and another points inside width and height inputs
- xdan#489
In textIcons - besides
boolean
, you can putfunction(key: string): boolean
;
var editor = new Jodit('#editor', {
textIcons: key => key !== 'bold'
});
Added maxHeight
option.
const jodit = Jodit.make('#editor', {
minHeight: 200,
maxHeight: 500
});
- Fixed xdan#456
- Fixed xdan#454
- Fixed xdan#453
- Fixed xdan#451
- Fixed xdan#444
- Fixed xdan#428
- Fixed xdan#427
- Fixed xdan#426
- Fixed xdan#222
- Added Find and Preview buttons
- xdan#417
Added
defaultFontSizePoints
options. Possible valuespt
orpx
. By default:px
const editor = new Jodit('#editor', {
defaultFontSizePoints: 'pt'
});
- xdan#449
Added
showCharsCounter
options.
const editor = new Jodit('#editor', {
language: 'en',
showCharsCounter: true,
countHTMLChars: true
});
editor.value = '<p>Simple text</p><p>Simple text</p>';
const statusbar = editor.container.querySelector('.jodit-status-bar');
expect(statusbar.textContent.match(/Chars: 36/)).is.not.null;
- xdan#424
Fixed
allowTabNavigation
By default:false
.
const jodit = new Jodit('#editor', {
allowTabNavigation: true // enable tab navigation between toolbar's buttons
});
- xdan#408
- xdan#405
- xdan#404 See more in Features
- xdan#400
- xdan#398
- xdan#396
- xdan#393
- xdan#392
- xdan#391
- xdan#385
- xdan#378
- xdan#369
- xdan#360
- xdan#352
- Fixed unde-redo subsystem for source mode
- All
less
variables were replaced to css custom properties for modern browsers. - Added
WrapNodes
plugin - it wrap all alone text node(or inline elements) insideoptions.enter
element. You can disable this behaviour:
const editor = Jodit.make('#editor', {
disablePlugins: ['WrapNodes']
});
- Added
shadowRoot
option for ShadowDom support.ACE source editor does not support Shadow Dom
<div id="editor"></div>
const app = document.getElementById('editor');
app.attachShadow({ mode: 'open' });
const root = app.shadowRoot;
root.innerHTML = `
<link rel="stylesheet" href="./build/jodit.css"/>
<h1>Jodit example in Shadow DOM</h1>
<div id="edit"></div>
`;
var editor = new Jodit(root.getElementById('edit'), {
globalFullSize: false,
shadowRoot: root
});
editor.value = '<p>start</p>';
- From
NativeEvent.on
method was removedselector
argument. It wasjQuery.live
style. Example:
<div class="test">
<button>1</button>
<button>2</button>
</div>
Earlier, you can use something like this
editor.events.on(
document.querySelector('div'),
'click',
function () {
alert(this.innerText);
},
'button'
);
Now, you should use event.target
editor.events.on(document.querySelector('div'), 'click', function (e) {
alert(e.target.innerText);
});
Select.applyCSS
was renamed toSelect.applyStyle
const editor = Jodit.make('#editor');
editor.s.applyStyle({ color: 'red' }); // will add to all selection text - red color
FileBrowser
,Dialog
etc. modules which extendView
has only one argument in the constructor - options. Before:
const editor = Jodit.make('#editor');
const fb = Jodit.modules.FileBrowser(editor, {
ajax: {
url: 'https://xdsoft.net'
}
});
fb.open();
fb.close();
editor.destruct();
fb.open(); // error, fb is already destructed
Now:
const editor = Jodit.make('#editor');
const fb = Jodit.modules.FileBrowser({
ajax: {
url: 'https://xdsoft.net'
}
});
fb.open();
fb.close();
editor.destruct();
fb.open(); // Normal
fb.destruct();
//or
editor.e.on('beforeDestruct', () => {
fb.destruct();
});
- Split
table
plugin onselect-cells
andresize-cells
plugins.useTableProcessor
was removed. Instead, use
Jodit.make('#editor', {
table: {
allowCellSelection: true,
selectionCellStyle: 'border: 1px double #1e88e5 !important;',
allowCellResize: true,
useExtraClassesOptions: true
}
});
- All
less
files were moved near with TS. Class naming was changed closer to BEM. - Removed
PopupList
andPopup
. Instead, use onlyPopupMenu
. - Added
ui.button
andui.list
for working with buttons.toolbar.button
extendsui.button
. UIButton - is reactive:
const button = new UIButton();
button.state.activated = true; // will automatically change setAttribute('area-pressed', 'true')
button.state.icon = 'plus'; // will add `svg` icon in container
// or use `setState`
button
.setState({
text: 'Click me'
})
.onAction(() => {
Jodit.Alert('Click');
})
.appendTo(document.body); // will append it inside the body
- In
tsconfig
added decorators supports. Methods that need binding binds with@autobind
decorator. - Added
watch
decorator. - All filenames were renamed to kebab-case.
- Added short aliases for. Can be used as chain -
this.j.e.on
this.jodit
=>this.j
this.options
=>this.o
this.selection
=>this.s
this.create
=>this.c
this.events
=>this.e
this.ownerDocument
=>this.od
this.ownerWindow
=>this.ow
this.editorDocument
=>this.ed
this.editorWindow
=>this.ew
- Change name
Dialog
.setTitle
toDialog
.setHeader
- Remove
Create.inside
field and instead addedJodit.createInside
- In popups added position strategies:
'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop'
etc.
- Added
Dom
.isTag
method
const editor = Jodit.make('#editor');
const a = editor.createInside.element('a');
const br = document.createElement('br');
Jodit.modules.Dom.isTag(a, 'a'); // true
Jodit.modules.Dom.isTag(br, 'br'); // true
- Added
Helpers
.call
method
const f = Math.random();
Jodit.modules.Helpers.call(f > 0.5 ? Math.ceil : Math.floor, f);
- Added
Helpers
.position
method - Helper function to get an element's exact position
console.log(Jodit.modules.Helpers.position(editor.editor.querySelector('p')));
- In
link
plugin addedformTemplate
andformClassName
options #333
const editor = getJodit({
link: {
formTemplate: function () {
return '<form class="form_url"><input ref="url_input" type="url"><button>save</button></form>';
},
formClassName: 'some_class'
}
});
- Added deprecated mechanism. Some methods will not be removed and only will be marked as deprecated until major release. #330
Added createAttributes
option #243
All elements which will be inserted in editor will be created with these attributes
const editor2 = Jodit.make('#editor', {
createAttributes: {
div: {
class: 'test'
},
ul: function (ul) {
ul.classList.add('ui-test');
}
}
});
const div2 = editor2.createInside.div();
expect(div2.className).equals('test');
const ul = editor2.createInside.element('ul');
expect(ul.className).equals('ui-test');
Fixed SPLIT_MODE
Added editHTMLDocumentMode
in order to allow the user to edit the entire
document #241.
Also added iframeTitle
and iframeDoctype
options
const editor = Jodit.make('#editor', {
iframe: true,
iframeTitle: 'Hello world!',
iframeDoctype: '<!DOCTYPE html>',
editHTMLDocumentMode: true,
iframeStyle: ''
});
console.log(editor.value);
// <html dir="" class="jodit" lang="en" spellcheck="true" style="min-height: 113px;">
// <head>
// <title>Hello world!</title>
// </head>
// <body class="jodit-wysiwyg" style="outline:none">test test <a href="#">test</a></body>
// </html>
Fixed xdan#316 Fixed bug when Jodit was initialized inside iframe.
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const win = iframe.contentWindow;
const doc = win.document;
doc.open();
doc.write(
'<html><body><textarea id="editor"></textarea><' +
'script src="./build/jodit.js"><' +
'/script></body></html>'
);
doc.close();
Jodit.make('#editor', {
ownerWindow: win,
ownerDocument: doc
});
Fixed bug with ProgressBar - it simply does not work(
Source plugin was separated on several classes. Now you can choose SourceEditor or make yourself (xdan#242)
Before
Jodit.make('#editor', {
useAceEditor: true
});
Now
Jodit.make('#editor', {
sourceEditor: 'area' || 'ace' // || 'mirror' in PRO
});
In PRO version you can choose mirrror&
- Added Async module for control asynchronous operations
const editor = new Jodit('#editor');
setTimeout(() => {
editor.s.insertHTML('Hello!');
}, 1000);
editor.async.setTimeout(() => {
editor.s.insertHTML('World!');
}, 1000);
editor.destruct();
After destruct the first timeout will throw the error, but second will be cleared.
Added two methods setPanel and addPlace
<textarea id="editor"></textarea>
<textarea id="editor2"></textarea>
<textarea id="editor3"></textarea>
<div id="toolbar"></div>
const editor = new Jodit('#editor');
editor.setPanel('#toolbar');
//add id instance to editor
editor.addPlace('#editor2');
editor.addPlace('#editor3');
Added afterRemoveNode
event
const editor = new Jodit('#editor');
editor.events.on('afterRemoveNode', node => {
if (node.nodeName === 'IMG') {
fetch('delete.php', { image: node.src });
}
});
Before
Jodit.plugins.insertText = function (editor) {
editor.events.on('someEvent', function (text) {
editor.s.insertHTMl('Hello ' + text);
});
};
Now
Jodit.plugins.add('insertText', function (editor) {
editor.events.on('someEvent', function (text) {
editor.s.insertHTMl('Hello ' + text);
});
});
console.log(Jodit.plugins.get('insertText'));
Jodit.plugins.remove('insertText');
Inside plugin, you can use several fields:
// emoji.js
class Emoji {
hasStyle = true; //
requires = ['autocomplete'];
init(editor) {
// this code will be execute only after autocomplete.init
}
}
Jodit.plugins.add('emoji', Emoji);
And inside you init code
Jodit.make('#editor', {
basePath: 'https://sitename.com/somepath/',
extraPlugins: ['emoji']
});
It will try to download
https://sitename.com/somepath/plugins/emoji/emoji.js
hasStyle = true;
means try download and include in page style file:
https://sitename.com/somepath/plugins/emoji/emoji.css
In plugins/example
folder you can find an example.
extraPlugins option allows appending in editor extra plugins from npm, bower etc.
In Build system was added gulp subsystem to build extra plugins. You can make extra plugins like plugins/example
and
after build, this plugin will not be inside jodit.min.js
file. It will be in separate folder (
eg build/plugins/emoji/
).
Also in root you can find make.js
file for install your plugin in build system.
Added zIndex
option
var editor = new Jodir('.editor', {
zIndex: 10000
});
- Fix table editor in iframe mode
- Fix styles
- Added
useIframeResizer
option for resize IFRAME tag - Added
offsetTopForAssix
option. For example, in Joomla, the top menu bar closes Jodit toolbar when scrolling. Therefore, it is necessary to move the toolbar Jodit by this amount
var editor = new Jodit('#editor', {
offsetTopForAssix: 74
});
Without affix offset With affix offset
Added Embed video
button. Added vimeo
or youtube
video embeded code.
When you insert text into the editor from another site, all the images are from a remote site. Before Jodit, it was quite uncomfortable: first I had to download the image from a remote resource, and then upload it to your site, then replace the image in the editor. In 2.5.54 it can be done in 3 clicks
Note
. Need update PHP Connector
Added Jodit.focus method
var editor = new Jodit('.redactor');
editor.focus();
Added OK
button in Alert dialog
Jodit.Alert('File was uploaded');
Jodit.Alert('File was uploaded', 'Message');
Jodit.Alert('File was uploaded', function () {
$('form').hide();
});
Jodit.Alert("File wasn't uploaded", 'Error', function () {
$('form').hide();
});
Jodit.Promt('Enter your name', function (name) {
if (name.length < 3) {
Jodit.Alert('The name must be at least 3 letters');
return false;
}
// do something
});
Jodit.Promt('Enter your name', 'Promt Dialog', function (name) {
if (name.length < 3) {
Jodit.Alert('The name must be at least 3 letters');
return false;
}
// do something
});
Jodit.Confirm('Are you sure?', function (yes) {
if (yes) {
// do something
}
});
First step for Mobile-friendly sizeLG,sizeMD,sizeSM and sets of buttons for different sizes editors.
Note
. this is not the width of the device, the width of the editor
- buttons The list of buttons that appear in the editor's toolbar on large places (≥ options.sizeLG).
- buttonsMD The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).
- buttonsSM The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).
- buttonsXS The list of buttons that appear in the editor's toolbar on tiny places (< options.sizeSM).
var editor = new Jodit('#some-editor', {
sizeLG: 900,
sizeMD: 700,
sizeSM: 400,
buttons: [
'source',
'|',
'bold',
'italic',
'|',
'ul',
'ol',
'|',
'font',
'fontsize',
'brush',
'paragraph',
'|',
'image',
'table',
'link',
'|',
'left',
'center',
'right',
'justify',
'|',
'undo',
'redo',
'|',
'hr',
'eraser',
'fullsize',
'about'
],
buttonsMD: [
'source',
'|',
'bold',
'italic',
'|',
'ul',
'ol',
'|',
'font',
'fontsize',
'brush',
'paragraph',
'|',
'image',
'table',
'link',
'|',
'left',
'center',
'right',
'justify',
'|',
'undo',
'redo',
'|',
'hr',
'eraser',
'fullsize'
],
buttonsSM: [
'bold',
'italic',
'|',
'ul',
'ol',
'|',
'fontsize',
'brush',
'paragraph',
'|',
'image',
'table',
'link',
'|',
'left',
'center',
'right',
'|',
'undo',
'redo',
'|',
'eraser',
'fullsize'
],
buttonsXS: [
'bold',
'image',
'|',
'brush',
'paragraph',
'|',
'left',
'center',
'right',
'|',
'undo',
'redo',
'|',
'eraser'
]
});
- More comfortable colorpicker
- Added Helper.normalizeColor
- Fixed Helper.colorToHex now for transparent color it will return NaN
- Fixed bug in Image Resizer when border was less than Image
- Rename Selection.setCursorTo to Selection.moveCursorTo
- Fixed style for Dialog resizer
Fix a few bugs in JJE
- In Helper module added [isHTML] method. Used plugin
insertHTML
- Added simple plugin
insertHTML
and him optionaskBeforePasteHTML
- Ask before paste HTML in WYSIWYG mode. Try insert in WYSIWYG mode some HTML source
(function ($) {
'use strict';
Jodit.defaultOptions = $.extend(true, Jodit.defaultOptions, {
/**
* @property {boolean} askBeforePasteHTML=true Ask before paste HTML in WYSIWYG mode
*/
askBeforePasteHTML: true
});
/**
* Ask before paste HTML source
*/
Jodit.plugins.insertHTML = function (parent) {
if (parent.options.askBeforePasteHTML) {
parent.events.on('beforePaste', function (event) {
if (
event &&
event.clipboardData &&
event.clipboardData.getData &&
event.clipboardData.types[0] === 'text/plain'
) {
var html = event.clipboardData.getData('text/plain');
if (parent.helper.isHTML(html)) {
Jodit.Confirm(
'Your code is similar to HTML. Paste as HTML?',
'Paste as HTML',
function (agree) {
if (agree) {
parent.s.insertHTML(html);
} else {
parent.s.insertHTML(
parent.helper.htmlspecialchars(html)
);
}
parent.syncCode(true);
}
);
return false;
}
}
});
}
};
})(Jodit.modules.Dom);
Fix #issue 11 in file:
mode CDN CodeMirror not working
- Added
Filter
in FileBrowser - Added
SortBy
in FileBrowser
- Fixed bug in
Beautifier
plugin. When insource
mode, start comment enter<!--
Browser stops responding. - Added
tiles
andlist
switcher in filebrowser
- In PHP FileBrowser connector added MaxFileSize option
- Fixed popap error in filebrowser
Fix Splitmode autohaight Fix syncronize code in TableProcessor module
Fix bug in Dialog.Confirm
Jodit.Confirm('Are you sure?', 'Confirm', function (success) {
if (success) {
alert('Agree');
}
});
- Fixed IE11's bug http://xdsoft.net/jodit/doc/module-Jodit.html#comment-2866837441
- Added textIcons options - Use text instead of icons. In IE9 it is default - true Example
var editor = new Jodit('#example2_0', {
textIcons: true,
removeButtons: [
'hr',
'ol',
'about',
'italic',
'format',
'fullsize',
'justify'
]
});
Dom Module is now compatible with jQuery objects
var a = jQuery('<a href="#link">Link</a>');
jodit.modules.Dom('.selector').append(a);
jodit.modules.Dom(jQuery('#someid')).val();
jodit.modules.Dom('#someid').val();
But you must remember that Jodit.modules.Dom! = JQuery
- Added
expand button
In filebrowser - Added fullsize and fullsizeButton options
- Fix Dom.prev method
- Added navigation and select in preview
- Added showSelectButtonInPreview and showPreviewNavigation
Added cleanHTML.allowTags option.
var editor = Jodit('#editor', {
allowTags: 'p,a[href],table,tr,td, img[src=1.png]' // allow only <p>,<a>,<table>,<tr>,<td>,<img> tags and for <a> allow only `href` attribute and <img> allow only `src` atrribute == '1.png'
});
editor.val(
'Sorry! <strong>Goodby</strong> <span>mr.</span> <a style="color:red" href="http://xsoft.net">Freeman</a>'
);
console.log(editor.val()); //Sorry! <a href="http://xsoft.net">Freeman</a>
Or you can use PlainObject. This code equivalent to the top
var editor = Jodit('#editor', {
allowTags: {
p: true,
a: {
href: true
},
table: true,
tr: true,
td: true,
img: {
src: '1.png'
}
}
});
Fixed bug in Image plugin
Fixed bug in JJE
- Fixed a few styles
- Fixed
package.json
- Added in FileBrowser sort options
- Jodit.Promt and Jodit.Alert by default set focus to OK button
Jodit.Promt('Enter your name', function (name) {
if (!name.length) {
Jodit.Alert('You need enter 3 chars');
return false;
}
//... some logic
});
- Fix
$config
bug in JJE - Added a few options in JJE plugin
Added edit button in Image Properties Dialog
- Added file info in filebrowser
- Added showFileName,showFileSize,showFileChangeTime
- Dom module was rewritten and was fixed afew bugs
- In OEM and Pro added Image Editor module resize and crop image. You can try here
- Added contextmenu module.
- Added context menu in FileBrowser
- Added preview in FilwBrowser
- Fixed TableProcessor's bugs. In a situation did not appear resizer cells and the resizer throughout the table.
- Fixed z-index Popap
- Fixed behavior of selection table cells
Fixed copy-paste html behavior
Fixed bug on after type Enter
Fixed bug with insert OL
tag and Fixed Dom module work with Text node
Added toolbarButtonSize Size of icons in the toolbar (can be "small", "middle", "large")
var editor = new Jodit('#editor', {
toolbarButtonSize: 'small'
});
- Added node.create method
var editor = new Jodit('.jodit'),
node = editor.node.create('text', 'Hellow world');
editor.s.insertNode(node);
- Added link plugin. And its options
- processPastedLink Wrap inserted link
in
<a href="link">link</a>
- openLinkDialogAfterPost Open Link dialog after post
- removeLinkAfterFormat When the button is pressed to
clean format, if it was done on the link is removed like command
unlink
- processPastedLink Wrap inserted link
in
- Replace format icon
Fixed Base icons issue
Fast Fixed in JJE Fixed a lot of bugs in Jodit
- Fixed a lot of bugs in Dom module
- Fixed a lot of bugs in TableProcessor module
- Replace PNG icon on SVG sprite
- Added new module Icons
- Added theme
Dark
- Fixed bug Popap's module
- Divide one less file by modules
- Added Cookie module
- Added saveModeInCookie if it is true that the current mode is saved in a cookie , and is restored after a reload of the page
- In Joomla Jodit Editor(JJE) added corresponding option saveModeInCookie Download Jodit Joomla editor
- Fixed issue with
input[type=checkbox]
and Dom.attr method - Release Joomla Jodit Editor (JJE) Download JJE
- Added option cleanHTML.cleanOnPaste The plugin cleanHTML automatically cleans up content from Microsoft Word and other HTML sources to ensure clean, compliant content that matches the look and feel of the site.
- Added beforePaste,processPaste,afterPaste events
Added iframeBaseUrl option - Base URL where the root directory for iframe mode
Added spellcheck option specifies whether the editor is to have its spelling and grammar checked or not
Added removeEmptyBlocks option - Remove empty blocks
var editor = new Jodit('#editor', {
removeEmptyBlocks: false
});
editor.val(' '); // add space in editor
console.log(editor.val()); //<p> </p>
editor.options.removeEmptyBlocks = true;
editor.val(' ');
console.log(editor.val()); //''
- Fixed critical bug in Safari (window.performance)
- Fixed bug when editor can get selection from another place
Added direction option. The writing direction of the language which is used to create editor content. Allowed values are:
- '' (an empty string) – Indicates that content direction will be the same as either the editor UI direction or the page element direction.
- 'ltr' – Indicates a Left-To-Right text direction (like in English).
- 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).
Fixed styles bugs
When filebrowser.showFoldersPanel === false show 4 colums in filelist
- Added filebrowser.moveFolder option. Allow/deny move folder
- Added filebrowser.moveFile option. Allow/deny move file
- Added filebrowser.showFoldersPanel option. Hide/show folders panel in filebrowser
Fixed Filebrowser uploader's options bug. Previously , you had to either use a general Uploader module settings , or override them completely
var editor = new Jodit('.redactor', {
filebrowser: {
uploader: null
},
uploader: {
url: 'uploader.php',
format: 'json'
}
});
// or
var editor = new Jodit('.redactor', {
filebrowser: {
uploader: {
url: 'uploader.php',
format: 'json',
filesVariableName: 'fils'
//... all options from [uploader](http://xdsoft.net/jodit/doc/Jodit.defaultOptions.html#uploader)
}
}
});
Now you can just override some of your settings
var editor = new Jodit('.redactor', {
filebrowser: {
uploader: {
url: 'uploader2.php'
}
},
uploader: {
url: 'uploader.php'
}
});
- Fixed i18n bug
- useSplitMode set default false
- Fixed toolbar width after fullsize mode
- Fixed #issue5
Fast fix
- Added plugin
Fullsize
. Now you can change fullsize mode
var editor = new Jodit();
editor.events.fire('toggleFullsize');
editor.events.fire('toggleFullsize', [true]); // fullsize
editor.events.fire('toggleFullsize', [false]); // usual mode
- Added globalFullsize (default
true
) if true, afterfullsize
- all parents element getjodit_fullsize_box
class (z-index: 100000 !important;) - Fixed focus bug
- Fixed placeholder style
- Fixed Dom.css then
<div class="idclass" style="margin-top:20px;"></div>
Jodit.modules.Dom('.idclass').css('margin-top'); //has returned string `20px`
Jodit.modules.Dom('.idclass').css('margin-top'); //now it returns int `20`
- Fixed placeholder style. Placeholder placed in a separate module Placeholder
- Added showPlaceholder option
- Added useInputsPlaceholder option
- Added placeholder option
Added uploader.data option. Data to be sent to the server like POST parameters
Added editorCssClass option - Class name that can be appended to the editor Fixed internacionalization
Added triggerChangeEvent option Fixed uploader's options - When the uploader is not configured, the editor still displays images upload button
Add Dom.defaultAjaxOptions.async By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false
Added headers
option in [[FileBrowser]] and [[Uploader]]. But primarily in [[Dom]]
var token = document
.querySelector('meta[name="csrf-token"]')
.getAttribute('content'),
editor = new Jodit('#redactor', {
uploader: {
url: '../connector/index.php?action=upload',
headers: {
'X-CSRF-Token': token
}
},
filebrowser: {
ajax: {
url: '../connector/index.php',
headers: {
'X-CSRF-Token': token
}
}
}
});
// or replace global options
Jodit.modules.Dom.defaultAjaxOptions.headers = {
headers: {
'X-CSRF-Token': token
}
};
Jodit.modules.Dom.ajax({
url: 'data.json',
headers: {
'Accept-Language': 'en-US,en;q=0.8,ru;q=0.6,de;q=0.4,ja;q=0.2'
},
success: function (resp) {
console.log(resp);
}
});
Fixed #issues1
Fixed dialog's module when was opened Promt window, after Enter submit the form and the page reloaded. Fixed connector's bugs Update Jodit.i18n method. Now it can be used staticly
var editor = new Jodit('#redactor', {
langusage: 'ru'
});
console.log(editor.i18n('Cancel')); //Отмена;
Jodit.defaultOptions.language = 'ru';
console.log(Jodit.prototype.i18n('Cancel')); //Отмена
Jodit.lang.cs = {
Cancel: 'Zrušit'
};
Jodit.defaultOptions.language = 'cs';
console.log(Jodit.prototype.i18n('Cancel')); //Zrušit
Jodit.lang.cs = {
'Hello world': 'Hello 1$ Good 2$'
};
Jodit.defaultOptions.language = 'cs';
console.log(Jodit.prototype.i18n('Hello world', 'mr.Perkins', 'day')); //Hello mr.Perkins Good day
Fixed Jodit.destroy method
var editor = new Jodit('.jodit');
editor.destroy();
Fixed bug when Dialog module was used without Jodit context
Jodit.Alert('Hello world!!!');
Fixed dialog's module zIndex manage. Fixed Dom.css method bug. That example has not worked.
Jodit.modules.Dom('.someelement').css('z-index', 1000);
Fixed bug in Uploader module when http://sitename.net/jodit///files/fg.jpg
was
replaced http:/sitename.net/jodit/files/fg.jpg
Added afterInsertImage
event - triggered after image was
inserted selection.insertImage. This method
can execute from Filebrowser
or Uploader
var editor = new Jodit('#redactor');
editor.events.on('afterInsertImage', function (image) {
image.className = 'bloghead4';
});
Fixed bug with inserting table
Work with table became faster
- Fixed filbrowser bug. When a new file is uploaded file list has not been updated
- Added dialog.zIndex option
Fixed toolbar width fot fullsize mode
- Fixed CodeMirror bug on download XML parser
- Fixed CodeMirror bug endless cycle
- Fixed overflow behavior in fullsize mode
Fixed connector problem and Fixed item's style in filebrowser
Switched on FontAwesome icons
Added copy-paste image file for FireFox
Fixed copy-paste for FireFox
Added copy-paste support by clipboard image. Try paste print screen.
Added the ability in the file browser to obtain data about the file not as a string and as an object with parameters {file: 'name.jpg', thumb: '_thumbs/name.jpg'}
Fixed conflict between textProcessor and Beatyfier plugins
Fixed BACKSPACE entering behavior. And Fixed ie10 support
Added iframe
, iframeStyle
, iframeIncludeJoditStyle
, iframeCSSLinks
, width
, height
, minHeight.
iframe
by default false. When this option is enabled, the editor's content will be placed in an iframe and isolated
from the rest of the page.
width
and height
you can set size fot editor
Added internationalization. Read more http://xdsoft.net/jodit/doc/Jodit.defaultOptions.html#.language
Added Split mode. Added useSplitMode options ( default true) Example here
Fixed dialog bug
Added CodeMirror plugin. Enable by default [[Config.codeMirror]]
We got rid of jQuery
Fixed bug in filebrowser
Fixed bug when selection.insertHTML doesn't work without focus
Fixed bug with uploader and filebrowser
If source textarea
has placeholder
attribute then Jodit use it how placeholder
Added About button
First release