├── .gitignore
├── .pa11yci
├── info.json
├── yii2
    ├── assets
    │   ├── FontAweSomeAsset.php
    │   └── RichTextAsset.php
    └── widgets
    │   └── RichTextWidget.php
├── cypress.config.js
├── src
    ├── richtext-colors.scss
    ├── richtext.min.css.map
    ├── richtext.min.css
    ├── richtext.scss
    └── jquery.richtext.min.js
├── .github
    ├── workflows
    │   ├── test.yml
    │   ├── npm_publish.yml
    │   ├── accessibility.yml
    │   └── build.yml
    ├── dependabot.yml
    ├── FUNDING.yml
    ├── PULL_REQUEST_TEMPLATE.md
    └── ISSUE_TEMPLATE
    │   ├── bug-report.md
    │   └── feature-request.md
├── composer.json
├── cypress
    ├── support
    │   ├── e2e.js
    │   └── commands.js
    └── e2e
    │   └── basics.cy.js
├── examples
    ├── css
    │   └── site.css
    ├── fontawesome5.html
    ├── index.html
    └── multipleEditors.html
├── package.json
├── CONTRIBUTING.md
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | vendor/
3 | node_modules/
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.pa11yci:
--------------------------------------------------------------------------------
1 | {
2 |     "defaults": {
3 |         "chromeLaunchConfig": {
4 |             "args": ["--no-sandbox"]
5 |         }
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/info.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name" : "RichText",
3 |   "version" : "1.1.3",
4 |   "source" : "https://github.com/webfashionist/RichText/",
5 |   "info" : "https://github.com/webfashionist/RichText/"
6 | }
7 | 


--------------------------------------------------------------------------------
/yii2/assets/FontAweSomeAsset.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Webfashionist\RichText\yii2\assets;
 4 | 
 5 | use yii\web\AssetBundle;
 6 | 
 7 | class FontAweSomeAsset extends AssetBundle
 8 | {
 9 |     public $sourcePath = '@npm/fortawesome--fontawesome-free';
10 |     public $css = ['css/all.min.css'];
11 | }


--------------------------------------------------------------------------------
/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require("cypress");
 2 | 
 3 | module.exports = defineConfig({
 4 |   e2e: {
 5 |     setupNodeEvents(on, config) {
 6 |       // implement node event listeners here
 7 |     },
 8 |     retries: 0,
 9 |     defaultCommandTimeout: 500,
10 |     baseUrl: "http://localhost:8080"
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------
/src/richtext-colors.scss:
--------------------------------------------------------------------------------
 1 | $highlight: #3498db;
 2 | $alabaster: #fafafa;
 3 | $gallery: #efefef;
 4 | $mine-shaft: #333333;
 5 | $dusty-gray: #999999;
 6 | $black: #000000;
 7 | $white: #ffffff;
 8 | $orange: #ffa500;
 9 | $red: #ff0000;
10 | $emperor: #555555;
11 | $mine-shaft: #282828;
12 | $harlequin: #33ff33;
13 | $curious-blue: #3498db;
14 | 


--------------------------------------------------------------------------------
/yii2/assets/RichTextAsset.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Webfashionist\RichText\yii2\assets;
 4 | 
 5 | use yii\web\AssetBundle;
 6 | use yii\web\YiiAsset;
 7 | 
 8 | class RichTextAsset extends AssetBundle
 9 | {
10 |     public $sourcePath = '@vendor/webfashionist/richtext/src';
11 |     public $js = ['jquery.richtext.min.js'];
12 |     public $css = ['richtext.min.css'];
13 | 
14 |     public $depends = [
15 |         YiiAsset::class,
16 |         FontAweSomeAsset::class,
17 |     ];
18 | }
19 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Cypress Tests
 2 | 
 3 | on: push
 4 | 
 5 | jobs:
 6 |   cypress-run:
 7 |     runs-on: ubuntu-22.04
 8 |     steps:
 9 |       - name: Checkout
10 |         uses: actions/checkout@v4
11 |       # Install NPM dependencies, cache them correctly
12 |       # and run all Cypress tests
13 |       - name: Cypress run
14 |         uses: cypress-io/github-action@v6
15 |         with:
16 |           build: npm run build
17 |           start: npm start
18 |           browser: chrome


--------------------------------------------------------------------------------
/.github/workflows/npm_publish.yml:
--------------------------------------------------------------------------------
 1 | name: NPM Publish
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [published]
 6 | 
 7 | jobs:
 8 |   build:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v3
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: 22
15 |           registry-url: https://registry.npmjs.org/
16 |       - run: npm install
17 |       - run: npm publish --access public
18 |         env:
19 |           NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH}}
20 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "webfashionist/richtext",
 3 |     "version": "1.1.3",
 4 |     "description": "WYSIWYG editor developed as jQuery plugin",
 5 |     "type": "library",
 6 |     "license": "AGPL-3.0",
 7 |     "keywords": ["wysiwyg", "editor", "jquery"],
 8 |     "autoload": {
 9 |         "psr-4": {"Webfashionist\\RichText\\yii2\\": "yii2/"}
10 |     },
11 |     "authors": [
12 |         {"name": "webfashionist"}
13 |     ],
14 |     "prefer-stable": true,
15 |     "require": {
16 |         "npm-asset/fortawesome--fontawesome-free": "^5"
17 |     },
18 |     "repositories": [
19 |         {
20 |             "type": "composer",
21 |             "url": "https://asset-packagist.org"
22 |         }
23 |     ]
24 | }
25 | 


--------------------------------------------------------------------------------
/cypress/support/e2e.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/e2e.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: webfashion # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/examples/css/site.css:
--------------------------------------------------------------------------------
 1 | /* reset */
 2 | * {
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing: border-box;
 6 | }
 7 | 
 8 | 
 9 | /* general */
10 | body {
11 |     background-color: #EFEFEF;
12 | }
13 | 
14 | 
15 | /* page */
16 | .page-wrapper {
17 |     margin: 0 auto;
18 |     width: 960px;
19 |     max-width: 100%;
20 | }
21 | 
22 | 
23 | /* box */
24 | .box-content {
25 |     padding:20px;
26 |     background-color: #EFEFEF;
27 | }
28 | 
29 | 
30 | textarea {
31 |     background-color:#FAFAFA;
32 |     border:#EFEFEF solid 1px;
33 |     color:#333;
34 |     height:150px;
35 |     width:100%;
36 | }
37 | 
38 | 
39 | /* richtext custom style */
40 | .richText {
41 |     margin-top: 40px;
42 |     -webkit-box-shadow: 0 0 20px 0 #999;
43 |     -moz-box-shadow: 0 0 20px 0 #999;
44 |     box-shadow: 0 0 20px 0 #999;
45 | }
46 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | WARNING Pull Requests made to this repository cannot be merged
 3 | 
 4 | If you have not already done so, please read the Contributing document, found here: https://github.com/webfashionist/RichText/blob/master/CONTRIBUTING.md
 5 | 
 6 | The pull requests to this project must be made under the AGPL-3.0 license.
 7 | -->
 8 | 
 9 | ## Overview
10 | 
11 | This pull request [introduces/changes/removes] [functionality/feature].
12 | 
13 | (Please write a summary of your pull request here. This paragraph should go into detail about what is changing, the motivation behind this change, and the approach you took.)
14 | 
15 | 
16 | 
17 | **I understand that:**
18 | 
19 | - [ ] I'm submitting this PR for reference only. It shows an example of what I'd like to see changed but
20 |   I understand that it will not be merged and I will not be listed as a contributor on this project.


--------------------------------------------------------------------------------
/examples/fontawesome5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>RichText example</title>
 6 | 
 7 |     <link rel="stylesheet" href="css/site.css">
 8 |     <link rel="stylesheet" href="../src/richtext.min.css">
 9 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10 |     <script src="../src/jquery.richtext.js"></script>
11 |     <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
12 | 
13 | 
14 | </head>
15 | <body>
16 | 
17 | 
18 | <div class="page-wrapper box-content">
19 | 
20 |     <label for="example">Content</label>
21 |     <textarea class="content" id="example" name="example"></textarea>
22 | 
23 | </div>
24 | 
25 | <script>
26 |     $(document).ready(function() {
27 |         $('.content').richText();
28 |     });
29 | </script>
30 | 
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add('login', (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This will overwrite an existing command --
25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })


--------------------------------------------------------------------------------
/.github/workflows/accessibility.yml:
--------------------------------------------------------------------------------
 1 | name: Accessibility
 2 | on: push
 3 | 
 4 | jobs:
 5 |   accessibility:
 6 |     runs-on: ubuntu-latest
 7 |     steps:
 8 |       - name: Checkout code
 9 |         uses: actions/checkout@v3
10 | 
11 |       - name: Setup PHP
12 |         uses: shivammathur/setup-php@v2
13 |         with:
14 |           php-version: '8.3'
15 |           extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, gd, redis, memcached, openssl
16 |           tools: composer:2.5.8
17 |           coverage: none
18 | 
19 |       - name : Install Node.js
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: '21'
23 | 
24 |       - name: Install npm dependencies
25 |         run: npm install
26 | 
27 |       - name: Serve Files
28 |         run: nohup php -S localhost:8080 -t examples/ &
29 | 
30 |       - name: Run pa11y
31 |         run: |
32 |           ./node_modules/pa11y-ci/bin/pa11y-ci.js http://localhost:8080/index.html
33 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | on:
 3 |   push:
 4 |   pull_request :
 5 | permissions:
 6 |   pull-requests: write # grant write permission on the pull-requests endpoint
 7 | jobs:
 8 |   Build:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - name: Checkout code
12 |         uses: actions/checkout@v3
13 |       - name: Get branch name
14 |         id: branch-name
15 |         uses: tj-actions/branch-names@v9.0.0
16 |       - name: Install dependencies
17 |         run: npm install
18 |       - name: Build development environment
19 |         run: npm run build
20 |       - name: Auto commit changes
21 |         uses: stefanzweifel/git-auto-commit-action@v4
22 |         with:
23 |           branch: ${{ steps.branch-name.outputs.current_branch }}
24 |           commit_message: "build(Minify): Minify CSS/JavaScript [skip actions]"
25 |           commit_user_name: webfashionist
26 |           commit_user_email: info@webfashion.in
27 |           commit_author: webfashionist <info@webfashion.in>
28 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <title>RichText example</title>
 6 | 
 7 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |         <link rel="stylesheet" href="css/site.css">
 9 |         <link rel="stylesheet" href="../src/richtext.min.css">
10 |         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11 |         <script type="text/javascript" src="../src/jquery.richtext.js"></script>
12 | 
13 | 
14 | 
15 |     </head>
16 |     <body>
17 | 
18 | 
19 |         <div class="page-wrapper box-content">
20 | 
21 |             <label for="example">Content</label>
22 |             <textarea class="content" id="example" name="example"></textarea>
23 | 
24 |         </div>
25 | 
26 |         <script>
27 |         $(document).ready(function() {
28 |             $('.content').richText();
29 |         });
30 |         </script>
31 | 
32 |     </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug-report.md:
--------------------------------------------------------------------------------
 1 | ### Describe the problem
 2 | 
 3 | <!--- What happened? What are you seeing? How did you arrive here? -->
 4 | 
 5 | ### What did you expect?
 6 | 
 7 | <!--- How would you like this to work instead? -->
 8 | 
 9 | ### What version and browser are you using?
10 | 
11 | Version: <!--- Give us the version number here -->
12 | Browser and version: <!--- Give us the browser specs -->
13 | 
14 | 
15 | ### Reproducible test case
16 | 
17 | <!--- Insert a URL to your test case - use codepen.io, jsfiddle.net, jsbin.com, codesandbox.io, or whatever -->
18 | 
19 | <!--- Describe any details about the test case that we need to know like "whatever you do, don't click the red button" -->
20 | 
21 | ### Bug report checklist
22 | 
23 | - [ ] I have filled out as much of the above information as I can
24 | - [ ] I have included a test case because my odds go _way_ up that the issue can be fixed when I do
25 | - [ ] I have [searched for existing issues](https://github.com/webfashionist/RichText/issues) and to the best of my knowledge this is not a duplicate
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-request.md:
--------------------------------------------------------------------------------
 1 | ### Describe the problem you'd like to see solved or additional feature for RichText
 2 | 
 3 | <!--- What steps or tasks are you trying to complete along the way? --> 
 4 | 
 5 | 
 6 | ### Is there an existing part of RichText this feature is related to or is it something new?
 7 | 
 8 | 
 9 | <!--- If so, which part(s) of RichText is it in relation to? -->
10 | 
11 | 
12 | ### Why would other RichText users care about this?
13 | 
14 | <!--- e.g. because everyone wants <blink> back -->
15 | 
16 | 
17 | ### On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend this feature to be done?
18 | 
19 | <!--- e.g. 5 - "while we're young" -->
20 | 
21 | 
22 | ### Feature request checklist
23 | 
24 | - [ ] This is a single feature (i.e. not a re-write of all of RichText)
25 | - [ ] The title starts with "Feature request: " and is followed by a clear feature name (e.g.: `Feature request: moar cowbell`)
26 | - [ ] I have [searched for existing issues](https://github.com/webfashionist/RichText/issues) and to the best of my knowledge this is not a duplicate
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@webfashionist/richtext",
 3 |   "version": "1.1.3",
 4 |   "description": "WYSIWYG editor developed as jQuery plugin",
 5 |   "directories": {
 6 |     "example": "examples"
 7 |   },
 8 |   "scripts": {
 9 |     "start": "http-server -p 8080",
10 |     "installuglify": "npm i uglify-js -g",
11 |     "uglify": "npx uglifyjs src/jquery.richtext.js > src/jquery.richtext.min.js --comments --warn",
12 |     "test": "cypress run -b chrome",
13 |     "minifycss": "npx sass --style=compressed src/richtext.scss:src/richtext.min.css",
14 |     "build": "npm run uglify && npm run minifycss"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/webfashionist/RichText.git"
19 |   },
20 |   "author": "webfashionist",
21 |   "license": "AGPL-3.0",
22 |   "bugs": {
23 |     "url": "https://github.com/webfashionist/RichText/issues"
24 |   },
25 |   "homepage": "https://github.com/webfashionist/RichText#readme",
26 |   "devDependencies": {
27 |     "cypress": "^15.0.0",
28 |     "http-server": "^14.1.1",
29 |     "pa11y-ci": "^4.0.0",
30 |     "sass": "^1.83.0",
31 |     "uglify-js": "^3.19.3"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/yii2/widgets/RichTextWidget.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Webfashionist\RichText\yii2\widgets;
 4 | 
 5 | use yii\base\Widget;
 6 | use yii\helpers\Html;
 7 | use Yii;
 8 | 
 9 | use Webfashionist\RichText\yii2\assets\RichTextAsset;
10 | 
11 | class RichTextWidget extends Widget
12 | {
13 |     public $model, $attribute;
14 |     public $autoInit = true;
15 |     public $inputParams = [];
16 |     public $clientParams = [];
17 | 
18 |     public function run()
19 |     {
20 |         RichTextAsset::register($this->view);
21 |         if ($this->autoInit) {
22 |             $id = Html::getInputId($this->model, $this->attribute);
23 |             $this->view->registerJs('$("#' . $id . '").richText('. json_encode($this->clientParams) .');');
24 |         }
25 |         if (empty($this->inputParams['class'])) {
26 |             $this->inputParams['class'] = [];
27 |         }
28 |         if (is_string($this->inputParams['class'])) {
29 |             $this->inputParams['class'] = [$this->inputParams['class']];
30 |         }
31 |         $this->inputParams['class'][] = 'rich-text-widget';
32 |         return Html::activeTextarea($this->model, $this->attribute, $this->inputParams);
33 |     }
34 | }


--------------------------------------------------------------------------------
/examples/multipleEditors.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>RichText example</title>
 6 | 
 7 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |     <link rel="stylesheet" href="css/site.css">
 9 |     <link rel="stylesheet" href="../src/richtext.min.css">
10 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11 |     <script src="../src/jquery.richtext.js"></script>
12 | 
13 | 
14 | 
15 | </head>
16 | <body>
17 | 
18 | 
19 | <div class="page-wrapper box-content">
20 | 
21 |     <label for="content">Content</label>
22 |     <textarea class="content" id="content" name="example">asdsad ADS DS F</textarea>
23 | 
24 |     <label for="content2">Content 2</label>
25 |     <textarea class="content2" id="content2" name="example2"></textarea>
26 | </div>
27 | 
28 | <script>
29 |     $(document).ready(function() {
30 |         $('.content').richText({
31 |             useTabForNext: true,
32 |             maxlength: 1000,
33 |             maxlengthIncludeHTML: true
34 |         });
35 |         $('.content2').richText({
36 |             useTabForNext: true
37 |         });
38 |     });
39 | </script>
40 | 
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/richtext.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["richtext.scss","richtext-colors.scss"],"names":[],"mappings":"AAAA;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,EAwBA,UACI,UACA,kBACA,iBC1BQ,QD2BR,yBACA,MCnBS,QDoBT,WAEA,yBACI,iDACA,+BACI,cACA,kBAGJ,gKACI,kBACA,sBACA,gBACA,WAGJ,gCACI,eAGJ,gCACI,cACA,kBACA,iBCrDA,QDsDA,YACA,MCtDA,QDuDA,eACA,wBACA,qBACA,gBACA,0BACA,uBACA,kBAIR,4BACI,gBACA,MACA,gBACA,yBACA,gCACA,UAEA,6CACI,yCACA,eACA,sBACA,iBACA,oDACI,MC3ER,KD6EI,qDACI,MC5EP,OD8EG,kDACI,MC9EV,IDgFM,iEACI,iBAIR,gDACI,yCACA,eACA,sBACA,iBAGJ,+BACI,eACA,gBACA,aACA,gBAEA,kCACI,WACA,cACA,gBAEA,oCACI,cACA,kBACA,+BACA,eACA,wCACA,qCACA,gCAEA,kKACI,oBAGJ,6DACI,aACA,kBACA,MACA,OACA,QACA,SACA,gCACA,eAEA,sFACI,kBACA,SACA,uBACA,WCpIpB,KDqIoB,yBACA,kBACA,MCnIf,QDoIe,eACA,eACA,kBACA,WACA,mDACA,gDACA,2CACA,wLACI,MCtJpB,QD0JY,gFACI,kBACA,cACA,sBACA,iBC7JhB,QD8JgB,yBACA,kBACA,gBACA,YACA,cACA,mDACA,gDACA,2CACA,iBACA,gBACA,kBAEA,yGACI,kBACA,MACA,YACA,WCzKxB,KD0KwB,MCtKnB,QDuKmB,eACA,eACA,kBACA,WAKR,kFACI,gBAEA,qFACI,cACA,WACA,iDAEA,uFACI,cACA,kBACA,gCAGJ,6FACI,iBClM5B,KDsMoB,4FACI,gBACA,WAEA,8FACI,cACA,UACA,SACA,YACA,0BACA,uBACA,kBACA,mCACA,gCACA,2BAEA,mGACI,cACA,YACA,WACA,0BACA,uBACA,kBAMhB,mFACI,kBAQZ,0CACI,iBC5OZ,KDgPI,qDACI,WACA,uDACI,eAIR,gGACI,cAIR,qCACI,cACA,WACA,WAIR,uCACI,eACA,WAGJ,kCACI,cACA,WACA,WAGJ,2BACI,aACA,iBChRA,KDiRA,2BACA,iDACA,aACA,aACA,kBACA,gBAGI,+CACI,0BACA,MCxRN,KD4RF,4DACI,iBAGJ,iCACI,cACA,iBACA,WAEA,wEACI,aACA,yBAMZ,iCACI,8BAGJ,4BACI,mBACA,aACA,iBCnTK,QDoTL,YACA,MCpTI,KDqTJ,2DACA,eACA,eACA,WACA,iBACA,aAGJ,yBACI,YACA,cACA,kBACA,eAGJ,kDAEI,WACA,cACA,kBACA,+BACA,eAEJ,0EAEI,WAIA,iCACI,MClVG,QDmVH,0BAGJ,kCACI,0BACA,YACA,6BAIR,yCACI,kBACA,iBC1WI,QD2WJ,+BACA,gCAEA,4CACI,gBACA,eACA","file":"richtext.min.css"}


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to RichText
 2 | 
 3 | Thank you for your interest in contributing to RichText! 
 4 | 
 5 | I've put together the following guidelines to help you figure out where you can best be helpful to the project.
 6 | 
 7 | ## Quick start
 8 | 
 9 | - [Request a new feature](https://github.com/webfashionist/RichText/issues/new??title=Feature%20request:feature-name&template=feature-request.md)
10 | - [Submit a bug report](https://github.com/webfashionist/RichText/issues/new?template=bug-report.md)
11 | 
12 | ## Table of Contents
13 | 
14 | 1. [Types of contributions](#types-of-contributions)
15 | 2. [Ground rules & expectations](#ground-rules--expectations)
16 | 3. [How to contribute](#how-to-contribute)
17 | 
18 | ## Types of contributions
19 | 
20 | Currently, there's no specific documentation or style guide for the code. 
21 | Therefore, it would probably be easier to create [issues](https://github.com/webfashionist/RichText/issues) rather than [pull requests](https://github.com/webfashionist/RichText/pulls).
22 | 
23 | However, there are still many ways you can contribute to RichText:
24 | 
25 | 1. Suggest new ideas on how to extend the editor: [Request a new feature](https://github.com/webfashionist/RichText/issues/new??title=Feature%20request:feature-name&template=feature-request.md)
26 | 2. Suggest any update that would simplify the usage of the editor: [Request a new feature](https://github.com/webfashionist/RichText/issues/new??title=Feature%20request:feature-name&template=feature-request.md)
27 | 3. Fix or suggest a fix for issues/bugs that occur: [Submit a bug report](https://github.com/webfashionist/RichText/issues/new?template=bug-report.md)
28 | 
29 | 
30 | ## Ground rules & expectations
31 | 
32 | Before we get started, here are a few expectations (and that you should expect from others):
33 | 
34 | - Be kind and thoughtful in your conversations around this project.
35 | - Before opening a pull request, please ensure that you are working on the latest version of RichText.
36 | - If you open a pull request, please ensure that your contribution works in all current browsers.
37 | - The minified versions of the updated files should as well be kept up-to-date.
38 | 
39 | 
40 | ## How to contribute
41 | 
42 | If you'd like to contribute, start by searching through the [issues](https://github.com/webfashionist/RichText/issues) and [pull requests](https://github.com/webfashionist/RichText/pulls) to see whether someone else has raised a similar idea or question.
43 | 
44 | If you don't see your idea listed, and you think it fits into the goals of this guide, do one of the following:
45 | 
46 | - If your contribution is **minor**, such as a typo fix, or self-contained, such as writing a translation, open a pull request.
47 | - If your contribution is **major**, such as a new guide, start by opening an issue first. That way, other people can weigh in on the discussion before you do any work.
48 | 
49 | Have a look at [Quick start](#quick-start) to directly open a new issue.
50 | 
51 | 


--------------------------------------------------------------------------------
/src/richtext.min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  RichText: WYSIWYG editor developed as jQuery plugin
 3 | 
 4 |  @name RichText
 5 |  @author https://github.com/webfashionist - Bob Schockweiler - richtext@webfashion.eu
 6 | 
 7 |  Copyright (C) 2020 Bob Schockweiler ( richtext@webfashion.eu )
 8 | 
 9 |  This program is free software: you can redistribute it and/or modify
10 |  it under the terms of the GNU Affero General Public License as published
11 |  by the Free Software Foundation, either version 3 of the License, or
12 |  (at your option) any later version.
13 | 
14 |  This program is distributed in the hope that it will be useful,
15 |  but WITHOUT ANY WARRANTY; without even the implied warranty of
16 |  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
17 |  GNU Affero General Public License for more details.
18 | 
19 |  You should have received a copy of the GNU Affero General Public License
20 |  along with this program.  If not, see <http://www.gnu.org/licenses/>.
21 | */.richText{z-index:1;position:relative;background-color:#fafafa;border:#efefef solid 1px;color:#282828;width:100%}.richText .richText-form{font-family:Calibri,Verdana,Helvetica,sans-serif}.richText .richText-form label{display:block;padding:10px 15px}.richText .richText-form input[type=text],.richText .richText-form input[type=file],.richText .richText-form input[type=number],.richText .richText-form select{padding:10px 15px;border:#999 solid 1px;min-width:200px;width:100%}.richText .richText-form select{cursor:pointer}.richText .richText-form button{margin:10px 0;padding:10px 15px;background-color:#3498db;border:none;color:#fafafa;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.richText .richText-toolbar{position:sticky;top:0;min-height:20px;background-color:inherit;border-bottom:#efefef solid 1px;z-index:1}.richText .richText-toolbar .richText-length{font-family:Verdana,Helvetica,sans-serif;font-size:13px;vertical-align:middle;line-height:34px}.richText .richText-toolbar .richText-length .black{color:#000}.richText .richText-toolbar .richText-length .orange{color:orange}.richText .richText-toolbar .richText-length .red{color:red}.richText .richText-toolbar .richText-length+.richText-wordcount{margin-left:10px}.richText .richText-toolbar .richText-wordcount{font-family:Verdana,Helvetica,sans-serif;font-size:13px;vertical-align:middle;line-height:34px}.richText .richText-toolbar ul{padding-left:0;padding-right:0;margin-top:0;margin-bottom:0}.richText .richText-toolbar ul li{float:left;display:block;list-style:none}.richText .richText-toolbar ul li a{display:block;padding:10px 13px;border-right:#efefef solid 1px;cursor:pointer;-webkit-transition:background-color .4s;-moz-transition:background-color .4s;transition:background-color .4s}.richText .richText-toolbar ul li a .fa,.richText .richText-toolbar ul li a .fas,.richText .richText-toolbar ul li a .far,.richText .richText-toolbar ul li a svg{pointer-events:none}.richText .richText-toolbar ul li a .richText-dropdown-outer{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.3);cursor:default}.richText .richText-toolbar ul li a .richText-dropdown-outer>.richText-dropdown-close{position:absolute;top:28px;left:calc(50% + 147px);background:#fff;border:#efefef solid 1px;border-radius:4px;color:#282828;cursor:pointer;font-size:20px;text-align:center;width:32px;-webkit-box-shadow:rgba(149,157,165,.2) 0 8px 24px;-moz-box-shadow:rgba(149,157,165,.2) 0 8px 24px;box-shadow:rgba(149,157,165,.2) 0 8px 24px}.richText .richText-toolbar ul li a .richText-dropdown-outer>.richText-dropdown-close:focus,.richText .richText-toolbar ul li a .richText-dropdown-outer>.richText-dropdown-close:hover{color:#3498db}.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown{position:relative;display:block;margin:3% auto 0 auto;background-color:#fafafa;border:#efefef solid 1px;border-radius:4px;min-width:100px;width:300px;max-width:90%;-webkit-box-shadow:rgba(149,157,165,.2) 0 8px 24px;-moz-box-shadow:rgba(149,157,165,.2) 0 8px 24px;box-shadow:rgba(149,157,165,.2) 0 8px 24px;max-height:300px;overflow-y:auto;overflow-x:hidden}.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown .richText-dropdown-close{position:absolute;top:0;right:-23px;background:#fff;color:#282828;cursor:pointer;font-size:20px;text-align:center;width:20px}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown{list-style:none}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li{display:block;float:none;font-family:Calibri,Verdana,Helvetica,sans-serif}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a{display:block;padding:10px 15px;border-bottom:#efefef solid 1px}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a:hover{background-color:#fff}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline{margin:10px 6px;float:left}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a{display:block;padding:0;margin:0;border:none;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 10px 0 #999;-moz-box-shadow:0 0 10px 0 #999;box-shadow:0 0 10px 0 #999}.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a span{display:block;height:30px;width:30px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.richText .richText-toolbar ul li a .richText-dropdown-outer div.richText-dropdown{padding:10px 15px}.richText .richText-toolbar ul li a:hover{background-color:#fff}.richText .richText-toolbar ul li[data-disable=true]{opacity:.1}.richText .richText-toolbar ul li[data-disable=true] a{cursor:default}.richText .richText-toolbar ul li:not([data-disable=true]).is-selected .richText-dropdown-outer{display:block}.richText .richText-toolbar ul:after{display:block;content:"";clear:both}.richText .richText-toolbar:last-child{font-size:12px;z-index:-1}.richText .richText-toolbar:after{display:block;clear:both;content:""}.richText .richText-editor{padding:20px;background-color:#fff;border-left:#fff solid 2px;font-family:Calibri,Verdana,Helvetica,sans-serif;height:300px;outline:none;overflow-y:scroll;overflow-x:auto}.richText .richText-editor[placeholder]:before{content:attr(placeholder);color:#555}.richText .richText-editor ul,.richText .richText-editor ol{margin:10px 25px}.richText .richText-editor table{margin:10px 0;border-spacing:0;width:100%}.richText .richText-editor table td,.richText .richText-editor table th{padding:10px;border:#efefef solid 1px}.richText .richText-editor:focus{border-left:#3498db solid 2px}.richText .richText-initial{margin-bottom:-4px;padding:10px;background-color:#282828;border:none;color:#3f3;font-family:Monospace,Calibri,Verdana,Helvetica,sans-serif;max-width:100%;min-width:100%;width:100%;min-height:400px;height:400px}.richText .richText-help{float:right;display:block;padding:10px 15px;cursor:pointer}.richText .richText-undo,.richText .richText-redo{float:left;display:block;padding:10px 15px;border-right:#efefef solid 1px;cursor:pointer}.richText .richText-undo.is-disabled,.richText .richText-redo.is-disabled{opacity:.4}.richText .richText-help-popup a{color:#3498db;text-decoration:underline}.richText .richText-help-popup hr{margin:10px auto 5px auto;border:none;border-top:#efefef solid 1px}.richText .richText-list.list-rightclick{position:absolute;background-color:#fafafa;border-right:#efefef solid 1px;border-bottom:#efefef solid 1px}.richText .richText-list.list-rightclick li{padding:5px 7px;cursor:pointer;list-style:none}/*# sourceMappingURL=richtext.min.css.map */
22 | 


--------------------------------------------------------------------------------
/cypress/e2e/basics.cy.js:
--------------------------------------------------------------------------------
  1 | describe('basic formatting', () => {
  2 |   const editorSelector = '.richText-editor';
  3 |   const commandSelector = (command, options) => {
  4 |     const selector = `a[data-command="${command}"]`;
  5 |     if (options) {
  6 |       return `${selector}[data-option="${options}"]`;
  7 |     }
  8 |     return selector;
  9 |   };
 10 | 
 11 |   const typeWithCommand = (command, text, options) => {
 12 |       cy.get(commandSelector(command, options)).click();
 13 |       cy.get(editorSelector).type(text);
 14 |   };
 15 | 
 16 |   beforeEach(() => {
 17 |     cy.visit('/examples/index.html');
 18 |     cy.get(editorSelector).focus();
 19 |   });
 20 | 
 21 |   it('has correct init state', () => {
 22 |     cy.get(editorSelector).should('have.html', '<div><br></div>');
 23 |   });
 24 | 
 25 |   it('writes text unstyled by default', () => {
 26 |     cy.get(editorSelector).type('hello world');
 27 |     cy.get(editorSelector).should('have.html', '<div>hello world</div>');
 28 |   });
 29 | 
 30 |   it('can write text in bold', () => {
 31 |     typeWithCommand('bold', 'hello world');
 32 |     cy.get(editorSelector).should('have.html', '<div><b>hello world</b></div>');
 33 |   });
 34 | 
 35 |   it('can write text in italic', () => {
 36 |     typeWithCommand('italic', 'hello world');
 37 |     cy.get(editorSelector).should('have.html', '<div><i>hello world</i></div>');
 38 |   });
 39 | 
 40 |   it('can write text in underline', () => {
 41 |     typeWithCommand('underline', 'hello world');
 42 |     cy.get(editorSelector).should('have.html', '<div><u>hello world</u></div>');
 43 |   });
 44 | 
 45 |   it('can write text left-aligned', () => {
 46 |     cy.get(editorSelector).type('hello world');
 47 |     cy.get(commandSelector('justifyRight')).click();
 48 |     cy.get(commandSelector('justifyLeft')).click();
 49 |     cy.get(editorSelector).should('have.html', '<div style="text-align: left;">hello world</div>');
 50 |   });
 51 | 
 52 |   it('can write text center-aligned', () => {
 53 |     cy.get(editorSelector).type('hello world');
 54 |     cy.get(commandSelector('justifyCenter')).click();
 55 |     cy.get(editorSelector).should('have.html', '<div style="text-align: center;">hello world</div>');
 56 |   });
 57 | 
 58 |   it('can write text right-aligned', () => {
 59 |     cy.get(editorSelector).type('hello world');
 60 |     cy.get(commandSelector('justifyRight')).click();
 61 |     cy.get(editorSelector).should('have.html', '<div style="text-align: right;">hello world</div>');
 62 |   });
 63 | 
 64 |   it('can write text fully-aligned', () => {
 65 |     cy.get(editorSelector).type('hello world');
 66 |     cy.get(commandSelector('justifyFull')).click();
 67 |     cy.get(editorSelector).should('have.html', '<div style="text-align: justify;">hello world</div>');
 68 |   });
 69 | 
 70 |   it('can write ordered lists', () => {
 71 |     typeWithCommand('insertOrderedList', 'hello world');
 72 |     cy
 73 |       .get(editorSelector)
 74 |       .should('have.html', '<div><ol><li>hello world</li></ol></div>')
 75 |       .type('{enter}')
 76 |       .type('hello world2')
 77 |       .get(editorSelector)
 78 |       .should('have.html', '<div><ol><li>hello world</li><li>hello world2</li></ol></div>');
 79 |   });
 80 | 
 81 |   it('can write unorderd lists', () => {
 82 |     typeWithCommand('insertUnorderedList', 'hello world');
 83 |     cy
 84 |       .get(editorSelector)
 85 |       .should('have.html', '<div><ul><li>hello world</li></ul></div>')
 86 |       .type('{enter}')
 87 |       .type('hello world2')
 88 |       .get(editorSelector)
 89 |       .should('have.html', '<div><ul><li>hello world</li><li>hello world2</li></ul></div>');
 90 |   });
 91 | 
 92 |   it('can remove formatting', () => {
 93 |       // check bold
 94 |     typeWithCommand('bold', 'hello world');
 95 |     cy.get(editorSelector).should('have.html', '<div><b>hello world</b></div>');
 96 |     cy.get(editorSelector).type('{selectall}');
 97 |     cy.get(commandSelector('removeFormat')).click();
 98 |     cy.get(editorSelector).should('have.html', '<div>hello world</div>');
 99 |     // check italic
100 |     cy.get(editorSelector).type('{selectall}');
101 |     typeWithCommand('italic', 'hello world');
102 |     cy.get(editorSelector).should('have.html', '<div><i>hello world</i></div>');
103 |     cy.get(editorSelector).type('{selectall}');
104 |     cy.get(commandSelector('removeFormat')).click();
105 |     cy.get(editorSelector).should('have.html', '<div>hello world</div>');
106 |   });
107 | 
108 |   it('can write text with font-size', () => {
109 |     for (let n = 24; n >= 12; n -= 2) {
110 |       cy.get(editorSelector).type('{selectall}');
111 |       cy.get(commandSelector('removeFormat')).click();
112 |       cy.get(editorSelector).type(`hello world ${n}`);
113 |       cy.get(editorSelector).type('{selectall}');
114 |       const buttonSelector = cy.get(`.fa-text-height`).parent(`a`);
115 |       buttonSelector.click(); // open dropdown
116 |       // check if dropdown is open
117 |       buttonSelector.children(`.richText-dropdown-outer`).should('be.visible');
118 | 
119 |       cy.get(`a[data-command="fontSize"][data-option="${n}"]`).click();
120 |       cy
121 |           .get(editorSelector)
122 |           .should('include.html', `<div><span style="font-size:${n}px;">hello world ${n}</span></div>`)
123 |           .type('{enter}');
124 |     }
125 |   });
126 | 
127 |   it('can write text with font-family', () => {
128 |     const fontNames = [
129 |         'Arial',
130 |         'Arial Black',
131 |         'Comic Sans MS',
132 |         'Courier New',
133 |         'Geneva',
134 |         'Georgia',
135 |         'Helvetica',
136 |         'Impact',
137 |         'Lucida Console',
138 |         'Tahoma',
139 |         'Times New Roman',
140 |         'Verdana'
141 |     ];
142 | 
143 |     for (const fontName of fontNames) {
144 |       cy.get(editorSelector).type('{selectall}');
145 |       cy.get(commandSelector('removeFormat')).click();
146 |       cy.get(editorSelector).type(`hello world ${fontName}`);
147 |       cy.get(editorSelector).type('{selectall}');
148 |       const buttonSelector = cy.get(`.fa-font`).parent(`a`);
149 |       buttonSelector.click(); // open dropdown
150 |       // check if dropdown is open
151 |       buttonSelector.children(`.richText-dropdown-outer`).should('be.visible');
152 | 
153 |       cy.get(`a[data-command="fontName"][data-option="${fontName}"]`).click();
154 |       cy
155 |           .get(editorSelector)
156 |           .should('include.html', `<div><font face="${fontName}">hello world ${fontName}</font></div>`)
157 |           .type('{enter}');
158 |     }
159 |   });
160 | 
161 |   it('can write text with font color', () => {
162 |     const fontColors = [
163 |         '#FFFFFF',
164 |         '#000000',
165 |         '#7F6000',
166 |         '#938953',
167 |         '#1F497D',
168 |         '#4F81BD',
169 |         '#953734',
170 |         '#4F6128',
171 |         '#3F3151',
172 |         '#31859B',
173 |         '#4BACC6',
174 |         '#E36C09',
175 |         '#F79646',
176 |         '#FFFF00'
177 |     ];
178 | 
179 |     for (const fontColor of fontColors) {
180 |         cy.get(editorSelector).type('{selectall}');
181 |         cy.get(commandSelector('removeFormat')).click();
182 |         cy.get(editorSelector).type(`hello world ${fontColor}`);
183 |         cy.get(editorSelector).type('{selectall}');
184 |         const buttonSelector = cy.get(`.fa-pencil`).parent(`a`);
185 |         buttonSelector.click(); // open dropdown
186 |         // check if dropdown is open
187 |         buttonSelector.children(`.richText-dropdown-outer`).should('be.visible');
188 | 
189 |         cy.get(`a[data-command="forecolor"][data-option="${fontColor}"]`).click();
190 |         cy
191 |             .get(editorSelector)
192 |             .should('include.html', `<div><font color="${fontColor.toLowerCase()}">hello world ${fontColor}</font></div>`)
193 |             .type('{enter}');
194 |     }
195 |   });
196 | 
197 |     it('can write text with background color', () => {
198 |         const backgroundColors = [
199 |             '#FFFFFF',
200 |             '#000000',
201 |             '#7F6000',
202 |             '#938953',
203 |             '#1F497D',
204 |             'blue',
205 |             '#4F81BD',
206 |             '#953734',
207 |             'red',
208 |             '#4F6128',
209 |             'green',
210 |             '#3F3151',
211 |             '#31859B',
212 |             '#4BACC6',
213 |             '#E36C09',
214 |             '#F79646',
215 |             '#FFFF00'
216 |         ];
217 | 
218 |         function hexToRgb(hex) {
219 |             var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
220 |             return result ? {
221 |                 r: parseInt(result[1], 16),
222 |                 g: parseInt(result[2], 16),
223 |                 b: parseInt(result[3], 16)
224 |             } : null;
225 |         }
226 | 
227 |         for (const backgroundColor of backgroundColors) {
228 |             cy.get(editorSelector).type('{selectall}');
229 |             cy.get(commandSelector('removeFormat')).click();
230 |             cy.get(editorSelector).type(`hello world ${backgroundColor}`);
231 |             cy.get(editorSelector).type('{selectall}');
232 |             const buttonSelector = cy.get(`.fa-paint-brush`).parent(`a`);
233 |             buttonSelector.click(); // open dropdown
234 |             // check if dropdown is open
235 |             buttonSelector.children(`.richText-dropdown-outer`).should('be.visible');
236 | 
237 |             const matchingBackgroundColor = backgroundColor.startsWith('#') ? `rgb(${hexToRgb(backgroundColor).r}, ${hexToRgb(backgroundColor).g}, ${hexToRgb(backgroundColor).b})` : backgroundColor;
238 | 
239 |             cy.get(`a[data-command="hiliteColor"][data-option="${backgroundColor}"]`).click();
240 |             cy
241 |                 .get(editorSelector)
242 |                 .should('include.html', `<div><span style="background-color: ${matchingBackgroundColor};">hello world ${backgroundColor}</span></div>`)
243 |                 .type('{enter}');
244 |         }
245 |     });
246 | 
247 |   /**
248 |    * TODO: add more tests for:
249 |    * - links
250 |    * - images
251 |    * - headings
252 |    * - code
253 |    * - files
254 |    * - videos
255 |    * - tables
256 |    */
257 | });
258 | 


--------------------------------------------------------------------------------
/src/richtext.scss:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  RichText: WYSIWYG editor developed as jQuery plugin
  3 | 
  4 |  @name RichText
  5 |  @author https://github.com/webfashionist - Bob Schockweiler - richtext@webfashion.eu
  6 | 
  7 |  Copyright (C) 2020 Bob Schockweiler ( richtext@webfashion.eu )
  8 | 
  9 |  This program is free software: you can redistribute it and/or modify
 10 |  it under the terms of the GNU Affero General Public License as published
 11 |  by the Free Software Foundation, either version 3 of the License, or
 12 |  (at your option) any later version.
 13 | 
 14 |  This program is distributed in the hope that it will be useful,
 15 |  but WITHOUT ANY WARRANTY; without even the implied warranty of
 16 |  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 17 |  GNU Affero General Public License for more details.
 18 | 
 19 |  You should have received a copy of the GNU Affero General Public License
 20 |  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 21 | */
 22 | 
 23 | @use "richtext-colors.scss" as colors;
 24 | 
 25 | .richText {
 26 |     z-index: 1;
 27 |     position: relative;
 28 |     background-color: colors.$alabaster;
 29 |     border: colors.$gallery solid 1px;
 30 |     color: colors.$mine-shaft;
 31 |     width: 100%;
 32 | 
 33 |     .richText-form {
 34 |         font-family: Calibri,Verdana,Helvetica,sans-serif;
 35 |         label {
 36 |             display: block;
 37 |             padding: 10px 15px;
 38 |         }
 39 | 
 40 |         input[type="text"], input[type="file"], input[type="number"], select {
 41 |             padding: 10px 15px;
 42 |             border: colors.$dusty-gray solid 1px;
 43 |             min-width: 200px;
 44 |             width: 100%;
 45 |         }
 46 | 
 47 |         select {
 48 |             cursor: pointer;
 49 |         }
 50 | 
 51 |         button {
 52 |             margin: 10px 0;
 53 |             padding: 10px 15px;
 54 |             background-color: colors.$highlight;
 55 |             border: none;
 56 |             color: colors.$alabaster;
 57 |             cursor: pointer;
 58 |             -webkit-appearance: none;
 59 |             -moz-appearance: none;
 60 |             appearance: none;
 61 |             -webkit-border-radius: 4px;
 62 |             -moz-border-radius: 4px;
 63 |             border-radius: 4px;
 64 |         }
 65 |     }
 66 | 
 67 |     .richText-toolbar {
 68 |         position: sticky;
 69 |         top: 0;
 70 |         min-height: 20px;
 71 |         background-color: inherit;
 72 |         border-bottom: colors.$gallery solid 1px;
 73 |         z-index: 1;
 74 | 
 75 |         .richText-length {
 76 |             font-family: Verdana, Helvetica, sans-serif;
 77 |             font-size: 13px;
 78 |             vertical-align: middle;
 79 |             line-height: 34px;
 80 |             .black {
 81 |                 color: colors.$black;
 82 |             }
 83 |             .orange {
 84 |                 color: colors.$orange;
 85 |             }
 86 |             .red {
 87 |                 color: colors.$red;
 88 |             }
 89 |             + .richText-wordcount {
 90 |                 margin-left: 10px;
 91 |             }
 92 |         }
 93 | 
 94 |         .richText-wordcount {
 95 |             font-family: Verdana, Helvetica, sans-serif;
 96 |             font-size: 13px;
 97 |             vertical-align: middle;
 98 |             line-height: 34px;
 99 |         }
100 | 
101 |         ul {
102 |             padding-left: 0;
103 |             padding-right: 0;
104 |             margin-top: 0;
105 |             margin-bottom: 0;
106 | 
107 |             li {
108 |                 float: left;
109 |                 display: block;
110 |                 list-style: none;
111 | 
112 |                 a {
113 |                     display: block;
114 |                     padding: 10px 13px;
115 |                     border-right: colors.$gallery solid 1px;
116 |                     cursor: pointer;
117 |                     -webkit-transition: background-color 0.4s;
118 |                     -moz-transition: background-color 0.4s;
119 |                     transition: background-color 0.4s;
120 | 
121 |                     .fa, .fas, .far, svg {
122 |                         pointer-events: none;
123 |                     }
124 | 
125 |                     .richText-dropdown-outer {
126 |                         display: none;
127 |                         position: absolute;
128 |                         top: 0;
129 |                         left: 0;
130 |                         right: 0;
131 |                         bottom: 0;
132 |                         background-color: rgba(0,0,0,0.3);
133 |                         cursor: default;
134 | 
135 |                         > .richText-dropdown-close {
136 |                             position: absolute;
137 |                             top: 28px;
138 |                             left: calc(50% + 147px);
139 |                             background: colors.$white;
140 |                             border: colors.$gallery solid 1px;
141 |                             border-radius: 4px;
142 |                             color: colors.$mine-shaft;
143 |                             cursor: pointer;
144 |                             font-size: 20px;
145 |                             text-align: center;
146 |                             width: 32px;
147 |                             -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
148 |                             -moz-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
149 |                             box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
150 |                             &:focus, &:hover {
151 |                                 color: colors.$highlight;
152 |                             }
153 |                         }
154 | 
155 |                         .richText-dropdown {
156 |                             position:relative;
157 |                             display: block;
158 |                             margin: 3% auto 0 auto;
159 |                             background-color: colors.$alabaster;
160 |                             border: colors.$gallery solid 1px;
161 |                             border-radius: 4px;
162 |                             min-width: 100px;
163 |                             width: 300px;
164 |                             max-width: 90%;
165 |                             -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
166 |                             -moz-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
167 |                             box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
168 |                             max-height: 300px;
169 |                             overflow-y: auto;
170 |                             overflow-x: hidden;
171 | 
172 |                             .richText-dropdown-close {
173 |                                 position: absolute;
174 |                                 top: 0;
175 |                                 right: -23px;
176 |                                 background: colors.$white;
177 |                                 color: colors.$mine-shaft;
178 |                                 cursor: pointer;
179 |                                 font-size: 20px;
180 |                                 text-align: center;
181 |                                 width: 20px;
182 |                             }
183 |                         }
184 | 
185 | 
186 |                         ul.richText-dropdown {
187 |                             list-style: none;
188 | 
189 |                             li {
190 |                                 display: block;
191 |                                 float: none;
192 |                                 font-family: Calibri,Verdana,Helvetica,sans-serif;
193 | 
194 |                                 a {
195 |                                     display: block;
196 |                                     padding: 10px 15px;
197 |                                     border-bottom: colors.$gallery solid 1px;
198 |                                 }
199 | 
200 |                                 a:hover {
201 |                                     background-color: colors.$white;
202 |                                 }
203 |                             }
204 | 
205 |                             li.inline{
206 |                                 margin: 10px 6px;
207 |                                 float: left;
208 | 
209 |                                 a {
210 |                                     display: block;
211 |                                     padding: 0;
212 |                                     margin: 0;
213 |                                     border: none;
214 |                                     -webkit-border-radius: 50%;
215 |                                     -moz-border-radius: 50%;
216 |                                     border-radius: 50%;
217 |                                     -webkit-box-shadow: 0 0 10px 0 colors.$dusty-gray;
218 |                                     -moz-box-shadow: 0 0 10px 0 colors.$dusty-gray;
219 |                                     box-shadow: 0 0 10px 0 colors.$dusty-gray;
220 | 
221 |                                     span {
222 |                                         display: block;
223 |                                         height: 30px;
224 |                                         width: 30px;
225 |                                         -webkit-border-radius: 50%;
226 |                                         -moz-border-radius: 50%;
227 |                                         border-radius: 50%;
228 |                                     }
229 |                                 }
230 |                             }
231 |                         }
232 | 
233 |                         div.richText-dropdown {
234 |                             padding: 10px 15px;
235 | 
236 |                         }
237 |                     }
238 | 
239 | 
240 |                 }
241 | 
242 |                 a:hover {
243 |                     background-color: colors.$white;
244 |                 }
245 |             }
246 | 
247 |             li[data-disable="true"] {
248 |                 opacity: 0.1;
249 |                 a {
250 |                     cursor: default;
251 |                 }
252 |             }
253 | 
254 |             li:not([data-disable="true"]).is-selected .richText-dropdown-outer {
255 |                 display: block;
256 |             }
257 |         }
258 | 
259 |         ul:after {
260 |             display: block;
261 |             content: "";
262 |             clear: both;
263 |         }
264 |     }
265 | 
266 |     .richText-toolbar:last-child {
267 |         font-size: 12px;
268 |         z-index: -1;
269 |     }
270 | 
271 |     .richText-toolbar:after{
272 |         display: block;
273 |         clear: both;
274 |         content:"";
275 |     }
276 | 
277 |     .richText-editor {
278 |         padding: 20px;
279 |         background-color: colors.$white;
280 |         border-left: colors.$white solid 2px;
281 |         font-family: Calibri,Verdana,Helvetica,sans-serif;
282 |         height: 300px;
283 |         outline: none;
284 |         overflow-y: scroll;
285 |         overflow-x: auto;
286 | 
287 |         &[placeholder] {
288 |             &:before {
289 |                 content: attr(placeholder);
290 |                 color: colors.$emperor;
291 |             }
292 |         }
293 | 
294 |         ul, ol {
295 |             margin: 10px 25px;
296 |         }
297 | 
298 |         table {
299 |             margin:10px 0;
300 |             border-spacing:0;
301 |             width:100%;
302 | 
303 |             td, th {
304 |                 padding: 10px;
305 |                 border: colors.$gallery solid 1px;
306 |             }
307 |         }
308 |     }
309 | 
310 | 
311 |     .richText-editor:focus {
312 |         border-left: colors.$highlight solid 2px;
313 |     }
314 | 
315 |     .richText-initial {
316 |         margin-bottom: -4px;
317 |         padding: 10px;
318 |         background-color: colors.$mine-shaft;
319 |         border: none;
320 |         color: colors.$harlequin;
321 |         font-family: Monospace,Calibri,Verdana,Helvetica,sans-serif;
322 |         max-width: 100%;
323 |         min-width: 100%;
324 |         width: 100%;
325 |         min-height: 400px;
326 |         height: 400px;
327 |     }
328 | 
329 |     .richText-help {
330 |         float: right;
331 |         display: block;
332 |         padding: 10px 15px;
333 |         cursor: pointer;
334 |     }
335 | 
336 |     .richText-undo,
337 |     .richText-redo {
338 |         float: left;
339 |         display: block;
340 |         padding: 10px 15px;
341 |         border-right: colors.$gallery solid 1px;
342 |         cursor: pointer;
343 |     }
344 |     .richText-undo.is-disabled,
345 |     .richText-redo.is-disabled {
346 |         opacity: 0.4;
347 |     }
348 | 
349 |     .richText-help-popup {
350 |         a {
351 |             color: colors.$curious-blue;
352 |             text-decoration:underline;
353 |         }
354 | 
355 |         hr {
356 |             margin: 10px auto 5px auto;
357 |             border:none;
358 |             border-top: colors.$gallery solid 1px;
359 |         }
360 |     }
361 | 
362 |     .richText-list.list-rightclick {
363 |         position: absolute;
364 |         background-color: colors.$alabaster;
365 |         border-right: colors.$gallery solid 1px;
366 |         border-bottom: colors.$gallery solid 1px;
367 | 
368 |         li {
369 |             padding: 5px 7px;
370 |             cursor: pointer;
371 |             list-style: none;
372 |         }
373 |     }
374 | 
375 | }
376 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # RichText
  2 | 
  3 | [![Cypress Tests](https://github.com/webfashionist/RichText/actions/workflows/test.yml/badge.svg)](https://github.com/webfashionist/RichText/actions/workflows/test.yml)
  4 | [![Accessibility](https://github.com/webfashionist/RichText/actions/workflows/accessibility.yml/badge.svg)](https://github.com/webfashionist/RichText/actions/workflows/accessibility.yml)
  5 | [![GitHub release](https://img.shields.io/github/v/release/webfashionist/RichText)](https://github.com/webfashionist/RichText/releases)
  6 | 
  7 | 
  8 | WYSIWYG editor developed as jQuery plugin.
  9 | 
 10 | ## Requirements
 11 | 
 12 | The following libraries are required to use the RichText editor:
 13 | 
 14 | - [jQuery](https://jquery.com/) (v.3+, v.3.2+ recommended)
 15 | - FontAwesome ([v.4.7.0](https://fontawesome.com/v4.7.0/) / [v.5+](https://fontawesome.com/))
 16 | 
 17 | ## Install RichText
 18 | 
 19 | ### NPM
 20 | 
 21 | ```bash
 22 | npm install @webfashionist/richtext
 23 | ```
 24 | 
 25 | ### Yarn
 26 | 
 27 | ```bash
 28 | yarn add @webfashionist/richtext
 29 | ```
 30 | 
 31 | 
 32 | ### Manually
 33 | 
 34 | Download the latest release from the [releases page](https://github.com/webfashionist/RichText/releases) and include the files in your project.
 35 | 
 36 | 
 37 | ## Initialize editor
 38 | 
 39 | In order to use the RichText editor, you need to include the following files in your project:
 40 | 
 41 | ```html
 42 | <link rel="stylesheet" href="src/richtext.min.css">
 43 | <script src="src/jquery.richtext.min.js"></script>
 44 | ```
 45 | 
 46 | Simply call `.richText()` on your `jQuery('textarea')` or `jQuery('input')` field (other HTML tags are allowed as well, but not recommended).
 47 | 
 48 | 
 49 | ## Options
 50 | 
 51 | `.richText()` allows several options to be set, the default option object is:
 52 | 
 53 | ```javascript
 54 | $(element).richText({
 55 | 
 56 |   // text formatting
 57 |   bold: true,
 58 |   italic: true,
 59 |   underline: true,
 60 | 
 61 |   // text alignment
 62 |   leftAlign: true,
 63 |   centerAlign: true,
 64 |   rightAlign: true,
 65 |   justify: true,
 66 | 
 67 |   // lists
 68 |   ol: true,
 69 |   ul: true,
 70 | 
 71 |   // title
 72 |   heading: true,
 73 | 
 74 |   // fonts
 75 |   fonts: true,
 76 |   fontList: [
 77 |       "Arial", 
 78 |       "Arial Black", 
 79 |       "Comic Sans MS", 
 80 |       "Courier New", 
 81 |       "Geneva", 
 82 |       "Georgia", 
 83 |       "Helvetica", 
 84 |       "Impact", 
 85 |       "Lucida Console", 
 86 |       "Tahoma", 
 87 |       "Times New Roman",
 88 |       "Verdana"
 89 |   ],
 90 |   fontColor: true,
 91 |   backgroundColor: true,
 92 |   fontSize: true,
 93 |   fontSizes: undefined,
 94 | 
 95 |   // uploads
 96 |   imageUpload: true,
 97 |   fileUpload: true,
 98 | 
 99 |   // media
100 |   videoEmbed: true,
101 | 
102 |   // link
103 |   urls: true,
104 | 
105 |   // tables
106 |   table: true,
107 | 
108 |   // code
109 |   removeStyles: true,
110 |   code: true,
111 | 
112 |   // colors
113 |   colors: [],
114 | 
115 |   // dropdowns
116 |   fileHTML: '',
117 |   imageHTML: '',
118 | 
119 |   // translations
120 |   translations: {
121 |       'title': 'Title',
122 |       'white': 'White',
123 |       'black': 'Black',
124 |       'brown': 'Brown',
125 |       'beige': 'Beige',
126 |       'darkBlue': 'Dark Blue',
127 |       'blue': 'Blue',
128 |       'lightBlue': 'Light Blue',
129 |       'darkRed': 'Dark Red',
130 |       'red': 'Red',
131 |       'darkGreen': 'Dark Green',
132 |       'green': 'Green',
133 |       'purple': 'Purple',
134 |       'darkTurquois': 'Dark Turquois',
135 |       'turquois': 'Turquois',
136 |       'darkOrange': 'Dark Orange',
137 |       'orange': 'Orange',
138 |       'yellow': 'Yellow',
139 |       'imageURL': 'Image URL',
140 |       'fileURL': 'File URL',
141 |       'linkText': 'Link text',
142 |       'url': 'URL',
143 |       'size': 'Size',
144 |       'responsive': 'Responsive',
145 |       'text': 'Text',
146 |       'openIn': 'Open in',
147 |       'sameTab': 'Same tab',
148 |       'newTab': 'New tab',
149 |       'align': 'Align',
150 |       'left': 'Left',
151 |       'justify': 'Justify',
152 |       'center': 'Center',
153 |       'right': 'Right',
154 |       'rows': 'Rows',
155 |       'columns': 'Columns',
156 |       'add': 'Add',
157 |       'pleaseEnterURL': 'Please enter an URL',
158 |       'videoURLnotSupported': 'Video URL not supported',
159 |       'pleaseSelectImage': 'Please select an image',
160 |       'pleaseSelectFile': 'Please select a file',
161 |       'bold': 'Bold',
162 |       'italic': 'Italic',
163 |       'underline': 'Underline',
164 |       'alignLeft': 'Align left',
165 |       'alignCenter': 'Align centered',
166 |       'alignRight': 'Align right',
167 |       'addOrderedList': 'Ordered list',
168 |       'addUnorderedList': 'Unordered list',
169 |       'addHeading': 'Heading/title',
170 |       'addFont': 'Font',
171 |       'addFontColor': 'Font color',
172 |       'addBackgroundColor': 'Background color',
173 |       'addFontSize': 'Font size',
174 |       'addImage': 'Add image',
175 |       'addVideo': 'Add video',
176 |       'addFile': 'Add file',
177 |       'addURL': 'Add URL',
178 |       'addTable': 'Add table',
179 |       'removeStyles': 'Remove styles',
180 |       'code': 'Show HTML code',
181 |       'undo': 'Undo',
182 |       'redo': 'Redo',
183 |       'close': 'Close',
184 |       'save': 'Save',
185 |       'words': 'word(s)'
186 |   },
187 |             
188 |   // privacy
189 |   youtubeCookies: false,
190 |     
191 |   // preview
192 |   preview: false,
193 | 
194 |   // placeholder
195 |   placeholder: '',
196 |   
197 |   // developer settings
198 |   useSingleQuotes: false,
199 |   height: 0,
200 |   heightPercentage: 0,
201 |   adaptiveHeight: false,
202 |   id: "",
203 |   class: "",
204 |   useParagraph: false,
205 |   maxlength: 0,
206 |   maxlengthIncludeHTML: false,
207 |   wordCount: false,
208 |   callback: undefined,
209 |   useTabForNext: false,
210 |   save: false,
211 |   saveCallback: undefined,
212 |   saveOnBlur: 0, 
213 |   undoRedo: true, 
214 |   disableScripts: false,
215 |   DOMPurify: false
216 | });
217 | ```
218 | 
219 | **Text formatting**
220 | - `bold` (default: `(boolean) true`) :: Defines if the bold button should be displayed in the editor toolbar
221 | - `italic` (default: `(boolean) true`) :: Defines if the italic button should be displayed
222 | - `underline` (default: `(boolean) true`) :: Displays the underline button
223 | 
224 | **Fonts**
225 | - `fonts` (default: `(boolean) true`) :: Enables font formatting
226 | - `fontList` :: Array of allowed fonts. The fonts set by default are fonts which should work on Windows, Mac and Linux by default. Setting fonts manually will overwrite the array.
227 | - `fontSize` (default: `(boolean) true`) :: Allows to use different font sizes
228 | - `fontSizes` (default: `undefined`) :: Array of allowed font sizes. If the default value is being used, the editor will provide a default set of font sizes. Setting font sizes manually will overwrite the default array. Example: `fontSizes: [10, 12, 14, 16]`
229 | 
230 | **Text alignment**
231 | - `leftAlign` (default: `(boolean) true`)
232 | - `centerAlign` (default: `(boolean) true`)
233 | - `rightAlign` (default: `(boolean) true`)
234 | - `justify` (default: `(boolean) true`)
235 | 
236 | **Lists**
237 | - `ol` (default: `(boolean) true`) :: Ordered list
238 | - `ul` (default: `(boolean) true`) :: Unordered list
239 | 
240 | **Titles**
241 | - `heading` (default: `(boolean) true`)
242 | 
243 | **Colors**
244 | - `fontColor` (default: `(boolean) true`)
245 | - `backgroundColor` (default: `(boolean) true`)
246 | - `colors` :: Set own colors for the editor. They will replace the default colors. Example:
247 | 
248 | ```javascript
249 | var colors;
250 | colors["#FFFFFF"] = 'White';
251 | colors["#000000"] = 'Black';
252 | ```
253 | 
254 | **Uploads/Files**
255 | - `imageUpload` (default: `(boolean) true`)
256 | - `fileUpload` (default: `(boolean) true`)
257 | 
258 | **Media/Videos**
259 | - `videoEmbed` (default: `(boolean) true`) :: Simplify embedding videos from YouTube, Facebook, Vimeo and Dailymotion
260 | 
261 | **Links**
262 | - `urls` (default: `(boolean) true`)
263 | 
264 | **Tables**
265 | - `table` (default: `(boolean) true`)
266 | 
267 | **Code**
268 | - `removeStyles` (default: `(boolean) true`) :: Allows to remove the CSS styles from the selection
269 | - `code` (default: `(boolean) true`) :: Allows to display the raw HTML code
270 | 
271 | **Custom dropdowns**
272 | 
273 | Custom dropdowns allow to customize in a restricted way the dropdowns in the editor.
274 | 
275 | - `fileHTML` :: HTML string of the file dropdown. MUST include an input field (`select`, `input` or `textarea`) with the `id` equal to `fileURL`.
276 | - `imageHTML` :: HTML string of the image dropdown. MUST include an input field (`select`, `input` or `textarea`) with the `id` equal to `imageURL`.
277 | 
278 | **Translations**
279 | 
280 | - `translations` :: An object of key-value entries allowing to set other texts/translations for the editor. The keys must stay the same as in the default translation object.
281 | 
282 | **Privacy settings**
283 | 
284 | - `youtubeCookies` (default: `(boolean) false`) :: If set to true, YouTube might set tracking cookies. By default (if the value is set to `false`), `youtube-nocookie.com` will be used to display YouTube videos.
285 | 
286 | **Preview**
287 | 
288 | - `preview` (default: `(boolean) false`) :: If set to true, the `contenteditable` property is set to `false` and the toolbar buttons are not loaded.
289 | 
290 | **Placeholder**
291 | 
292 | - `placeholder` (default: `(string) ''`) :: If a non-empty string is set, a placeholder will be shown if no text has been written in the `contenteditable` part of the editor. HTML code without text is considered empty and displays the placeholder.
293 | 
294 | **Tabbing**
295 | 
296 | - `useTabForNext` (default: `(boolean) false`) :: If set to true, you can tab to the next input element or RichText editor within the `contenteditable` part of the editor.
297 | 
298 | **Developer settings**
299 | 
300 | - `useSingleQuotes` (default: `(boolean) false`) :: Replaces all double quotes from HTML attributes to single quotes, if set to `(boolean) true`.
301 | - `height` (default: `(int) 0`) :: Sets a custom height for the editor frame and code view. The default value `0` uses the initial height set with CSS. To overwrite the height without using this setting (and without using inline CSS), use the CSS selectors `.richText .richText-editor` and `.richText .richText-initial` to change the height.
302 | - `heightPercentage` (default: `(int) 0`) :: Sets a custom percentage height based on the editor's parent element. This won't work if the `height` option is used as well.
303 | - `adaptiveHeight` (default: `(boolean) false`) :: If `true`, the height of the editor will be adapted based on the height of the content.
304 | - `id` (default: `(string) ""`) :: Sets a custom ID for the editor
305 | - `class` (default: `(string) ""`) :: Sets additional custom classes for the editor
306 | - `useParagraph` (default: `(boolean) false`) :: Uses paragraph tags instead of div containers (browser default) when pressing ENTER, if set to `true`.
307 | - `maxlength` (default: `(int) 0`) :: Defines a max length for the text (HTML length not considered!). The default value `0` doesn't define any limit
308 | - `maxlengthIncludeHTML` (default: `(boolean) false`) :: If `true`, the length of the HTML code will be used instead of only the written text
309 | - `wordCount` (default: `(boolean) false`) :: If set to `true`, a word count will be displayed below the editor
310 | - `callback` (default: `undefined`) :: Sets a callback if the editor has been loaded. The first and only parameter of the callback contains the jQuery element of the editor
311 | - `save`: (default: `(boolean) false`) :: If set to `true`, an additional icon to save the content manually will be added
312 | - `saveOnBlur`: (default: `(int) 0`) :: If set to a value greater than 0, the editor will be saved after the given amount of milliseconds after the last change. The default value `0` disables this feature.
313 | - `saveCallback`: (default: `undefined`) :: If a function is set, it will be called after blur (see `saveOnBlur`) or when the save action is being triggered (see `save`). See [Saving the content](#saving-the-content) for more information.
314 | - `undoRedo`: (default `(boolean) true`) :: If set to `false`, the undo/redo buttons will be hidden
315 | - `disableScripts`: (default `(boolean) false`) :: If set to `true`, all `<script>` tags will be removed from the content
316 | - `DOMPurify`: (default `(boolean) false`) :: If set to `true`, the content will be sanitized using [DOMPurify](https://github.com/cure53/DOMPurify). Please note that this is not a built-in feature and you need to include the library yourself.
317 | 
318 | ## Saving the content
319 | 
320 | ### Save on blur
321 | 
322 | If the `saveOnBlur` setting is set to a value greater than 0, the editor will be saved after the given amount of milliseconds after the last change. The default value `0` disables this feature.
323 | Additionally, the editor element with the class `.richText-editor` will get the `change` event triggered, if the content has been changed.
324 | 
325 | By implementing the following code you are able to check for any changes within the editor:
326 | 
327 | ```javascript
328 | $('.richText-editor').on('change', function() { 
329 |     // your code here 
330 | });
331 | ```
332 | 
333 | On top of that, the `saveCallback` function will be called, if set. See [Save callback](#save-callback) for more information.
334 | 
335 | ### Save manually
336 | 
337 | If the `save` setting is set to `true`, an additional icon to save the content manually will be added. By clicking on the icon, the `saveCallback` function (see [Save callback](#save-callback)) will be called and the `change` event will be triggered on the editor element with the class `.richText-editor`.
338 | 
339 | ### Save callback
340 | 
341 | If the `saveCallback` setting is set to a function, it will be called after blur (see [Save on blur](#save-on-blur)) or when the save action is being triggered (see [Save manually](#save-manually)).
342 | If none of the mentioned settings are set, the `saveCallback` function will not be called.
343 | 
344 | The function will be called with the following parameters:
345 | 
346 | - `editor` :: The jQuery element of the editor (`.richText-editor`)
347 | - `source` :: A string indicating the source of the save action. Possible values are `blur` and `save`
348 | - `content` :: The HTML content of the editor
349 | 
350 | Example implementation:
351 | 
352 | ```javascript
353 | $('textarea.content').richText({
354 |     saveOnBlur: 1000,
355 |     save: true,
356 |     saveCallback: function (editor, source, content) {
357 |         console.log('editor: ', editor);
358 |         console.log('source: ', source);
359 |         console.log('content: ', content);
360 |     }
361 | });
362 | ```
363 | 
364 | ### Save via `<form>` submission
365 | 
366 | If the editor is placed within a `<form>` element, the content will be saved automatically when the form is being submitted.
367 | 
368 | The content of the editor will be saved to the textarea element, which has been used to initialize the editor.
369 | 
370 | Keep in mind, that a `name` attribute is required for the textarea element, otherwise the content won't be saved.
371 | 
372 | Example: 
373 | 
374 | ```html 
375 | <form method="post">
376 |     <textarea class="content" name="example"></textarea>
377 |     <button type="submit">Submit</button>
378 | </form>
379 | <script>
380 |     $('.content').richText();
381 | </script>
382 | ```
383 | 
384 | With this basic example code, the content of the editor will be set to the POST parameter `example`.
385 | 
386 | PHP:
387 | you can access the content with `$_POST['example']` (careful to properly sanitize any content!).
388 | 
389 | Node.js:
390 | you can access the content with `req.body.example` (careful to properly sanitize any content!).
391 | 
392 | 
393 | ## Events
394 | 
395 | The `.richText-editor` element listens to specific events in order to handle or modify the content of the editor.
396 | 
397 | ### Clear content
398 | 
399 | If you want to clear the content of the editor, you can trigger the `clear` event on the `.richText-editor` element.
400 | 
401 | *As noted in [#12](https://github.com/webfashionist/RichText/issues/12) the editor is considered empty if it contains `<div><br></div>` as content. 
402 | If you need to check if the editor is empty in the backend or frontend, you should strip `<div>`, `<p>` and `<br>` tags and check for the length of the content.*
403 | 
404 | **Example:**
405 | 
406 | ```javascript
407 | $('.richText-editor').trigger('clear');
408 | ```
409 | 
410 | ### Add content at caret position
411 | 
412 | If you want to add content at the caret position, you can trigger the `pasteAtCaret` event on the `.richText-editor` element.
413 | 
414 | **Example:**
415 | 
416 | ```javascript
417 | $('.richText-editor').trigger('pasteAtCaret', '<div>Some content</div>');
418 | ```
419 | 
420 | Note: If the editor is currently not focused/the caret not active, the editor will try to restore the last caret position.
421 | If the caret position is not available, the content will be added at the start of the available editor content.
422 | 
423 | ### Set content
424 | 
425 | If you want to set the content of the editor, you can trigger the `setContent` event on the `.richText-editor` element.
426 | 
427 | **Example:**
428 | 
429 | ```javascript
430 | $('.richText-editor').trigger('setContent', '<div>Some content</div>');
431 | ```
432 | 
433 | ### Get content
434 | 
435 | If you want to get the content of the editor, you can trigger the `getContent` event on the `.richText-editor` element.
436 | This event requires a callback function as second parameter, which will be called with the content as second parameter.
437 | 
438 | This event is similar to the `save` event, but it doesn't trigger the `saveCallback` function (see [Save callback](#save-callback)) and is therefore more variable to use for each event trigger.
439 | 
440 | **Example:**
441 | 
442 | ```javascript
443 | $('.richText-editor').trigger('getContent', function (event, content) {
444 |     console.log(content);
445 | });
446 | ```
447 | 
448 | 
449 | ### Save
450 | 
451 | If you want to save the content of the editor, you can trigger the `save` event on the `.richText-editor` element.
452 | The `saveCallback` function (see [Save callback](#save-callback)) will be called and the `change` event will be triggered on the editor element with the class `.richText-editor`.
453 | 
454 | **Example:**
455 | 
456 | ```javascript
457 | $('.richText-editor').trigger('save');
458 | ```
459 | 
460 | ### Destroy / Undo RichText
461 | 
462 | If you want to destroy the editor, you can trigger the `destroy` event on the `.richText-editor` element.
463 | The editor will be removed and the textarea element will be restored to its initial state keeping the current value set.
464 | 
465 | **Example:**
466 | 
467 | ```javascript
468 | $('.richText-editor').trigger('destroy');
469 | ```
470 | 
471 | You can also set a delay value in milliseconds to delay the destruction of the editor.
472 | 
473 | **Example:**
474 | 
475 | ```javascript
476 | $('.richText-editor').trigger('destroy', {delay: 2000});
477 | ```
478 | 
479 | Additionally the `callback` option is available as well and will provide the jQuery element of the remaining `<textarea>` node.
480 | 
481 | **Example:**
482 | 
483 | ```javascript
484 | $('.richText-editor').trigger('destroy', {delay: 2000, callback: function (textarea) {
485 |     console.log(textarea);
486 | }});
487 | ```
488 | 
489 | ### Customizing the colors
490 | 
491 | If you want to customize the colors of the RichText editor, you can update the `richtext-colors.scss` and run `npm run minifycss` after.
492 | The `richtext.min.css` will be updated with the new colors.
493 | 
494 | **Initial colors:**
495 | 
496 | ```scss
497 | $highlight: #3498db;
498 | $alabaster: #fafafa;
499 | $gallery: #efefef;
500 | $mine-shaft: #333333;
501 | $dusty-gray: #999999;
502 | $black: #000000;
503 | $white: #ffffff;
504 | $orange: #ffa500;
505 | $red: #ff0000;
506 | $emperor: #555555;
507 | $mine-shaft: #282828;
508 | $harlequin: #33ff33;
509 | $curious-blue: #3498db;
510 | ```
511 | 
512 | 
513 | ## FAQ
514 | 
515 | ### How do I set the RichText value through jQuery? Using `.val()` doesn't work?
516 | 
517 | Use the `setContent` event on the `.richText-editor` node as explained in [Set content](#set-content).  
518 |     
519 | ### My editor does not save the content, what can I do?
520 | 
521 | Make sure that the textarea element has a `name` attribute. Otherwise the content won't be saved if you are trying to save the editor's content via form submission.
522 | 
523 | Please read the section [Saving the content](#saving-the-content) for more information about all the possibilities to save the content.
524 | 
525 | ### Do I need to sanitize the content before saving it?
526 | 
527 | Yes, you should always sanitize the content before saving it to your database.
528 | Always be careful about SQL injection and XSS attacks.
529 | 
530 | As this is only a frontend solution, you should always validate and sanitize the content on the server side (PHP, Node.js or any other backend language).
531 | 
532 | To keep the editor available for multiple use cases and open to also include JavaScript code, the editor does not provide any sanitation methods by default.
533 | 
534 | You do however have two options to sanitize the content within RichText:
535 | - Use `disableScripts: true` to remove all `<script>` tags and `javascript:` attributes from the HTML content
536 | - Use `DOMPurify: true` to sanitize the content with [DOMPurify](https://github.com/cure53/DOMPurify). Please note that this is not a built-in feature and you need to include the library yourself.
537 | 
538 | Please note that the sanitation is only done on the client side and you should always validate and sanitize the content on the server side as well.
539 | Both options are only a basic sanitation for XSS attacks and not a full sanitation for all possible attacks.
540 | Also, SQL injections are not addressed by this sanitation.
541 | 
542 | 
543 | More information on security topics:
544 | - [OWASP: SQL Injection](https://owasp.org/www-community/attacks/SQL_Injection)
545 | - [OWASP: Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/)
546 | - [OWASP: Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf)
547 | - [StackExchange Security: Filter user input before the database or upon display?](https://security.stackexchange.com/questions/9415/filter-user-input-before-the-database-or-upon-display)
548 | - [Content Security Policy (CSP) Quick Reference Guide](https://content-security-policy.com/)
549 | - [DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.](https://github.com/cure53/DOMPurify)
550 | 
551 | 
552 | ### Is it compatible with DOMPurify?
553 | 
554 | Yes, you can use the [DOMPurify](https://github.com/cure53/DOMPurify) library to sanitize the content of the editor.
555 | If you want to use DOMPurify, you need to include the library yourself and use the `DOMPurify: true` setting within the RichText options.
556 | 
557 | RichText will then handle the sanitation of the content with DOMPurify.
558 | 
559 | ## Contributing
560 | 
561 | If you have any ideas, suggestions, issues or bugfixes, feel free to contribute.
562 | 
563 | Check out the [contributing guidelines](CONTRIBUTING.md) for ways to offer feedback and contribute.
564 | 
565 | ## Planned changes
566 | 
567 | - Add/remove columns/cells in table after it was created
568 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU AFFERO GENERAL PUBLIC LICENSE
  2 |                        Version 3, 19 November 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU Affero General Public License is a free, copyleft license for
 11 | software and other kinds of works, specifically designed to ensure
 12 | cooperation with the community in the case of network server software.
 13 | 
 14 |   The licenses for most software and other practical works are designed
 15 | to take away your freedom to share and change the works.  By contrast,
 16 | our General Public Licenses are intended to guarantee your freedom to
 17 | share and change all versions of a program--to make sure it remains free
 18 | software for all its users.
 19 | 
 20 |   When we speak of free software, we are referring to freedom, not
 21 | price.  Our General Public Licenses are designed to make sure that you
 22 | have the freedom to distribute copies of free software (and charge for
 23 | them if you wish), that you receive source code or can get it if you
 24 | want it, that you can change the software or use pieces of it in new
 25 | free programs, and that you know you can do these things.
 26 | 
 27 |   Developers that use our General Public Licenses protect your rights
 28 | with two steps: (1) assert copyright on the software, and (2) offer
 29 | you this License which gives you legal permission to copy, distribute
 30 | and/or modify the software.
 31 | 
 32 |   A secondary benefit of defending all users' freedom is that
 33 | improvements made in alternate versions of the program, if they
 34 | receive widespread use, become available for other developers to
 35 | incorporate.  Many developers of free software are heartened and
 36 | encouraged by the resulting cooperation.  However, in the case of
 37 | software used on network servers, this result may fail to come about.
 38 | The GNU General Public License permits making a modified version and
 39 | letting the public access it on a server without ever releasing its
 40 | source code to the public.
 41 | 
 42 |   The GNU Affero General Public License is designed specifically to
 43 | ensure that, in such cases, the modified source code becomes available
 44 | to the community.  It requires the operator of a network server to
 45 | provide the source code of the modified version running there to the
 46 | users of that server.  Therefore, public use of a modified version, on
 47 | a publicly accessible server, gives the public access to the source
 48 | code of the modified version.
 49 | 
 50 |   An older license, called the Affero General Public License and
 51 | published by Affero, was designed to accomplish similar goals.  This is
 52 | a different license, not a version of the Affero GPL, but Affero has
 53 | released a new version of the Affero GPL which permits relicensing under
 54 | this license.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                        TERMS AND CONDITIONS
 60 | 
 61 |   0. Definitions.
 62 | 
 63 |   "This License" refers to version 3 of the GNU Affero General Public License.
 64 | 
 65 |   "Copyright" also means copyright-like laws that apply to other kinds of
 66 | works, such as semiconductor masks.
 67 | 
 68 |   "The Program" refers to any copyrightable work licensed under this
 69 | License.  Each licensee is addressed as "you".  "Licensees" and
 70 | "recipients" may be individuals or organizations.
 71 | 
 72 |   To "modify" a work means to copy from or adapt all or part of the work
 73 | in a fashion requiring copyright permission, other than the making of an
 74 | exact copy.  The resulting work is called a "modified version" of the
 75 | earlier work or a work "based on" the earlier work.
 76 | 
 77 |   A "covered work" means either the unmodified Program or a work based
 78 | on the Program.
 79 | 
 80 |   To "propagate" a work means to do anything with it that, without
 81 | permission, would make you directly or secondarily liable for
 82 | infringement under applicable copyright law, except executing it on a
 83 | computer or modifying a private copy.  Propagation includes copying,
 84 | distribution (with or without modification), making available to the
 85 | public, and in some countries other activities as well.
 86 | 
 87 |   To "convey" a work means any kind of propagation that enables other
 88 | parties to make or receive copies.  Mere interaction with a user through
 89 | a computer network, with no transfer of a copy, is not conveying.
 90 | 
 91 |   An interactive user interface displays "Appropriate Legal Notices"
 92 | to the extent that it includes a convenient and prominently visible
 93 | feature that (1) displays an appropriate copyright notice, and (2)
 94 | tells the user that there is no warranty for the work (except to the
 95 | extent that warranties are provided), that licensees may convey the
 96 | work under this License, and how to view a copy of this License.  If
 97 | the interface presents a list of user commands or options, such as a
 98 | menu, a prominent item in the list meets this criterion.
 99 | 
100 |   1. Source Code.
101 | 
102 |   The "source code" for a work means the preferred form of the work
103 | for making modifications to it.  "Object code" means any non-source
104 | form of a work.
105 | 
106 |   A "Standard Interface" means an interface that either is an official
107 | standard defined by a recognized standards body, or, in the case of
108 | interfaces specified for a particular programming language, one that
109 | is widely used among developers working in that language.
110 | 
111 |   The "System Libraries" of an executable work include anything, other
112 | than the work as a whole, that (a) is included in the normal form of
113 | packaging a Major Component, but which is not part of that Major
114 | Component, and (b) serves only to enable use of the work with that
115 | Major Component, or to implement a Standard Interface for which an
116 | implementation is available to the public in source code form.  A
117 | "Major Component", in this context, means a major essential component
118 | (kernel, window system, and so on) of the specific operating system
119 | (if any) on which the executable work runs, or a compiler used to
120 | produce the work, or an object code interpreter used to run it.
121 | 
122 |   The "Corresponding Source" for a work in object code form means all
123 | the source code needed to generate, install, and (for an executable
124 | work) run the object code and to modify the work, including scripts to
125 | control those activities.  However, it does not include the work's
126 | System Libraries, or general-purpose tools or generally available free
127 | programs which are used unmodified in performing those activities but
128 | which are not part of the work.  For example, Corresponding Source
129 | includes interface definition files associated with source files for
130 | the work, and the source code for shared libraries and dynamically
131 | linked subprograms that the work is specifically designed to require,
132 | such as by intimate data communication or control flow between those
133 | subprograms and other parts of the work.
134 | 
135 |   The Corresponding Source need not include anything that users
136 | can regenerate automatically from other parts of the Corresponding
137 | Source.
138 | 
139 |   The Corresponding Source for a work in source code form is that
140 | same work.
141 | 
142 |   2. Basic Permissions.
143 | 
144 |   All rights granted under this License are granted for the term of
145 | copyright on the Program, and are irrevocable provided the stated
146 | conditions are met.  This License explicitly affirms your unlimited
147 | permission to run the unmodified Program.  The output from running a
148 | covered work is covered by this License only if the output, given its
149 | content, constitutes a covered work.  This License acknowledges your
150 | rights of fair use or other equivalent, as provided by copyright law.
151 | 
152 |   You may make, run and propagate covered works that you do not
153 | convey, without conditions so long as your license otherwise remains
154 | in force.  You may convey covered works to others for the sole purpose
155 | of having them make modifications exclusively for you, or provide you
156 | with facilities for running those works, provided that you comply with
157 | the terms of this License in conveying all material for which you do
158 | not control copyright.  Those thus making or running the covered works
159 | for you must do so exclusively on your behalf, under your direction
160 | and control, on terms that prohibit them from making any copies of
161 | your copyrighted material outside their relationship with you.
162 | 
163 |   Conveying under any other circumstances is permitted solely under
164 | the conditions stated below.  Sublicensing is not allowed; section 10
165 | makes it unnecessary.
166 | 
167 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
168 | 
169 |   No covered work shall be deemed part of an effective technological
170 | measure under any applicable law fulfilling obligations under article
171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
172 | similar laws prohibiting or restricting circumvention of such
173 | measures.
174 | 
175 |   When you convey a covered work, you waive any legal power to forbid
176 | circumvention of technological measures to the extent such circumvention
177 | is effected by exercising rights under this License with respect to
178 | the covered work, and you disclaim any intention to limit operation or
179 | modification of the work as a means of enforcing, against the work's
180 | users, your or third parties' legal rights to forbid circumvention of
181 | technological measures.
182 | 
183 |   4. Conveying Verbatim Copies.
184 | 
185 |   You may convey verbatim copies of the Program's source code as you
186 | receive it, in any medium, provided that you conspicuously and
187 | appropriately publish on each copy an appropriate copyright notice;
188 | keep intact all notices stating that this License and any
189 | non-permissive terms added in accord with section 7 apply to the code;
190 | keep intact all notices of the absence of any warranty; and give all
191 | recipients a copy of this License along with the Program.
192 | 
193 |   You may charge any price or no price for each copy that you convey,
194 | and you may offer support or warranty protection for a fee.
195 | 
196 |   5. Conveying Modified Source Versions.
197 | 
198 |   You may convey a work based on the Program, or the modifications to
199 | produce it from the Program, in the form of source code under the
200 | terms of section 4, provided that you also meet all of these conditions:
201 | 
202 |     a) The work must carry prominent notices stating that you modified
203 |     it, and giving a relevant date.
204 | 
205 |     b) The work must carry prominent notices stating that it is
206 |     released under this License and any conditions added under section
207 |     7.  This requirement modifies the requirement in section 4 to
208 |     "keep intact all notices".
209 | 
210 |     c) You must license the entire work, as a whole, under this
211 |     License to anyone who comes into possession of a copy.  This
212 |     License will therefore apply, along with any applicable section 7
213 |     additional terms, to the whole of the work, and all its parts,
214 |     regardless of how they are packaged.  This License gives no
215 |     permission to license the work in any other way, but it does not
216 |     invalidate such permission if you have separately received it.
217 | 
218 |     d) If the work has interactive user interfaces, each must display
219 |     Appropriate Legal Notices; however, if the Program has interactive
220 |     interfaces that do not display Appropriate Legal Notices, your
221 |     work need not make them do so.
222 | 
223 |   A compilation of a covered work with other separate and independent
224 | works, which are not by their nature extensions of the covered work,
225 | and which are not combined with it such as to form a larger program,
226 | in or on a volume of a storage or distribution medium, is called an
227 | "aggregate" if the compilation and its resulting copyright are not
228 | used to limit the access or legal rights of the compilation's users
229 | beyond what the individual works permit.  Inclusion of a covered work
230 | in an aggregate does not cause this License to apply to the other
231 | parts of the aggregate.
232 | 
233 |   6. Conveying Non-Source Forms.
234 | 
235 |   You may convey a covered work in object code form under the terms
236 | of sections 4 and 5, provided that you also convey the
237 | machine-readable Corresponding Source under the terms of this License,
238 | in one of these ways:
239 | 
240 |     a) Convey the object code in, or embodied in, a physical product
241 |     (including a physical distribution medium), accompanied by the
242 |     Corresponding Source fixed on a durable physical medium
243 |     customarily used for software interchange.
244 | 
245 |     b) Convey the object code in, or embodied in, a physical product
246 |     (including a physical distribution medium), accompanied by a
247 |     written offer, valid for at least three years and valid for as
248 |     long as you offer spare parts or customer support for that product
249 |     model, to give anyone who possesses the object code either (1) a
250 |     copy of the Corresponding Source for all the software in the
251 |     product that is covered by this License, on a durable physical
252 |     medium customarily used for software interchange, for a price no
253 |     more than your reasonable cost of physically performing this
254 |     conveying of source, or (2) access to copy the
255 |     Corresponding Source from a network server at no charge.
256 | 
257 |     c) Convey individual copies of the object code with a copy of the
258 |     written offer to provide the Corresponding Source.  This
259 |     alternative is allowed only occasionally and noncommercially, and
260 |     only if you received the object code with such an offer, in accord
261 |     with subsection 6b.
262 | 
263 |     d) Convey the object code by offering access from a designated
264 |     place (gratis or for a charge), and offer equivalent access to the
265 |     Corresponding Source in the same way through the same place at no
266 |     further charge.  You need not require recipients to copy the
267 |     Corresponding Source along with the object code.  If the place to
268 |     copy the object code is a network server, the Corresponding Source
269 |     may be on a different server (operated by you or a third party)
270 |     that supports equivalent copying facilities, provided you maintain
271 |     clear directions next to the object code saying where to find the
272 |     Corresponding Source.  Regardless of what server hosts the
273 |     Corresponding Source, you remain obligated to ensure that it is
274 |     available for as long as needed to satisfy these requirements.
275 | 
276 |     e) Convey the object code using peer-to-peer transmission, provided
277 |     you inform other peers where the object code and Corresponding
278 |     Source of the work are being offered to the general public at no
279 |     charge under subsection 6d.
280 | 
281 |   A separable portion of the object code, whose source code is excluded
282 | from the Corresponding Source as a System Library, need not be
283 | included in conveying the object code work.
284 | 
285 |   A "User Product" is either (1) a "consumer product", which means any
286 | tangible personal property which is normally used for personal, family,
287 | or household purposes, or (2) anything designed or sold for incorporation
288 | into a dwelling.  In determining whether a product is a consumer product,
289 | doubtful cases shall be resolved in favor of coverage.  For a particular
290 | product received by a particular user, "normally used" refers to a
291 | typical or common use of that class of product, regardless of the status
292 | of the particular user or of the way in which the particular user
293 | actually uses, or expects or is expected to use, the product.  A product
294 | is a consumer product regardless of whether the product has substantial
295 | commercial, industrial or non-consumer uses, unless such uses represent
296 | the only significant mode of use of the product.
297 | 
298 |   "Installation Information" for a User Product means any methods,
299 | procedures, authorization keys, or other information required to install
300 | and execute modified versions of a covered work in that User Product from
301 | a modified version of its Corresponding Source.  The information must
302 | suffice to ensure that the continued functioning of the modified object
303 | code is in no case prevented or interfered with solely because
304 | modification has been made.
305 | 
306 |   If you convey an object code work under this section in, or with, or
307 | specifically for use in, a User Product, and the conveying occurs as
308 | part of a transaction in which the right of possession and use of the
309 | User Product is transferred to the recipient in perpetuity or for a
310 | fixed term (regardless of how the transaction is characterized), the
311 | Corresponding Source conveyed under this section must be accompanied
312 | by the Installation Information.  But this requirement does not apply
313 | if neither you nor any third party retains the ability to install
314 | modified object code on the User Product (for example, the work has
315 | been installed in ROM).
316 | 
317 |   The requirement to provide Installation Information does not include a
318 | requirement to continue to provide support service, warranty, or updates
319 | for a work that has been modified or installed by the recipient, or for
320 | the User Product in which it has been modified or installed.  Access to a
321 | network may be denied when the modification itself materially and
322 | adversely affects the operation of the network or violates the rules and
323 | protocols for communication across the network.
324 | 
325 |   Corresponding Source conveyed, and Installation Information provided,
326 | in accord with this section must be in a format that is publicly
327 | documented (and with an implementation available to the public in
328 | source code form), and must require no special password or key for
329 | unpacking, reading or copying.
330 | 
331 |   7. Additional Terms.
332 | 
333 |   "Additional permissions" are terms that supplement the terms of this
334 | License by making exceptions from one or more of its conditions.
335 | Additional permissions that are applicable to the entire Program shall
336 | be treated as though they were included in this License, to the extent
337 | that they are valid under applicable law.  If additional permissions
338 | apply only to part of the Program, that part may be used separately
339 | under those permissions, but the entire Program remains governed by
340 | this License without regard to the additional permissions.
341 | 
342 |   When you convey a copy of a covered work, you may at your option
343 | remove any additional permissions from that copy, or from any part of
344 | it.  (Additional permissions may be written to require their own
345 | removal in certain cases when you modify the work.)  You may place
346 | additional permissions on material, added by you to a covered work,
347 | for which you have or can give appropriate copyright permission.
348 | 
349 |   Notwithstanding any other provision of this License, for material you
350 | add to a covered work, you may (if authorized by the copyright holders of
351 | that material) supplement the terms of this License with terms:
352 | 
353 |     a) Disclaiming warranty or limiting liability differently from the
354 |     terms of sections 15 and 16 of this License; or
355 | 
356 |     b) Requiring preservation of specified reasonable legal notices or
357 |     author attributions in that material or in the Appropriate Legal
358 |     Notices displayed by works containing it; or
359 | 
360 |     c) Prohibiting misrepresentation of the origin of that material, or
361 |     requiring that modified versions of such material be marked in
362 |     reasonable ways as different from the original version; or
363 | 
364 |     d) Limiting the use for publicity purposes of names of licensors or
365 |     authors of the material; or
366 | 
367 |     e) Declining to grant rights under trademark law for use of some
368 |     trade names, trademarks, or service marks; or
369 | 
370 |     f) Requiring indemnification of licensors and authors of that
371 |     material by anyone who conveys the material (or modified versions of
372 |     it) with contractual assumptions of liability to the recipient, for
373 |     any liability that these contractual assumptions directly impose on
374 |     those licensors and authors.
375 | 
376 |   All other non-permissive additional terms are considered "further
377 | restrictions" within the meaning of section 10.  If the Program as you
378 | received it, or any part of it, contains a notice stating that it is
379 | governed by this License along with a term that is a further
380 | restriction, you may remove that term.  If a license document contains
381 | a further restriction but permits relicensing or conveying under this
382 | License, you may add to a covered work material governed by the terms
383 | of that license document, provided that the further restriction does
384 | not survive such relicensing or conveying.
385 | 
386 |   If you add terms to a covered work in accord with this section, you
387 | must place, in the relevant source files, a statement of the
388 | additional terms that apply to those files, or a notice indicating
389 | where to find the applicable terms.
390 | 
391 |   Additional terms, permissive or non-permissive, may be stated in the
392 | form of a separately written license, or stated as exceptions;
393 | the above requirements apply either way.
394 | 
395 |   8. Termination.
396 | 
397 |   You may not propagate or modify a covered work except as expressly
398 | provided under this License.  Any attempt otherwise to propagate or
399 | modify it is void, and will automatically terminate your rights under
400 | this License (including any patent licenses granted under the third
401 | paragraph of section 11).
402 | 
403 |   However, if you cease all violation of this License, then your
404 | license from a particular copyright holder is reinstated (a)
405 | provisionally, unless and until the copyright holder explicitly and
406 | finally terminates your license, and (b) permanently, if the copyright
407 | holder fails to notify you of the violation by some reasonable means
408 | prior to 60 days after the cessation.
409 | 
410 |   Moreover, your license from a particular copyright holder is
411 | reinstated permanently if the copyright holder notifies you of the
412 | violation by some reasonable means, this is the first time you have
413 | received notice of violation of this License (for any work) from that
414 | copyright holder, and you cure the violation prior to 30 days after
415 | your receipt of the notice.
416 | 
417 |   Termination of your rights under this section does not terminate the
418 | licenses of parties who have received copies or rights from you under
419 | this License.  If your rights have been terminated and not permanently
420 | reinstated, you do not qualify to receive new licenses for the same
421 | material under section 10.
422 | 
423 |   9. Acceptance Not Required for Having Copies.
424 | 
425 |   You are not required to accept this License in order to receive or
426 | run a copy of the Program.  Ancillary propagation of a covered work
427 | occurring solely as a consequence of using peer-to-peer transmission
428 | to receive a copy likewise does not require acceptance.  However,
429 | nothing other than this License grants you permission to propagate or
430 | modify any covered work.  These actions infringe copyright if you do
431 | not accept this License.  Therefore, by modifying or propagating a
432 | covered work, you indicate your acceptance of this License to do so.
433 | 
434 |   10. Automatic Licensing of Downstream Recipients.
435 | 
436 |   Each time you convey a covered work, the recipient automatically
437 | receives a license from the original licensors, to run, modify and
438 | propagate that work, subject to this License.  You are not responsible
439 | for enforcing compliance by third parties with this License.
440 | 
441 |   An "entity transaction" is a transaction transferring control of an
442 | organization, or substantially all assets of one, or subdividing an
443 | organization, or merging organizations.  If propagation of a covered
444 | work results from an entity transaction, each party to that
445 | transaction who receives a copy of the work also receives whatever
446 | licenses to the work the party's predecessor in interest had or could
447 | give under the previous paragraph, plus a right to possession of the
448 | Corresponding Source of the work from the predecessor in interest, if
449 | the predecessor has it or can get it with reasonable efforts.
450 | 
451 |   You may not impose any further restrictions on the exercise of the
452 | rights granted or affirmed under this License.  For example, you may
453 | not impose a license fee, royalty, or other charge for exercise of
454 | rights granted under this License, and you may not initiate litigation
455 | (including a cross-claim or counterclaim in a lawsuit) alleging that
456 | any patent claim is infringed by making, using, selling, offering for
457 | sale, or importing the Program or any portion of it.
458 | 
459 |   11. Patents.
460 | 
461 |   A "contributor" is a copyright holder who authorizes use under this
462 | License of the Program or a work on which the Program is based.  The
463 | work thus licensed is called the contributor's "contributor version".
464 | 
465 |   A contributor's "essential patent claims" are all patent claims
466 | owned or controlled by the contributor, whether already acquired or
467 | hereafter acquired, that would be infringed by some manner, permitted
468 | by this License, of making, using, or selling its contributor version,
469 | but do not include claims that would be infringed only as a
470 | consequence of further modification of the contributor version.  For
471 | purposes of this definition, "control" includes the right to grant
472 | patent sublicenses in a manner consistent with the requirements of
473 | this License.
474 | 
475 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
476 | patent license under the contributor's essential patent claims, to
477 | make, use, sell, offer for sale, import and otherwise run, modify and
478 | propagate the contents of its contributor version.
479 | 
480 |   In the following three paragraphs, a "patent license" is any express
481 | agreement or commitment, however denominated, not to enforce a patent
482 | (such as an express permission to practice a patent or covenant not to
483 | sue for patent infringement).  To "grant" such a patent license to a
484 | party means to make such an agreement or commitment not to enforce a
485 | patent against the party.
486 | 
487 |   If you convey a covered work, knowingly relying on a patent license,
488 | and the Corresponding Source of the work is not available for anyone
489 | to copy, free of charge and under the terms of this License, through a
490 | publicly available network server or other readily accessible means,
491 | then you must either (1) cause the Corresponding Source to be so
492 | available, or (2) arrange to deprive yourself of the benefit of the
493 | patent license for this particular work, or (3) arrange, in a manner
494 | consistent with the requirements of this License, to extend the patent
495 | license to downstream recipients.  "Knowingly relying" means you have
496 | actual knowledge that, but for the patent license, your conveying the
497 | covered work in a country, or your recipient's use of the covered work
498 | in a country, would infringe one or more identifiable patents in that
499 | country that you have reason to believe are valid.
500 | 
501 |   If, pursuant to or in connection with a single transaction or
502 | arrangement, you convey, or propagate by procuring conveyance of, a
503 | covered work, and grant a patent license to some of the parties
504 | receiving the covered work authorizing them to use, propagate, modify
505 | or convey a specific copy of the covered work, then the patent license
506 | you grant is automatically extended to all recipients of the covered
507 | work and works based on it.
508 | 
509 |   A patent license is "discriminatory" if it does not include within
510 | the scope of its coverage, prohibits the exercise of, or is
511 | conditioned on the non-exercise of one or more of the rights that are
512 | specifically granted under this License.  You may not convey a covered
513 | work if you are a party to an arrangement with a third party that is
514 | in the business of distributing software, under which you make payment
515 | to the third party based on the extent of your activity of conveying
516 | the work, and under which the third party grants, to any of the
517 | parties who would receive the covered work from you, a discriminatory
518 | patent license (a) in connection with copies of the covered work
519 | conveyed by you (or copies made from those copies), or (b) primarily
520 | for and in connection with specific products or compilations that
521 | contain the covered work, unless you entered into that arrangement,
522 | or that patent license was granted, prior to 28 March 2007.
523 | 
524 |   Nothing in this License shall be construed as excluding or limiting
525 | any implied license or other defenses to infringement that may
526 | otherwise be available to you under applicable patent law.
527 | 
528 |   12. No Surrender of Others' Freedom.
529 | 
530 |   If conditions are imposed on you (whether by court order, agreement or
531 | otherwise) that contradict the conditions of this License, they do not
532 | excuse you from the conditions of this License.  If you cannot convey a
533 | covered work so as to satisfy simultaneously your obligations under this
534 | License and any other pertinent obligations, then as a consequence you may
535 | not convey it at all.  For example, if you agree to terms that obligate you
536 | to collect a royalty for further conveying from those to whom you convey
537 | the Program, the only way you could satisfy both those terms and this
538 | License would be to refrain entirely from conveying the Program.
539 | 
540 |   13. Remote Network Interaction; Use with the GNU General Public License.
541 | 
542 |   Notwithstanding any other provision of this License, if you modify the
543 | Program, your modified version must prominently offer all users
544 | interacting with it remotely through a computer network (if your version
545 | supports such interaction) an opportunity to receive the Corresponding
546 | Source of your version by providing access to the Corresponding Source
547 | from a network server at no charge, through some standard or customary
548 | means of facilitating copying of software.  This Corresponding Source
549 | shall include the Corresponding Source for any work covered by version 3
550 | of the GNU General Public License that is incorporated pursuant to the
551 | following paragraph.
552 | 
553 |   Notwithstanding any other provision of this License, you have
554 | permission to link or combine any covered work with a work licensed
555 | under version 3 of the GNU General Public License into a single
556 | combined work, and to convey the resulting work.  The terms of this
557 | License will continue to apply to the part which is the covered work,
558 | but the work with which it is combined will remain governed by version
559 | 3 of the GNU General Public License.
560 | 
561 |   14. Revised Versions of this License.
562 | 
563 |   The Free Software Foundation may publish revised and/or new versions of
564 | the GNU Affero General Public License from time to time.  Such new versions
565 | will be similar in spirit to the present version, but may differ in detail to
566 | address new problems or concerns.
567 | 
568 |   Each version is given a distinguishing version number.  If the
569 | Program specifies that a certain numbered version of the GNU Affero General
570 | Public License "or any later version" applies to it, you have the
571 | option of following the terms and conditions either of that numbered
572 | version or of any later version published by the Free Software
573 | Foundation.  If the Program does not specify a version number of the
574 | GNU Affero General Public License, you may choose any version ever published
575 | by the Free Software Foundation.
576 | 
577 |   If the Program specifies that a proxy can decide which future
578 | versions of the GNU Affero General Public License can be used, that proxy's
579 | public statement of acceptance of a version permanently authorizes you
580 | to choose that version for the Program.
581 | 
582 |   Later license versions may give you additional or different
583 | permissions.  However, no additional obligations are imposed on any
584 | author or copyright holder as a result of your choosing to follow a
585 | later version.
586 | 
587 |   15. Disclaimer of Warranty.
588 | 
589 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
590 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
594 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
595 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
597 | 
598 |   16. Limitation of Liability.
599 | 
600 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
608 | SUCH DAMAGES.
609 | 
610 |   17. Interpretation of Sections 15 and 16.
611 | 
612 |   If the disclaimer of warranty and limitation of liability provided
613 | above cannot be given local legal effect according to their terms,
614 | reviewing courts shall apply local law that most closely approximates
615 | an absolute waiver of all civil liability in connection with the
616 | Program, unless a warranty or assumption of liability accompanies a
617 | copy of the Program in return for a fee.
618 | 
619 |                      END OF TERMS AND CONDITIONS
620 | 
621 |             How to Apply These Terms to Your New Programs
622 | 
623 |   If you develop a new program, and you want it to be of the greatest
624 | possible use to the public, the best way to achieve this is to make it
625 | free software which everyone can redistribute and change under these terms.
626 | 
627 |   To do so, attach the following notices to the program.  It is safest
628 | to attach them to the start of each source file to most effectively
629 | state the exclusion of warranty; and each file should have at least
630 | the "copyright" line and a pointer to where the full notice is found.
631 | 
632 |     <one line to give the program's name and a brief idea of what it does.>
633 |     Copyright (C) <year>  <name of author>
634 | 
635 |     This program is free software: you can redistribute it and/or modify
636 |     it under the terms of the GNU Affero General Public License as published
637 |     by the Free Software Foundation, either version 3 of the License, or
638 |     (at your option) any later version.
639 | 
640 |     This program is distributed in the hope that it will be useful,
641 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
642 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
643 |     GNU Affero General Public License for more details.
644 | 
645 |     You should have received a copy of the GNU Affero General Public License
646 |     along with this program.  If not, see <http://www.gnu.org/licenses/>.
647 | 
648 | Also add information on how to contact you by electronic and paper mail.
649 | 
650 |   If your software can interact with users remotely through a computer
651 | network, you should also make sure that it provides a way for users to
652 | get its source.  For example, if your program is a web application, its
653 | interface could display a "Source" link that leads users to an archive
654 | of the code.  There are many ways you could offer source, and different
655 | solutions will be better for different programs; see section 13 for the
656 | specific requirements.
657 | 
658 |   You should also get your employer (if you work as a programmer) or school,
659 | if any, to sign a "copyright disclaimer" for the program, if necessary.
660 | For more information on this, and how to apply and follow the GNU AGPL, see
661 | <http://www.gnu.org/licenses/>.
662 | 


--------------------------------------------------------------------------------
/src/jquery.richtext.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  RichText: WYSIWYG editor developed as jQuery plugin
 3 | 
 4 |  @name RichText
 5 |  @version 1.1.0
 6 |  @author https://github.com/webfashionist - Bob Schockweiler - richtext@webfashion.eu
 7 |  @license GNU AFFERO GENERAL PUBLIC LICENSE Version 3
 8 |  @preserve
 9 | 
10 |  Copyright (C) 2020 Bob Schockweiler ( richtext@webfashion.eu )
11 | 
12 |  This program is free software: you can redistribute it and/or modify
13 |  it under the terms of the GNU Affero General Public License as published
14 |  by the Free Software Foundation, either version 3 of the License, or
15 |  (at your option) any later version.
16 | 
17 |  This program is distributed in the hope that it will be useful,
18 |  but WITHOUT ANY WARRANTY; without even the implied warranty of
19 |  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
20 |  GNU Affero General Public License for more details.
21 | 
22 |  You should have received a copy of the GNU Affero General Public License
23 |  along with this program.  If not, see <http://www.gnu.org/licenses/>.
24 | */
25 | (function($){$.fn.richText=function(options){var settings=$.extend({bold:true,italic:true,underline:true,leftAlign:true,centerAlign:true,rightAlign:true,justify:true,ol:true,ul:true,heading:true,fonts:true,fontList:["Arial","Arial Black","Comic Sans MS","Courier New","Geneva","Georgia","Helvetica","Impact","Lucida Console","Tahoma","Times New Roman","Verdana"],fontColor:true,backgroundColor:true,fontSize:true,fontSizes:undefined,imageUpload:true,fileUpload:true,videoEmbed:true,urls:true,table:true,removeStyles:true,code:true,colors:[],fileHTML:"",imageHTML:"",translations:{title:"Title",white:"White",black:"Black",brown:"Brown",beige:"Beige",darkBlue:"Dark Blue",blue:"Blue",lightBlue:"Light Blue",darkRed:"Dark Red",red:"Red",darkGreen:"Dark Green",green:"Green",purple:"Purple",darkTurquois:"Dark Turquois",turquois:"Turquois",darkOrange:"Dark Orange",orange:"Orange",yellow:"Yellow",imageURL:"Image URL",altText:"Alternative text",fileURL:"File URL",linkText:"Link text",url:"URL",size:"Size",responsive:"Responsive",text:"Text",openIn:"Open in",sameTab:"Same tab",newTab:"New tab",align:"Align",left:"Left",justify:"Justify",center:"Center",right:"Right",rows:"Rows",columns:"Columns",add:"Add",pleaseEnterURL:"Please enter an URL",videoURLnotSupported:"Video URL not supported",pleaseSelectImage:"Please select an image",pleaseSelectFile:"Please select a file",bold:"Bold",italic:"Italic",underline:"Underline",alignLeft:"Align left",alignCenter:"Align centered",alignRight:"Align right",addOrderedList:"Ordered list",addUnorderedList:"Unordered list",addHeading:"Heading/title",addFont:"Font",addFontColor:"Font color",addBackgroundColor:"Background color",addFontSize:"Font size",addImage:"Add image",addVideo:"Add video",addFile:"Add file",addURL:"Add URL",addTable:"Add table",removeStyles:"Remove styles",code:"Show HTML code",undo:"Undo",redo:"Redo",save:"Save",close:"Close",help:"Help",words:"word(s)"},youtubeCookies:false,preview:false,placeholder:"",useSingleQuotes:false,height:0,heightPercentage:0,adaptiveHeight:false,id:"",class:"",useParagraph:false,maxlength:0,maxlengthIncludeHTML:false,wordCount:false,callback:undefined,useTabForNext:false,save:false,saveCallback:undefined,saveOnBlur:0,undoRedo:true,disableScripts:false,DOMPurify:false},options);var $inputElement=$(this);$inputElement.addClass("richText-initial");var $editor,$toolbarList=$("<ul />"),$toolbarElement=$("<li />"),$btnBold=$("<a />",{class:"richText-btn","data-command":"bold",title:settings.translations.bold,name:"bold","aria-label":settings.translations.bold,"aria-role":"button",html:'<span class="fa fa-bold"></span>'}),$btnItalic=$("<a />",{class:"richText-btn","data-command":"italic",title:settings.translations.italic,name:"italic","aria-label":settings.translations.italic,"aria-role":"button",html:'<span class="fa fa-italic"></span>'}),$btnUnderline=$("<a />",{class:"richText-btn","data-command":"underline",title:settings.translations.underline,name:"underline","aria-label":settings.translations.underline,"aria-role":"button",html:'<span class="fa fa-underline"></span>'}),$btnJustify=$("<a />",{class:"richText-btn","data-command":"justifyFull",title:settings.translations.justify,name:"justify","aria-label":settings.translations.justify,"aria-role":"button",html:'<span class="fa fa-align-justify"></span>'}),$btnLeftAlign=$("<a />",{class:"richText-btn","data-command":"justifyLeft",title:settings.translations.alignLeft,name:"alignLeft","aria-label":settings.translations.alignLeft,"aria-role":"button",html:'<span class="fa fa-align-left"></span>'}),$btnCenterAlign=$("<a />",{class:"richText-btn","data-command":"justifyCenter",title:settings.translations.alignCenter,name:"alignCenter","aria-label":settings.translations.alignCenter,"aria-role":"button",html:'<span class="fa fa-align-center"></span>'}),$btnRightAlign=$("<a />",{class:"richText-btn","data-command":"justifyRight",title:settings.translations.alignRight,name:"alignRight","aria-label":settings.translations.alignRight,"aria-role":"button",html:'<span class="fa fa-align-right"></span>'}),$btnOL=$("<a />",{class:"richText-btn","data-command":"insertOrderedList",title:settings.translations.addOrderedList,name:"addOrderedList","aria-label":settings.translations.addOrderedList,"aria-role":"button",html:'<span class="fa fa-list-ol"></span>'}),$btnUL=$("<a />",{class:"richText-btn","data-command":"insertUnorderedList",title:settings.translations.addUnorderedList,name:"addUnorderedList","aria-label":settings.translations.addUnorderedList,"aria-role":"button",html:'<span class="fa fa-list"></span>'}),$btnHeading=$("<a />",{class:"richText-btn",title:settings.translations.addHeading,name:"addHeading","aria-label":settings.translations.addHeading,"aria-role":"button",html:'<span class="fa fa-header fa-heading"></span>'}),$btnFont=$("<a />",{class:"richText-btn",title:settings.translations.addFont,name:"addFont","aria-label":settings.translations.addFont,"aria-role":"button",html:'<span class="fa fa-font"></span>'}),$btnFontColor=$("<a />",{class:"richText-btn",title:settings.translations.addFontColor,name:"addFontColor","aria-label":settings.translations.addFontColor,"aria-role":"button",html:'<span class="fa fa-pencil fa-pencil-alt"></span>'}),$btnBackgroundColor=$("<a />",{class:"richText-btn",title:settings.translations.addBackgroundColor,name:"addBackgroundColor","aria-label":settings.translations.addBackgroundColor,"aria-role":"button",html:'<span class="fa fa-paint-brush"></span>'}),$btnFontSize=$("<a />",{class:"richText-btn",title:settings.translations.addFontSize,name:"addFontSize","aria-label":settings.translations.addFontSize,"aria-role":"button",html:'<span class="fa fa-text-height"></span>'}),$btnImageUpload=$("<a />",{class:"richText-btn",title:settings.translations.addImage,name:"addImage","aria-label":settings.translations.addImage,"aria-role":"button",html:'<span class="fa fa-image"></span>'}),$btnVideoEmbed=$("<a />",{class:"richText-btn",title:settings.translations.addVideo,name:"addVideo","aria-label":settings.translations.addVideo,"aria-role":"button",html:'<span class="fa fa-video-camera fa-video"></span>'}),$btnFileUpload=$("<a />",{class:"richText-btn",title:settings.translations.addFile,name:"addFile","aria-label":settings.translations.addFile,"aria-role":"button",html:'<span class="fa fa-file-text-o far fa-file-alt"></span>'}),$btnURLs=$("<a />",{class:"richText-btn",title:settings.translations.addURL,name:"addURL","aria-label":settings.translations.addURL,"aria-role":"button",html:'<span class="fa fa-link"></span>'}),$btnTable=$("<a />",{class:"richText-btn",title:settings.translations.addTable,name:"addTable","aria-label":settings.translations.addTable,"aria-role":"button",html:'<span class="fa fa-table"></span>'}),$btnRemoveStyles=$("<a />",{class:"richText-btn","data-command":"removeFormat",title:settings.translations.removeStyles,name:"removeStyles","aria-label":settings.translations.removeStyles,"aria-role":"button",html:'<span class="fa fa-recycle"></span>'}),$btnCode=$("<a />",{class:"richText-btn","data-command":"toggleCode",title:settings.translations.code,name:"code","aria-label":settings.translations.code,"aria-role":"button",html:'<span class="fa fa-code"></span>'}),$btnSave=$("<a />",{class:"save-btn","data-command":"toggleSave",title:settings.translations.save,name:"save","aria-label":settings.translations.save,"aria-role":"button",html:'<span class="fa fa-save"></span>'});var $dropdownOuter=$("<div />",{class:"richText-dropdown-outer"});var $dropdownClose=$("<span />",{class:"richText-dropdown-close",html:'<span title="'+settings.translations.close+'"><span class="fa fa-times"></span></span>'});$dropdownOuter.prepend($dropdownClose.clone());var $dropdownList=$("<ul />",{class:"richText-dropdown"}),$dropdownBox=$("<div />",{class:"richText-dropdown"}),$form=$("<div />",{class:"richText-form"}),$formItem=$("<div />",{class:"richText-form-item"}),$formLabel=$("<label />"),$formInput=$("<input />",{type:"text"}),$formInputFile=$("<input />",{type:"file"}),$formInputSelect=$("<select />"),$formButton=$("<button />",{text:settings.translations.add,class:"btn",type:"button"});var savedSelection;var editorID="richText-"+Math.random().toString(36).substring(7);var ignoreSave=false,$resizeImage=null;var history=[];history[editorID]=[];var historyPosition=[];historyPosition[editorID]=0;var $titles=$dropdownList.clone();$titles.append($("<li />",{html:'<a data-command="formatBlock" data-option="h1">'+settings.translations.title+" #1</a>"}));$titles.append($("<li />",{html:'<a data-command="formatBlock" data-option="h2">'+settings.translations.title+" #2</a>"}));$titles.append($("<li />",{html:'<a data-command="formatBlock" data-option="h3">'+settings.translations.title+" #3</a>"}));$titles.append($("<li />",{html:'<a data-command="formatBlock" data-option="h4">'+settings.translations.title+" #4</a>"}));$btnHeading.append($dropdownOuter.clone().append($titles));var fonts=settings.fontList;var $fonts=$dropdownList.clone();for(var i=0;i<fonts.length;i++){$fonts.append($("<li />",{html:'<a style="font-family:'+fonts[i]+';" data-command="fontName" data-option="'+fonts[i]+'">'+fonts[i]+"</a>"}))}$btnFont.append($dropdownOuter.clone().append($fonts));var $fontSizes=$dropdownList.clone();if(settings.fontSizes&&Array.isArray(settings.fontSizes)){for(let i=0;i<settings.fontSizes.length;i++){if(typeof settings.fontSizes[i]!=="number"||settings.fontSizes[i]<1||settings.fontSizes[i]>100){console.warn("Invalid font size: "+settings.fontSizes[i]);continue}$fontSizes.append($("<li />",{html:'<a style="font-size:'+settings.fontSizes[i]+'px;" data-command="fontSize" data-option="'+settings.fontSizes[i]+'">'+settings.translations.text+" "+settings.fontSizes[i]+"px</a>"}))}}else{for(let fontSize=24;fontSize>=12;fontSize-=2){$fontSizes.append($("<li />",{html:'<a style="font-size:'+fontSize+'px;" data-command="fontSize" data-option="'+fontSize+'">'+settings.translations.text+" "+fontSize+"px</a>"}))}}$btnFontSize.append($dropdownOuter.clone().append($fontSizes));var $fontColors=$dropdownList.clone();$fontColors.html(loadColors("forecolor"));$btnFontColor.append($dropdownOuter.clone().append($fontColors));var $backgroundColors=$dropdownList.clone();$backgroundColors.html(loadColors("hiliteColor"));$btnBackgroundColor.append($dropdownOuter.clone().append($backgroundColors));var $linksDropdown=$dropdownBox.clone();var $linksForm=$form.clone().attr("id","richText-URL").attr("data-editor",editorID);$linksForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.url).attr("for","url")).append($formInput.clone().attr("id","url")));$linksForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.text).attr("for","urlText")).append($formInput.clone().attr("id","urlText")));$linksForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.openIn).attr("for","openIn")).append($formInputSelect.clone().attr("id","openIn").append($("<option />",{value:"_self",text:settings.translations.sameTab})).append($("<option />",{value:"_blank",text:settings.translations.newTab}))));$linksForm.append($formItem.clone().append($formButton.clone()));$linksDropdown.append($linksForm);$btnURLs.append($dropdownOuter.clone().append($linksDropdown));var $videoDropdown=$dropdownBox.clone();var $videoForm=$form.clone().attr("id","richText-Video").attr("data-editor",editorID);$videoForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.url).attr("for","videoURL")).append($formInput.clone().attr("id","videoURL")));$videoForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.size).attr("for","size")).append($formInputSelect.clone().attr("id","size").append($("<option />",{value:"responsive",text:settings.translations.responsive})).append($("<option />",{value:"640x360",text:"640x360"})).append($("<option />",{value:"560x315",text:"560x315"})).append($("<option />",{value:"480x270",text:"480x270"})).append($("<option />",{value:"320x180",text:"320x180"}))));$videoForm.append($formItem.clone().append($formButton.clone()));$videoDropdown.append($videoForm);$btnVideoEmbed.append($dropdownOuter.clone().append($videoDropdown));var $imageDropdown=$dropdownBox.clone();var $imageForm=$form.clone().attr("id","richText-Image").attr("data-editor",editorID);if(settings.imageHTML&&($(settings.imageHTML).find("#imageURL").length>0||$(settings.imageHTML).attr("id")==="imageURL")){$imageForm.html(settings.imageHTML)}else{$imageForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.imageURL).attr("for","imageURL")).append($formInput.clone().attr("id","imageURL")));$imageForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.altText).attr("for","altText")).append($formInput.clone().attr("id","altText")));$imageForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.align).attr("for","align")).append($formInputSelect.clone().attr("id","align").append($("<option />",{value:"left",text:settings.translations.left})).append($("<option />",{value:"center",text:settings.translations.center})).append($("<option />",{value:"right",text:settings.translations.right}))))}$imageForm.append($formItem.clone().append($formButton.clone()));$imageDropdown.append($imageForm);$btnImageUpload.append($dropdownOuter.clone().append($imageDropdown));var $fileDropdown=$dropdownBox.clone();var $fileForm=$form.clone().attr("id","richText-File").attr("data-editor",editorID);if(settings.fileHTML&&($(settings.fileHTML).find("#fileURL").length>0||$(settings.fileHTML).attr("id")==="fileURL")){$fileForm.html(settings.fileHTML)}else{$fileForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.fileURL).attr("for","fileURL")).append($formInput.clone().attr("id","fileURL")));$fileForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.linkText).attr("for","fileText")).append($formInput.clone().attr("id","fileText")))}$fileForm.append($formItem.clone().append($formButton.clone()));$fileDropdown.append($fileForm);$btnFileUpload.append($dropdownOuter.clone().append($fileDropdown));var $tableDropdown=$dropdownBox.clone();var $tableForm=$form.clone().attr("id","richText-Table").attr("data-editor",editorID);$tableForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.rows).attr("for","tableRows")).append($formInput.clone().attr("id","tableRows").attr("type","number")));$tableForm.append($formItem.clone().append($formLabel.clone().text(settings.translations.columns).attr("for","tableColumns")).append($formInput.clone().attr("id","tableColumns").attr("type","number")));$tableForm.append($formItem.clone().append($formButton.clone()));$tableDropdown.append($tableForm);$btnTable.append($dropdownOuter.clone().append($tableDropdown));function init(){var value,attributes,attributes_html="";if(settings.useParagraph!==false){document.execCommand("DefaultParagraphSeparator",false,"p")}if($inputElement.prop("tagName")==="TEXTAREA"){}else if($inputElement.val()){value=$inputElement.val();attributes=$inputElement.prop("attributes");$.each(attributes,function(){if(this.name){attributes_html+=" "+this.name+'="'+this.value+'"'}});$inputElement.replaceWith($("<textarea"+attributes_html+' data-richtext="init">'+value+"</textarea>"));$inputElement=$('[data-richtext="init"]');$inputElement.removeAttr("data-richtext")}else if($inputElement.html()){value=$inputElement.html();attributes=$inputElement.prop("attributes");$.each(attributes,function(){if(this.name){attributes_html+=" "+this.name+'="'+this.value+'"'}});$inputElement.replaceWith($("<textarea"+attributes_html+' data-richtext="init">'+value+"</textarea>"));$inputElement=$('[data-richtext="init"]');$inputElement.removeAttr("data-richtext")}else{attributes=$inputElement.prop("attributes");$.each(attributes,function(){if(this.name){attributes_html+=" "+this.name+'="'+this.value+'"'}});$inputElement.replaceWith($("<textarea"+attributes_html+' data-richtext="init"></textarea>'));$inputElement=$('[data-richtext="init"]');$inputElement.removeAttr("data-richtext")}$editor=$("<div />",{class:"richText"});var $toolbar=$("<div />",{class:"richText-toolbar"});var $editorView=$("<div />",{class:"richText-editor",id:editorID,contenteditable:!settings.preview});$editorView.on("clear",()=>{var $editor=$("#"+editorID);$editor.siblings(".richText-initial").val("<div><br></div>");$editor.html($editor.siblings(".richText-initial").val())});$editorView.on("setContent",(event,content)=>{var $editor=$("#"+editorID);$editor.siblings(".richText-initial").val(content);$editor.html($editor.siblings(".richText-initial").val())});$editorView.on("getContent",(event,callback)=>{if(typeof callback!=="function"){return}callback($editorView.siblings(".richText-initial").val())});$editorView.on("save",(event,callback)=>{$editorView.trigger("change");if(typeof settings.saveCallback==="function"){settings.saveCallback($editor,"save",getEditorContent(editorID))}});$editorView.on("pasteAtCaret",(event,content)=>{var $editor=$("#"+editorID);if(!content||!content.length){return}restoreSelection($editor.attr("id"));pasteHTMLAtCaret(content);if(settings.disableScripts){removeScripts($editor.attr("id"))}if(settings.DOMPurify){sanitizeContent($editor.attr("id"))}updateTextarea()});$editorView.on("destroy",(event,options)=>{const destroy=()=>{let $main=$editorView.parents(".richText");$main.find(".richText-toolbar").remove();$main.find(".richText-editor").remove();const $textarea=$main.find(".richText-initial");$textarea.unwrap(".richText").data("editor","richText").removeClass("richText-initial").show();if(options&&typeof options.callback==="function"){options.callback($textarea)}};if(options&&options.delay){setTimeout(()=>{destroy()},options.delay);return}destroy()});var tabindex=$inputElement.prop("tabindex");if(tabindex>=0&&settings.useTabForNext===true){$editorView.attr("tabindex",tabindex)}if(!settings.preview){$toolbar.append($toolbarList)}if(settings.placeholder){if(!$editorView.text().length){$editorView.attr("placeholder",settings.placeholder);$editorView.on("focus",function(){$editorView.removeAttr("placeholder")});$editorView.on("focusout blur",function(){if(this.hasAttribute("placeholder")){return}if($(this).text().length){return}$(this).attr("placeholder",settings.placeholder)})}}settings.$editor=$editor;settings.blurTriggered=false;settings.$editor.on("click",()=>{settings.blurTriggered=false});if(settings.bold===true){$toolbarList.append($toolbarElement.clone().append($btnBold))}if(settings.italic===true){$toolbarList.append($toolbarElement.clone().append($btnItalic))}if(settings.underline===true){$toolbarList.append($toolbarElement.clone().append($btnUnderline))}if(settings.leftAlign===true){$toolbarList.append($toolbarElement.clone().append($btnLeftAlign))}if(settings.centerAlign===true){$toolbarList.append($toolbarElement.clone().append($btnCenterAlign))}if(settings.rightAlign===true){$toolbarList.append($toolbarElement.clone().append($btnRightAlign))}if(settings.justify===true){$toolbarList.append($toolbarElement.clone().append($btnJustify))}if(settings.ol===true){$toolbarList.append($toolbarElement.clone().append($btnOL))}if(settings.ul===true){$toolbarList.append($toolbarElement.clone().append($btnUL))}if(settings.fonts===true&&settings.fontList.length>0){$toolbarList.append($toolbarElement.clone().append($btnFont))}if(settings.fontSize===true){$toolbarList.append($toolbarElement.clone().append($btnFontSize))}if(settings.heading===true){$toolbarList.append($toolbarElement.clone().append($btnHeading))}if(settings.fontColor===true){$toolbarList.append($toolbarElement.clone().append($btnFontColor))}if(settings.backgroundColor===true){$toolbarList.append($toolbarElement.clone().append($btnBackgroundColor))}if(settings.imageUpload===true){$toolbarList.append($toolbarElement.clone().append($btnImageUpload))}if(settings.fileUpload===true){$toolbarList.append($toolbarElement.clone().append($btnFileUpload))}if(settings.videoEmbed===true){$toolbarList.append($toolbarElement.clone().append($btnVideoEmbed))}if(settings.urls===true){$toolbarList.append($toolbarElement.clone().append($btnURLs))}if(settings.table===true){$toolbarList.append($toolbarElement.clone().append($btnTable))}if(settings.removeStyles===true){$toolbarList.append($toolbarElement.clone().append($btnRemoveStyles))}if(settings.code===true){$toolbarList.append($toolbarElement.clone().append($btnCode))}if(settings.save===true){$toolbarList.append($toolbarElement.clone().append($btnSave))}$editorView.html($inputElement.val());$editorView.data("content-val",$inputElement.val());$editor.append($toolbar);$editor.append($editorView);$editor.append($inputElement.clone().hide());$inputElement.replaceWith($editor);$bottomToolbar=$("<div />",{class:"richText-toolbar"});if(!settings.preview&&settings.undoRedo){$bottomToolbar.append($("<a />",{class:"richText-undo is-disabled",html:'<span class="fa fa-undo"></span>',title:settings.translations.undo,name:"undo","aria-label":settings.translations.undo,"aria-role":"button"}));$bottomToolbar.append($("<a />",{class:"richText-redo is-disabled",html:'<span class="fa fa-repeat fa-redo"></span>',title:settings.translations.redo,name:"redo","aria-label":settings.translations.redo,"aria-role":"button"}))}$bottomToolbar.append($("<a />",{class:"richText-help","aria-label":settings.translations.help,"aria-role":"button",title:settings.translations.help,name:"help",html:'<span class="fa fa-question-circle"></span>'}));$editor.append($bottomToolbar);var maxlength=settings.maxlength;if(!maxlength&&$inputElement.attr("maxlength")){maxlength=$inputElement.attr("maxlength")}if(maxlength>0){$editor.data("maxlength",maxlength);$editor.children(".richText-toolbar").children(".richText-help").before($("<a />",{class:"richText-length",text:"0/"+maxlength}));updateMaxLength($editor.find(".richText-editor").attr("id"))}if(settings.wordCount){$editor.children(".richText-toolbar").children(".richText-help").before($("<a />",{class:"richText-wordcount",text:"0 "+settings.translations.words}));updateWordCount($editor.find(".richText-editor").attr("id"))}if(settings.height&&settings.height>0){$editor.children(".richText-editor, .richText-initial").css({"min-height":settings.height+"px",height:settings.adaptiveHeight?"auto":settings.height+"px"})}else if(settings.heightPercentage&&settings.heightPercentage>0){var parentHeight=$editor.parent().innerHeight();var height=settings.heightPercentage/100*parentHeight;height-=$toolbar.outerHeight()*2;height-=parseInt($editor.css("margin-top"));height-=parseInt($editor.css("margin-bottom"));height-=parseInt($editor.find(".richText-editor").css("padding-top"));height-=parseInt($editor.find(".richText-editor").css("padding-bottom"));$editor.children(".richText-editor, .richText-initial").css({"min-height":height+"px",height:settings.adaptiveHeight?"auto":height+"px"})}else if(settings.adaptiveHeight){$editor.children(".richText-editor, .richText-initial").css({height:"auto"})}if(settings.class){$editor.addClass(settings.class)}if(settings.id){$editor.attr("id",settings.id)}fixFirstLine();history[editorID].push($editor.find("textarea").val());if(settings.callback&&typeof settings.callback==="function"){settings.callback($editor)}}init();settings.$editor.find(".richText-help").on("click",function(){var $editor=$(this).parents(".richText");if($editor){var $outer=$("<div />",{class:"richText-help-popup",style:"position:absolute;top:0;right:0;bottom:0;left:0;background-color: rgba(0,0,0,0.3);"});var $inner=$("<div />",{style:"position:relative;margin:60px auto;padding:20px;background-color:#FAFAFA;width:70%;font-family:Calibri,Verdana,Helvetica,sans-serif;font-size:small;"});var $content=$("<div />",{html:'<span id="closeHelp" style="display:block;position:absolute;top:0;right:0;padding:10px;cursor:pointer;" title="'+settings.translations.close+'"><span class="fa fa-times"></span></span>'});$content.append('<h3 style="margin:0;">RichText</h3>');$content.append('<hr><br>Powered by <a href="https://github.com/webfashionist/RichText" target="_blank">webfashionist/RichText</a> (Github) <br>License: <a href="https://github.com/webfashionist/RichText/blob/master/LICENSE" target="_blank">AGPL-3.0</a>');$outer.append($inner.append($content));$editor.append($outer);$outer.on("click","#closeHelp",function(){$(this).parents(".richText-help-popup").remove()})}});settings.$editor.find(".richText-undo, .richText-redo").on("click",function(){var $this=$(this);if($this.hasClass("richText-undo")&&!$this.hasClass("is-disabled")){undo(settings.$editor)}else if($this.hasClass("richText-redo")&&!$this.hasClass("is-disabled")){redo(settings.$editor)}});settings.$editor.find(".richText-editor").on("input change blur keydown keyup",function(e){if((e.keyCode===9||e.keyCode==="9")&&e.type==="keydown"){if(settings.useTabForNext===true){focusNextElement();return false}e.preventDefault();tabifyEditableTable(window,e);return false}fixFirstLine();if(settings.disableScripts){removeScripts($(this).attr("id"))}if(settings.DOMPurify){sanitizeContent($(this).attr("id"))}updateTextarea(e);doSave($(this).attr("id"));updateMaxLength($(this).attr("id"));updateWordCount($(this).attr("id"))});function sanitizeContent(editorID){if(!window.DOMPurify||typeof window.DOMPurify.sanitize!=="function"){console.error("RichText: DOMPurify is not loaded. Please include it in your project.");return}const $editor=$("#"+editorID);const html=$editor.html();const clean=window.DOMPurify.sanitize(html,{USE_PROFILES:{html:true}});$editor.html(clean);const $editorInitial=$editor.parent().find(".richText-initial");$editorInitial.val(window.DOMPurify.sanitize($editorInitial.val(),{USE_PROFILES:{html:true}}))}function removeScripts(editorID){const regex=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script\s*>/gi;const regex2=/\s+[a-z]+=['"]javascript:.*['"]/gi;const $editor=$("#"+editorID);const $editorInitial=$editor.parent().find(".richText-initial");$editorInitial.val($editorInitial.val().replace(regex,""));$editorInitial.val($editorInitial.val().replace(regex2,""));const html=$editor.html();const $div=$("<div />").html(html);$div.html($div.html().replace(regex,""));$div.html($div.html().replace(regex2,""));$editor.html($div.html())}settings.$editor.find(".richText-editor").on("contextmenu",function(e){var $list=$("<ul />",{class:"list-rightclick richText-list"});var $li=$("<li />");$(".richText-editor").find(".richText-editNode").removeClass("richText-editNode");var $target=$(e.target);var $richText=$target.parents(".richText");var $toolbar=$richText.find(".richText-toolbar");var positionX=e.pageX-$richText.offset().left;var positionY=e.pageY-$richText.offset().top;$list.css({top:positionY,left:positionX});if($target.prop("tagName")==="A"){e.preventDefault();$list.append($li.clone().html('<span class="fa fa-link"></span>'));$target.parents(".richText").append($list);$list.find(".fa-link").on("click",function(){$(".list-rightclick.richText-list").remove();$target.addClass("richText-editNode");var $popup=$toolbar.find("#richText-URL");$popup.find("input#url").val($target.attr("href"));$popup.find("input#urlText").val($target.text());$popup.find("select#openIn").val($target.attr("target"));$toolbar.find(".richText-btn").children(".fa-link").parents("li").addClass("is-selected")});return false}else if($target.prop("tagName")==="IMG"){e.preventDefault();$list.append($li.clone().html('<span class="fa fa-image"></span>'));$target.parents(".richText").append($list);$list.find(".fa-image").on("click",function(){var align;if($target.parent("div").length>0&&$target.parent("div").attr("style")==="text-align:center;"){align="center"}else{align=$target.attr("align")}$(".list-rightclick.richText-list").remove();$target.addClass("richText-editNode");var $popup=$toolbar.find("#richText-Image");$popup.find("input#imageURL").val($target.attr("src"));$popup.find("input#altText").val($target.attr("alt"));$popup.find("select#align").val(align);$toolbar.find(".richText-btn").children(".fa-image").parents("li").addClass("is-selected")});return false}});settings.$editor.find(".richText-initial").on("input change blur",function(){if(settings.useSingleQuotes===true){$(this).val(changeAttributeQuotes($(this).val()))}var editorID=$(this).siblings(".richText-editor").attr("id");updateEditor(editorID);doSave(editorID);updateMaxLength(editorID);updateWordCount(editorID)});settings.$editor.find(".richText-editor").on("dblclick mouseup",function(){doSave($(this).attr("id"))});settings.$editor.find("#richText-Video button.btn").on("click",function(event){event.preventDefault();var $button=$(this);var $form=$button.parent(".richText-form-item").parent(".richText-form");if($form.attr("data-editor")===editorID){var url=$form.find("input#videoURL").val();var size=$form.find("select#size").val();if(!url){$form.prepend($("<div />",{style:"color:red;display:none;",class:"form-item is-error",text:settings.translations.pleaseEnterURL}));$form.children(".form-item.is-error").slideDown();setTimeout(function(){$form.children(".form-item.is-error").slideUp(function(){$(this).remove()})},5e3)}else{var html="";html=getVideoCode(url,size);if(!html){$form.prepend($("<div />",{style:"color:red;display:none;",class:"form-item is-error",text:settings.translations.videoURLnotSupported}));$form.children(".form-item.is-error").slideDown();setTimeout(function(){$form.children(".form-item.is-error").slideUp(function(){$(this).remove()})},5e3)}else{if(settings.useSingleQuotes===true){}else{}restoreSelection(editorID,true);pasteHTMLAtCaret(html);updateTextarea();$form.find("input#videoURL").val("");$(".richText-toolbar li.is-selected").removeClass("is-selected")}}}});$(document).on("mousedown",function(e){var $target=$(e.target);if(!$target.hasClass("richText-list")&&$target.parents(".richText-list").length===0){$(".richText-list.list-rightclick").remove();if(!$target.hasClass("richText-form")&&$target.parents(".richText-form").length===0){$(".richText-editNode").each(function(){var $this=$(this);$this.removeClass("richText-editNode");if($this.attr("class")===""){$this.removeAttr("class")}})}}if($target.prop("tagName")==="IMG"&&$target.parents("#"+editorID).length){startX=e.pageX;startY=e.pageY;startW=$target.innerWidth();startH=$target.innerHeight();var left=$target.offset().left;var right=$target.offset().left+$target.innerWidth();var bottom=$target.offset().top+$target.innerHeight();var top=$target.offset().top;var resize=false;$target.css({cursor:"default"});if(startY<=bottom&&startY>=bottom-20&&startX>=right-20&&startX<=right){$resizeImage=$target;$resizeImage.css({cursor:"nwse-resize"});resize=true}if((resize===true||$resizeImage)&&!$resizeImage.data("width")){$resizeImage.data("width",$target.parents("#"+editorID).innerWidth());$resizeImage.data("height",$target.parents("#"+editorID).innerHeight()*3);e.preventDefault()}else if(resize===true||$resizeImage){e.preventDefault()}else{$resizeImage=null}}});$(document).mouseup(function(){if($resizeImage){$resizeImage.css({cursor:"default"})}$resizeImage=null}).mousemove(function(e){if($resizeImage!==null){var maxWidth=$resizeImage.data("width");var currentWidth=$resizeImage.width();var maxHeight=$resizeImage.data("height");var currentHeight=$resizeImage.height();if(startW+e.pageX-startX<=maxWidth&&startH+e.pageY-startY<=maxHeight){$resizeImage.innerWidth(startW+e.pageX-startX);updateTextarea()}else if(startW+e.pageX-startX<=currentWidth&&startH+e.pageY-startY<=currentHeight){$resizeImage.innerWidth(startW+e.pageX-startX);updateTextarea()}}});settings.$editor.find("#richText-URL button.btn").on("click",function(event){event.preventDefault();var $button=$(this);var $form=$button.parent(".richText-form-item").parent(".richText-form");if($form.attr("data-editor")===editorID){var url=$form.find("input#url").val();var text=$form.find("input#urlText").val();var target=$form.find("#openIn").val();if(!target){target="_self"}if(!text){text=url}if(!url){$form.prepend($("<div />",{style:"color:red;display:none;",class:"form-item is-error",text:settings.translations.pleaseEnterURL}));$form.children(".form-item.is-error").slideDown();setTimeout(function(){$form.children(".form-item.is-error").slideUp(function(){$(this).remove()})},5e3)}else{var html="";if(settings.useSingleQuotes===true){html="<a href='"+url+"' target='"+target+"'>"+text+"</a>"}else{html='<a href="'+url+'" target="'+target+'">'+text+"</a>"}restoreSelection(editorID,false,true);var $editNode=$(".richText-editNode");if($editNode.length>0&&$editNode.prop("tagName")==="A"){$editNode.attr("href",url);$editNode.attr("target",target);$editNode.text(text);$editNode.removeClass("richText-editNode");if($editNode.attr("class")===""){$editNode.removeAttr("class")}}else{pasteHTMLAtCaret(html)}$form.find("input#url").val("");$form.find("input#urlText").val("");$(".richText-toolbar li.is-selected").removeClass("is-selected")}}});settings.$editor.find("#richText-Image button.btn").on("click",function(event){event.preventDefault();var $button=$(this);var $form=$button.parent(".richText-form-item").parent(".richText-form");if($form.attr("data-editor")===editorID){var url=$form.find("#imageURL").val();var align=$form.find("select#align").val();var alt=$form.find("#altText").val();if(!align){align="center"}if(!url){$form.prepend($("<div />",{style:"color:red;display:none;",class:"form-item is-error",text:settings.translations.pleaseSelectImage}));$form.children(".form-item.is-error").slideDown();setTimeout(function(){$form.children(".form-item.is-error").slideUp(function(){$(this).remove()})},5e3)}else{var html="";if(settings.useSingleQuotes===true){if(align==="center"){html="<div style='text-align:center;'><img src='"+url+"' alt='"+alt+"'></div>"}else{html="<img src='"+url+"' align='"+align+"' alt='"+alt+"'>"}}else{if(align==="center"){html='<div style="text-align:center;"><img src="'+url+'" alt="'+alt+'"></div>'}else{html='<img src="'+url+'" align="'+align+'" alt="'+alt+'">'}}restoreSelection(editorID,true);var $editNode=$(".richText-editNode");if($editNode.length>0&&$editNode.prop("tagName")==="IMG"){$editNode.attr("src",url);if($editNode.parent("div").length>0&&$editNode.parent("div").attr("style")==="text-align:center;"&&align!=="center"){$editNode.unwrap("div");$editNode.attr("align",align)}else if(($editNode.parent("div").length===0||$editNode.parent("div").attr("style")!=="text-align:center;")&&align==="center"){$editNode.wrap('<div style="text-align:center;"></div>');$editNode.removeAttr("align")}else{$editNode.attr("align",align)}$editNode.removeClass("richText-editNode");if($editNode.attr("class")===""){$editNode.removeAttr("class")}}else{pasteHTMLAtCaret(html)}$form.find("input#imageURL").val("");$(".richText-toolbar li.is-selected").removeClass("is-selected")}}});settings.$editor.find("#richText-File button.btn").on("click",function(event){event.preventDefault();var $button=$(this);var $form=$button.parent(".richText-form-item").parent(".richText-form");if($form.attr("data-editor")===editorID){var url=$form.find("#fileURL").val();var text=$form.find("#fileText").val();if(!text){text=url}if(!url){$form.prepend($("<div />",{style:"color:red;display:none;",class:"form-item is-error",text:settings.translations.pleaseSelectFile}));$form.children(".form-item.is-error").slideDown();setTimeout(function(){$form.children(".form-item.is-error").slideUp(function(){$(this).remove()})},5e3)}else{var html="";if(settings.useSingleQuotes===true){html="<a href='"+url+"' target='_blank'>"+text+"</a>"}else{html='<a href="'+url+'" target="_blank">'+text+"</a>"}restoreSelection(editorID,true);pasteHTMLAtCaret(html);$form.find("input#fileURL").val("");$form.find("input#fileText").val("");$(".richText-toolbar li.is-selected").removeClass("is-selected")}}});settings.$editor.find("#richText-Table button.btn").on("click",function(event){event.preventDefault();var $button=$(this);var $form=$button.parent(".richText-form-item").parent(".richText-form");if($form.attr("data-editor")===editorID){var rows=$form.find("input#tableRows").val();var columns=$form.find("input#tableColumns").val();if(!rows||rows<=0){rows=2}if(!columns||columns<=0){columns=2}var html="";if(settings.useSingleQuotes===true){html="<table class='table-1'><tbody>"}else{html='<table class="table-1"><tbody>'}for(var i=1;i<=rows;i++){html+="<tr>";for(var n=1;n<=columns;n++){html+="<td> </td>"}html+="</tr>"}html+="</tbody></table>";restoreSelection(editorID,true);pasteHTMLAtCaret(html);$form.find("input#tableColumns").val("");$form.find("input#tableRows").val("");$(".richText-toolbar li.is-selected").removeClass("is-selected")}});$(document).on("click",function(event){var $clickedElement=$(event.target);if($clickedElement.parents(".richText-toolbar").length===0){}else if($clickedElement.hasClass("richText-dropdown-outer")){$clickedElement.parent("a").parent("li").removeClass("is-selected")}else if($clickedElement.find(".richText").length>0){$(".richText-toolbar li").removeClass("is-selected")}else if($clickedElement.parent().hasClass("richText-dropdown-close")){$(".richText-toolbar li").removeClass("is-selected")}else if($clickedElement.hasClass("richText-btn")&&$(event.target).children(".richText-dropdown-outer").length>0){$clickedElement.parent("li").addClass("is-selected");if($clickedElement.children(".fa,svg").hasClass("fa-link")){restoreSelection(editorID,false,true);var selectedText=getSelectedText();$clickedElement.find("input#urlText").val("");$clickedElement.find("input#url").val("");if(selectedText){$clickedElement.find("input#urlText").val(selectedText)}}else if($clickedElement.hasClass("fa-image")){}}});settings.$editor.find(".richText-toolbar a[data-command]").on("click",function(event){var $button=$(this);var $toolbar=$button.closest(".richText-toolbar");var $editor=$toolbar.siblings(".richText-editor");var id=$editor.attr("id");if($editor.length>0&&id===editorID&&(!$button.parent("li").attr("data-disable")||$button.parent("li").attr("data-disable")==="false")){event.preventDefault();var command=$(this).data("command");if(command==="toggleSave"){$editor.trigger("change");if(typeof settings.saveCallback==="function"){settings.saveCallback($editor,"save",getEditorContent(editorID))}}else if(command==="toggleCode"){toggleCode($editor.attr("id"))}else{var option=null;if($(this).data("option")){option=$(this).data("option").toString();if(option.match(/^h[1-6]$/)){command="heading"}}formatText(command,option,id);if(command==="removeFormat"){$editor.find("*").each(function(){var keepAttributes=["id","class","name","action","method","src","align","alt","title","style","webkitallowfullscreen","mozallowfullscreen","allowfullscreen","width","height","frameborder"];var element=$(this);var attributes=$.map(this.attributes,function(item){return item.name});$.each(attributes,function(i,item){if(keepAttributes.indexOf(item)<0&&item.substr(0,5)!=="data-"){element.removeAttr(item)}});if(element.prop("tagName")==="A"){element.replaceWith(function(){return $("<span />",{html:$(this).html()})})}});formatText("formatBlock","div",id)}$editor.find("div:empty,p:empty,li:empty,h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty").remove();$editor.find("h1,h2,h3,h4,h5,h6").unwrap("h1,h2,h3,h4,h5,h6")}}$button.parents("li.is-selected").removeClass("is-selected")});function focusNextElement(){var focussableElements='a:not([disabled]):not(.richText-btn,.richText-undo,.richText-redo,.richText-help), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll(focussableElements),function(element){return element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement});var index=focussable.indexOf(document.activeElement);if(index>-1){var nextElement=focussable[index+1]||focussable[0];nextElement.focus()}}}function formatText(command,option,editorID){if(typeof option==="undefined"){option=null}doRestore(editorID);if(command==="heading"&&getSelectedText()){wrapTextNode(option,"<"+option+">"+getSelectedText()+"</"+option+">")}else if(command==="fontSize"&&parseInt(option)>0){var selection=getSelectedText();selection=(selection+"").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g,"$1"+"<br>"+"$2");var html=settings.useSingleQuotes?"<span style='font-size:"+option+"px;'>"+selection+"</span>":'<span style="font-size:'+option+'px;">'+selection+"</span>";wrapTextNode('span style="font-size:'+option+'px;"',html)}else{document.execCommand(command,false,option)}}function getEditorContent(editorId){var $editor=$("#"+editorID);var content=$editor.html();if(settings.useSingleQuotes===true){content=changeAttributeQuotes(content)}return content}function updateTextarea(event){var $editor=$("#"+editorID);content=getEditorContent(editorID);if(content!==$editor.siblings(".richText-initial").val()){$editor.siblings(".richText-initial").val(content)}if(settings.saveOnBlur&&event&&event.type==="blur"){settings.blurTriggered=true;setTimeout(()=>{if(!settings.blurTriggered){return}var content=getEditorContent(editorID);if($editor.data("content-val")!==content){$editor.data("content-val",content);$editor.trigger("change");if(typeof settings.saveCallback==="function"){settings.saveCallback($editor,"blur",content)}}},settings.saveOnBlur)}}function updateEditor(editorID){const $editor=$("#"+editorID);const content=$editor.siblings(".richText-initial").val();if(settings.disableScripts){removeScripts(editorID)}if(settings.DOMPurify){sanitizeContent(editorID)}$editor.html(content)}function saveSelection(editorID){var containerEl=document.getElementById(editorID);var range,start,end,type;if(window.getSelection&&document.createRange){var sel=window.getSelection&&window.getSelection();if(sel&&sel.rangeCount>0&&$(sel.anchorNode).parents("#"+editorID).length>0){range=window.getSelection().getRangeAt(0);var preSelectionRange=range.cloneRange();preSelectionRange.selectNodeContents(containerEl);preSelectionRange.setEnd(range.startContainer,range.startOffset);start=preSelectionRange.toString().length;end=start+range.toString().length;type=start===end?"caret":"selection";anchor=sel.anchorNode;start=type==="caret"&&anchor!==false?start:preSelectionRange.toString().length;end=type==="caret"&&anchor!==false?end:start+range.toString().length;return{start:start,end:end,type:type,anchor:anchor,editorID:editorID}}}return savedSelection?savedSelection:{start:0,end:0}}function restoreSelection(editorID,media,url){var containerEl=document.getElementById(editorID);var savedSel=savedSelection;if(!savedSel){savedSel={start:0,end:0,type:"caret",editorID:editorID,anchor:$("#"+editorID).children("div")[0]}}else if(!savedSel.editorID&&editorID){savedSel.editorID=editorID}if(savedSel.editorID!==editorID){return false}else if(media===true){containerEl=savedSel.anchor?savedSel.anchor:containerEl}else if(url===true){if(savedSel.start===0&&savedSel.end===0){containerEl=savedSel.anchor?savedSel.anchor:containerEl}}if(window.getSelection&&document.createRange){var charIndex=0,range=document.createRange();if(!range||!containerEl){window.getSelection().removeAllRanges();return true}range.setStart(containerEl,0);range.collapse(true);var nodeStack=[containerEl],node,foundStart=false,stop=false;while(!stop&&(node=nodeStack.pop())){if(node.nodeType===3){var nextCharIndex=charIndex+node.length;if(!foundStart&&savedSel.start>=charIndex&&savedSel.start<=nextCharIndex){range.setStart(node,savedSel.start-charIndex);foundStart=true}if(foundStart&&savedSel.end>=charIndex&&savedSel.end<=nextCharIndex){range.setEnd(node,savedSel.end-charIndex);stop=true}charIndex=nextCharIndex}else{var i=node.childNodes.length;while(i--){nodeStack.push(node.childNodes[i])}}}var sel=window.getSelection();sel.removeAllRanges();sel.addRange(range)}}function tabifyEditableTable(win,e){if(e.keyCode!==9){return false}var sel;if(win.getSelection){sel=win.getSelection();if(sel.rangeCount>0){var textNode=null,direction=null;if(!e.shiftKey){direction="next";textNode=sel.focusNode.nodeName==="TD"?sel.focusNode.nextSibling!=null?sel.focusNode.nextSibling:sel.focusNode.parentNode.nextSibling!=null?sel.focusNode.parentNode.nextSibling.childNodes[0]:null:sel.focusNode.parentNode.nextSibling!=null?sel.focusNode.parentNode.nextSibling:sel.focusNode.parentNode.parentNode.nextSibling!=null?sel.focusNode.parentNode.parentNode.nextSibling.childNodes[0]:null}else{direction="previous";textNode=sel.focusNode.nodeName==="TD"?sel.focusNode.previousSibling!=null?sel.focusNode.previousSibling:sel.focusNode.parentNode.previousSibling!=null?sel.focusNode.parentNode.previousSibling.childNodes[sel.focusNode.parentNode.previousSibling.childNodes.length-1]:null:sel.focusNode.parentNode.previousSibling!=null?sel.focusNode.parentNode.previousSibling:sel.focusNode.parentNode.parentNode.previousSibling!=null?sel.focusNode.parentNode.parentNode.previousSibling.childNodes[sel.focusNode.parentNode.parentNode.previousSibling.childNodes.length-1]:null}if(textNode!=null){sel.collapse(textNode,Math.min(textNode.length,sel.focusOffset+1));if(textNode.textContent!=null){sel.selectAllChildren(textNode)}e.preventDefault();return true}else if(textNode===null&&direction==="next"&&sel.focusNode.nodeName==="TD"){var $table=$(sel.focusNode).parents("table");var cellsPerLine=$table.find("tr").first().children("td").length;var $tr=$("<tr />");var $td=$("<td />");for(var i=1;i<=cellsPerLine;i++){$tr.append($td.clone())}$table.append($tr);tabifyEditableTable(window,{keyCode:9,shiftKey:false,preventDefault:function(){}})}}}return false}function getSelectedText(){var range;if(window.getSelection){range=window.getSelection();if(range.isCollapsed){return false}return range.toString()?range.toString():range.focusNode.nodeValue}else if(document.selection.createRange){range=document.selection.createRange();return range.text}return false}function doSave(editorID){var $textarea=$(".richText-editor#"+editorID).siblings(".richText-initial");addHistory($textarea.val(),editorID);savedSelection=saveSelection(editorID)}function updateWordCount(editorID){const $editorInner=$(".richText-editor#"+editorID);const $editor=$editorInner.parents(".richText");const $wordCount=$editor.find(".richText-wordcount");if(!$wordCount||$wordCount.length===0){return}const content=$editor.find(".richText-editor").text().trim();const words=content.replace(/\s+/g," ").split(" ").filter(function(entry){return entry.trim()!==""}).length;$wordCount.html("<span>"+words+"</span> "+settings.translations.words)}function updateMaxLength(editorID){var $editorInner=$(".richText-editor#"+editorID);var $editor=$editorInner.parents(".richText");if(!$editor.data("maxlength")){return true}var color;var maxLength=parseInt($editor.data("maxlength"));var content=settings.maxlengthIncludeHTML?$editorInner.html():$editorInner.text();var percentage=content.length/maxLength*100;if(percentage>99){color="red"}else if(percentage>=90){color="orange"}else{color="black"}$editor.find(".richText-length").html('<span class="'+color+'">'+content.length+"</span>/"+maxLength);if(content.length>maxLength){$editor.find(".richText-editor").html(truncateHTMLText(content,maxLength));updateTextarea();return false}return true}function truncateHTMLText(content,approxNumChars){const taggish=/<[^>]+>/g;content=content.slice(0,approxNumChars-3);content=content.replace(/<[^>]*$/,"");let tags=content.match(taggish);const openTagsSeen=[];for(let tag_i in tags){var tag=tags[tag_i];if(tag.match(/<[^>]+>/)!==null){openTagsSeen.push(tag)}else{openTagsSeen.pop()}}openTagsSeen.reverse();for(let tag_i in openTagsSeen){content+="<\\"+openTagsSeen[tag_i].match(/\w+/)[0]+">"}return content+"..."}function addHistory(val,id){if(!history[id]){return false}if(history[id].length-1>historyPosition[id]){history[id].length=historyPosition[id]+1}if(history[id][history[id].length-1]!==val){history[id].push(val)}historyPosition[id]=history[id].length-1;setHistoryButtons(id)}function setHistoryButtons(id){if(historyPosition[id]<=0){$editor.find(".richText-undo").addClass("is-disabled")}else{$editor.find(".richText-undo").removeClass("is-disabled")}if(historyPosition[id]>=history[id].length-1||history[id].length===0){$editor.find(".richText-redo").addClass("is-disabled")}else{$editor.find(".richText-redo").removeClass("is-disabled")}}function undo($editor){var id=$editor.children(".richText-editor").attr("id");historyPosition[id]--;if(!historyPosition[id]&&historyPosition[id]!==0){return false}var value=history[id][historyPosition[id]];$editor.find("textarea").val(value);$editor.find(".richText-editor").html(value);setHistoryButtons(id)}function redo($editor){var id=$editor.children(".richText-editor").attr("id");historyPosition[id]++;if(!historyPosition[id]&&historyPosition[id]!==0){return false}var value=history[id][historyPosition[id]];$editor.find("textarea").val(value);$editor.find(".richText-editor").html(value);setHistoryButtons(id)}function doRestore(id){if(savedSelection){restoreSelection(id?id:savedSelection.editorID)}}function wrapTextNode(tag,html){if(window.getSelection){sel=window.getSelection();console.log(sel,1);if(sel.focusNode.nodeType===3){$(sel.focusNode).wrap("<"+tag+" />")}return}pasteHTMLAtCaret(html)}function pasteHTMLAtCaret(html){var sel,range;if(window.getSelection){sel=window.getSelection();if(sel.getRangeAt&&sel.rangeCount){range=sel.getRangeAt(0);range.deleteContents();var el=document.createElement("div");el.innerHTML=html;var frag=document.createDocumentFragment(),node,lastNode;while(node=el.firstChild){lastNode=frag.appendChild(node)}range.insertNode(frag);if(lastNode){range=range.cloneRange();range.setStartAfter(lastNode);range.collapse(true);sel.removeAllRanges();sel.addRange(range)}}}else if(document.selection&&document.selection.type!=="Control"){document.selection.createRange().pasteHTML(html)}}function changeAttributeQuotes(string){if(!string){return""}var regex;var rstring;if(settings.useSingleQuotes===true){regex=/\s+(\w+\s*=\s*(["][^"]*["])|(['][^']*[']))+/g;rstring=string.replace(regex,function($0,$1,$2){if(!$2){return $0}return $0.replace($2,$2.replace(/\"/g,"'"))})}else{regex=/\s+(\w+\s*=\s*(['][^']*['])|(["][^"]*["]))+/g;rstring=string.replace(regex,function($0,$1,$2){if(!$2){return $0}return $0.replace($2,$2.replace(/'/g,'"'))})}return rstring}function loadColors(command){var colors={};var result="";colors["#FFFFFF"]=settings.translations.white;colors["#000000"]=settings.translations.black;colors["#7F6000"]=settings.translations.brown;colors["#938953"]=settings.translations.beige;colors["#1F497D"]=settings.translations.darkBlue;colors["blue"]=settings.translations.blue;colors["#4F81BD"]=settings.translations.lightBlue;colors["#953734"]=settings.translations.darkRed;colors["red"]=settings.translations.red;colors["#4F6128"]=settings.translations.darkGreen;colors["green"]=settings.translations.green;colors["#3F3151"]=settings.translations.purple;colors["#31859B"]=settings.translations.darkTurquois;colors["#4BACC6"]=settings.translations.turquois;colors["#E36C09"]=settings.translations.darkOrange;colors["#F79646"]=settings.translations.orange;colors["#FFFF00"]=settings.translations.yellow;if(settings.colors&&Object.keys(settings.colors).length){colors=settings.colors}for(var i in colors){result+='<li class="inline"><a data-command="'+command+'" data-option="'+i+'" style="text-align:left;" title="'+colors[i]+'" aria-label="'+colors[i]+'" name="color-'+colors[i]+'"><span class="box-color" style="background-color:'+i+'"></span></a></li>'}return result}function toggleCode(editorID){doRestore(editorID);if($editor.find(".richText-editor").is(":visible")){$editor.find(".richText-initial").show();$editor.find(".richText-editor").hide();$(".richText-toolbar").find(".richText-btn").each(function(){if($(this).children(".fa-code").length===0){$(this).parent("li").attr("data-disable","true")}});convertCaretPosition(editorID,savedSelection)}else{$editor.find(".richText-initial").hide();$editor.find(".richText-editor").show();convertCaretPosition(editorID,savedSelection,true);$(".richText-toolbar").find("li").removeAttr("data-disable")}}function convertCaretPosition(editorID,selection,reverse){var $editor=$("#"+editorID);var $textarea=$editor.siblings(".richText-initial");var code=$textarea.val();if(!selection||!code){return{start:0,end:0}}if(reverse===true){savedSelection={start:$editor.text().length,end:$editor.text().length,editorID:editorID};restoreSelection(editorID);return true}selection.node=$textarea[0];var states={start:false,end:false,tag:false,isTag:false,tagsCount:0,isHighlight:selection.start!==selection.end};for(var i=0;i<code.length;i++){if(code[i]==="<"){states.isTag=true;states.tag=false;states.tagsCount++}else if(states.isTag===true&&code[i]!==">"){states.tagsCount++}else if(states.isTag===true&&code[i]===">"){states.isTag=false;states.tag=true;states.tagsCount++}else if(states.tag===true){states.tag=false}if(!reverse){if(selection.start+states.tagsCount<=i&&states.isHighlight&&!states.isTag&&!states.tag&&!states.start){selection.start=i;states.start=true}else if(selection.start+states.tagsCount<=i+1&&!states.isHighlight&&!states.isTag&&!states.tag&&!states.start){selection.start=i+1;states.start=true}if(selection.end+states.tagsCount<=i+1&&!states.isTag&&!states.tag&&!states.end){selection.end=i+1;states.end=true}}}createSelection(selection.node,selection.start,selection.end);return selection}function createSelection(field,start,end){if(field.createTextRange){var selRange=field.createTextRange();selRange.collapse(true);selRange.moveStart("character",start);selRange.moveEnd("character",end);selRange.select();field.focus()}else if(field.setSelectionRange){field.focus();field.setSelectionRange(start,end)}else if(typeof field.selectionStart!="undefined"){field.selectionStart=start;field.selectionEnd=end;field.focus()}}function getVideoCode(url,size){var video=getVideoID(url);var responsive=false,success=false;if(!video){return false}if(!size){size="640x360";size=size.split("x")}else if(size!=="responsive"){size=size.split("x")}else{responsive=true;size="640x360";size=size.split("x")}var html="<br><br>";if(responsive===true){html+='<div class="videoEmbed" style="position:relative;height:0;padding-bottom:56.25%">'}var allowfullscreen="webkitallowfullscreen mozallowfullscreen allowfullscreen";if(video.platform==="YouTube"){var youtubeDomain=settings.youtubeCookies?"www.youtube.com":"www.youtube-nocookie.com";html+='<iframe src="https://'+youtubeDomain+"/embed/"+video.id+'?ecver=2" width="'+size[0]+'" height="'+size[1]+'" frameborder="0"'+(responsive===true?' style="position:absolute;width:100%;height:100%;left:0"':"")+" "+allowfullscreen+"></iframe>";success=true}else if(video.platform==="Vimeo"){html+='<iframe src="https://player.vimeo.com/video/'+video.id+'" width="'+size[0]+'" height="'+size[1]+'" frameborder="0"'+(responsive===true?' style="position:absolute;width:100%;height:100%;left:0"':"")+" "+allowfullscreen+"></iframe>";success=true}else if(video.platform==="Facebook"){html+='<iframe src="https://www.facebook.com/plugins/video.php?href='+encodeURI(url)+"&show_text=0&width="+size[0]+'" width="'+size[0]+'" height="'+size[1]+'" style="'+(responsive===true?'position:absolute;width:100%;height:100%;left:0;border:none;overflow:hidden"':"border:none;overflow:hidden")+'" scrolling="no" frameborder="0" allowTransparency="true" '+allowfullscreen+"></iframe>";success=true}else if(video.platform==="Dailymotion"){html+='<iframe frameborder="0" width="'+size[0]+'" height="'+size[1]+'" src="//www.dailymotion.com/embed/video/'+video.id+'"'+(responsive===true?' style="position:absolute;width:100%;height:100%;left:0"':"")+" "+allowfullscreen+"></iframe>";success=true}if(responsive===true){html+="</div>"}html+="<br><br>";if(success){return html}return false}function getVideoID(url){var vimeoRegExp=/(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/;var youtubeRegExp=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;var facebookRegExp=/(?:http?s?:\/\/)?(?:www\.)?(?:facebook\.com)\/.*\/videos\/[0-9]+/;var dailymotionRegExp=/(?:http?s?:\/\/)?(?:www\.)?(?:dailymotion\.com)\/video\/([a-zA-Z0-9]+)/;var youtubeMatch=url.match(youtubeRegExp);var vimeoMatch=url.match(vimeoRegExp);var facebookMatch=url.match(facebookRegExp);var dailymotionMatch=url.match(dailymotionRegExp);if(youtubeMatch&&youtubeMatch[2].length===11){return{platform:"YouTube",id:youtubeMatch[2]}}else if(vimeoMatch&&vimeoMatch[1]){return{platform:"Vimeo",id:vimeoMatch[1]}}else if(facebookMatch&&facebookMatch[0]){return{platform:"Facebook",id:facebookMatch[0]}}else if(dailymotionMatch&&dailymotionMatch[1]){return{platform:"Dailymotion",id:dailymotionMatch[1]}}return false}function fixFirstLine(){if($editor&&!$editor.find(".richText-editor").html()){if(settings.useParagraph!==false){$editor.find(".richText-editor").html("<p><br></p>")}else{$editor.find(".richText-editor").html("<div><br></div>")}}else{if(settings.useParagraph!==false){$editor.find(".richText-editor").find("div:not(.videoEmbed)").replaceWith(function(){return $("<p />",{html:$(this).html()})})}else{$editor.find(".richText-editor").find("p").replaceWith(function(){return $("<div />",{html:$(this).html()})})}}const content=$editor.find(".richText-editor").html();if(content.trim().substring(0,1)!=="<"){$editor.find(".richText-editor").html("<div>"+content+"</div>")}updateTextarea()}return $(this)}})(jQuery);
26 | 


--------------------------------------------------------------------------------