commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
commie
2025-11-21 01:42:54 +08:00
parent ff026c6f32
commit f89196c73c
1953 changed files with 9 additions and 15246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugin/admin/public/libs/froala/html/styling/adjustable_height.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Auto-Adjustable Height</h1>
<p>The editor's height will automatically adjust between the <code>heightMin</code> and <code>heightMax</code>
values to fit the content inside the editable area.</p>
<ul>
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#heightMin" target="_blank"
title="heightMin option">heightMin</a> will prevent the rich text editor&#39;s box being smaller than the
value passed.</li>
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#heightMax" target="_blank"
title="heightMax option">heightMax</a> will prevent the rich text editor&#39;s box being taller than the
value passed. If the text is too long, then the WYSIWYG HTML editor will get a vertical scrollbar.</li>
</ul>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
heightMax: 400,
heightMin: 200
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/font_family.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link
href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext' rel='stylesheet'
type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link
href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext'
rel='stylesheet' type='text/css'>
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Font Family</h1>
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
<p>When using the font_family.min.js plugin it is possible to add your own fonts to be used inside the WYSIWYG
HTML editor.</p>
<p>First you have to include the font on your webpage. In this example we are adding 4 Google fonts: Roboto,
Oswald, Montserrat and Open Sans Condensed. Then you have to define the fonts that should appear in the Font
Family dropdown using the <a href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamily'
title='fontFamily' target='_blank'>fontFamily</a> option. This option is an Object where the key represents
the font name (just the way you would pass it to the font-family CSS rule e.g. font-family: <strong>'Roboto',
sans-serif</strong>;) and its value is the font name that appears in the dropdown list e.g.
<strong>Roboto</strong>.</p>
<p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual
font family for the selected text you can use the <a
href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamilySelection' title='fontFamilySelection'
target='_blank'>fontFamilySelection</a> option.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script>
(function () {
new FroalaEditor("div#edit", {
fontFamily: {
"Roboto,sans-serif": 'Roboto',
"Oswald,sans-serif": 'Oswald',
"Montserrat,sans-serif": 'Montserrat',
"'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
},
fontFamilySelection: true
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/height.html
+48
View File
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Predefined Height</h1>
<p>Set a specific height to the WYSIWYG HTML editor using the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#height" target="_blank"
title="height option">height</a> option. If the text inside is longer, then the rich text editor will get a
vertical scrollbar.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
height: 300
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/inline.html
+67
View File
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Inline Styles</h1>
<p>Using the <code>inline_style.min.js</code> plugin it is possible to add custom style on the selected text
inside the WYSIWYG HTML editor.</p>
<p>Use the Inline Style dropdown to select the desired inline style for the selected text inside the rich text
editor.</p>
<p>Make sure that the <code>inlineStyle</code> button is included in the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons"
title="toolbarButtons">toolbarButtons</a> list. By default the inlineStyle button is already in the list, but
if you changed the buttons list just make sure you don't omit the inlineStyle button.</p>
<p>You can define your own inline styles using the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#inlineStyles" title="inlineStyles">inlineStyles</a>
option. This option is an Object where the key of each property represents the name of the new style and its
value specifies the CSS properties for it. It is important to have unique names for the styles or they will not
work properly.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough'], ['inlineStyle', 'undo', 'redo'] ],
// Define new inline styles.
inlineStyles: {
'Big Red': 'font-size: 20px; color: red;',
'Small Blue': 'font-size: 14px; color: blue;'
}
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/paragraph.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
.class1 {
text-align: center;
color: red;
}
.class2 {
font-weight: 700;
font-size: 14px;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Paragraph Styles</h1>
<p>Using the <code>paragraph_style.min.js</code> plugin it is possible to add custom style on the selected
paragraph inside the WYSIWYG HTML editor.</p>
<p>The classes should be defined in CSS, otherwise no changes will be visible on the paragraph's appearance.</p>
<p>You can define your own paragraph styles using the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#paragraphStyles"
title="paragraphStyles">paragraphStyles</a> option. This option is an Object where the key represents the
class name and its value is the style name that appears in the dropdown list. It is important to have unique
keys otherwise they will not work properly.</p>
<p>By default you can select multiple paragraph styles at a time. If you want to toggle them and allow only one
style to be selected at a time use the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#paragraphMultipleStyles"
title="paragraphMultipleStyles">paragraphMultipleStyles</a> option.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough'], ['paragraphStyle', 'undo', 'redo'] ],
// Define new paragraph styles.
paragraphStyles: {
class1: 'Class 1',
class2: 'Class 2'
}
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/placeholder.html
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
.class1 {
text-align: center;
color: red;
}
.class2 {
font-weight: 700;
font-size: 14px;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Placeholder</h1>
<p>The placeholder text can be customized using the <a
href="http://www.froala.dev/wysiwyg-editor/docs/options#placeholderText"
title="placeholderText option">placeholderText</a> option.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
placeholderText: 'Start typing something...'
})
})()
</script>
</body>
</html>
plugin/admin/public/libs/froala/html/styling/width.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Predefined Width</h1>
<p>Set a specific width to the WYSIWYG HTML editor using the <a
href="https://www.froala.com/wysiwyg-editor/docs/options#width" target="_blank" title="width option">width</a>
option.</p>
</div>
</section>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
width: 400
})
})()
</script>
</body>
</html>