wysiwyg-jquery
Mục lục bài viết
Wysiwyg.JS for NPM
Based on a delicious Wysiwyg.JS:
http://wysiwygjs.github.io/
This is under development yet.
How to install
It is intended to be used with Webpack 2. In the future there might be stand-alone bundle published.
This package peer-depends on jQuery and Font Awesome. It is up to you how you configure those libraries.
However you should “globalize” jQuery because this is jQuery-plugin modifies $.fn, and it relies on jQuery-cached .data(). If you ignore “globalizing” of jQuery this package will not work as expected.
Webpack 2 + jQuery
Method 1: if jQuery is included by old-school method (e.g. from CDN):
- Include your
bundle.jswhich is produced by Webpack 2 after including jQuery:
<
script
src
=
"
https://code.jquery.com/jquery-3.2.1.min.js
"
integrity
=
"
sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=
"
crossorigin
=
"
anonymous
"
>
</
script
>
<
script
src
=
"
/js-bin/bundle.js
"
>
<
/
script
>
This will register window.$ and window.jQuery globals which will be used by the package.
- In your
webpack.config.jsadd the following section:
exports
default
{
externals
:
{
jquery
:
'
jQuery
'
,
}
,
entry
:
}
This will make Webpack 2 to rely on the global window.jQuery when it sees usages of it.
Method 2: if you’d like to pack jQuery with your bundle:
In your webpack.config.js add the entry point:
exports
default
{
entry
:
[
'
jquery
'
,
'
./src/Main.js
'
,
]
,
}
Installing the package:
npm install --save-dev https://github.com/shelart/wysiwyg-jquery.git#develop
How to use
import
WysiwygJquery
from
'
wysiwyg-jquery
'
;
WysiwygJquery
(
$
(
'
#editor
'
)
,
{
callbackWhenEdited
:
(
newHTML
)
=>
{
}
,
buttons
:
{
customButtonKey
:
{
title
:
'
Your tooltip
'
,
image
:
'
\u0000
'
,
click
:
(
$button
)
=>
{
}
,
popup
:
(
$popup
,
$button
)
=>
{
const
$modalWindow
=
$
(
)
;
$popup
.
append
(
$modalWindow
)
;
}
,
showstatic
:
true
,
showselection
:
false
,
}
,
}
,
removeButtons
:
[
'
fontsize
'
,
'
forecolor
'
]
,
imageUploadUrl
:
'
/upload/image
'
,
fileUploadUrl
:
'
/upload/file
'
,
)
;
How to deal with uploading popups
This wrapper includes popups for file & image upload buttons in the WYSIWYG editor. These are written with Bootstrap 3. They should work out of box if your site uses Bootstrap 3. Unfortunately there is no way to customize them yet, but it is planned to add appropriate options, especially i18n dictionary option. Feel free to fork/pull request.
To make the upload routine work you should write a code on the server to deal with forms submitted by the editor.
General Upload Principles
A file is submitted via XMLHttpRequest (via $.ajax()) HTTP POST request as multipart/form-data. The uploaded file will be contained in a field named image or file.
On MSIE 9 a file will be submitted via <form /> with <input type="file" name="image" /> (or <input type="file" name="file" />) by invoking its submit() method targeted to a temporarily created <iframe />.
The server must return a web path of uploaded file.
Image Upload
Among image field WYSIWYG editor also may submit the following fields:
widthis user input of desired width (in pixels) of the image inside the page. It goes asstyle="width: {width}px"attribute of<img />tag.CAUTION: the WYSIWYG editor does not filter user input anyway.
heightis user input of desired height (in pixels) of the image inside the page. It goes asstyle="height: {height}px"attribute of<img />tag.NOTE: this field will present in the form data only if a user unchecks ‘Keep aspect ratio’.
CAUTION: the WYSIWYG editor does not filter user input anyway.
The above fields are submitted only if a user checks ‘Optimize image’ which means the server should resize the uploaded image to desired dimensions.
If height is missing the server should calculate appropriate height to keep aspect ratio.
The server might ignore these fields (width & height). Anyway the WYSIWYG editor puts <img /> with user set sizes. Of course it does mean other users will download a huger image which will cost them traffic.
