How to setup Tinymce init config using external file - tinymce

i want to use multiple editor .there one global TinyMce init config will be defined. I want to override this basic setup in every editor based on requirement.


So you need one, global TinyMCE config, and then override the global config if needed in each additional editor based on what you need?
If that's the case, one way to do this is to set up a common config variable with the global, TinyMCE init config. Then you can do one of the following with it:
Just use the common config as your editor instance.
you could extend the common config with more js.
Ignore the commonconfig and create a new editor as needed (essentially overwriting it).
The common config:
//filename: script.js
let commonConfig = {
plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
menubar: false,
inline: true,
toolbar_persist: true,
object_resizing: false,
mobile: {
toolbar_mode: 'floating'
},
spellchecker_language: 'en',
spellchecker_active: true
}
And the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Common Config</title>
<script src="commonEditor.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "#editor-description-content",
toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
fixed_toolbar_container: '#editor-description-toolbar',
placeholder: "Add a description",
setup: (editor) => {
editor.on('focus', () => {
document.getElementById('editor-description-wrap').classList.add('enabled');
});
},
...commonConfig
});
//Script without common config
tinymce.init({
selector: "#editor",
plugins: "autocorrect powerpaste tinymcespellchecker",
menubar: true
});
</script>
</head>
<body>
<h2>Textarea 1 with common config</h2>
<div name="" id="editor-description-content" cols="30" rows="10">A tinyMCE editor with a common config</div>
<h2>Textarea 2 without common config</h2>
<textarea name="" id="editor" cols="30" rows="10"></textarea>
</body>
</html>

Related

Why UI5 controls rendered inside a custom control are not rerendered on property change?

I have created a custom control my.Control that renders a sap.m.Text directly and receives another one by an aggregation.
Paste an example in one file for simplicity:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 example</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m, sap.ui.core"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.core.Control.extend("my.Control", {
metadata: {
aggregations: {
testControl: {
type: 'sap.m.Text',
multiple: false,
singularName: 'testControl'
}
}
},
renderer: function (oRm, oControl) {
oRm.openStart('div', oControl);
oRm.openEnd();
oRm.text('DIRECTLY GENERATED CONTROL : ');
oRm.renderControl(new sap.m.Text('direct-control', {text: 'initial value'}));
oRm.openStart('br');
oRm.openEnd();
oRm.text('AGGREGATION PASSED CONTROL : ');
oRm.renderControl(oControl.getTestControl());
oRm.close('div');
}
});
new my.Control({
testControl: [
new sap.m.Text('passed-control', {text: 'initial value'})
]
}).placeAt('content');
});
</script>
</head>
<body class="sapuiBody" id="content">
</body>
</html>
Both load OK. But when editing its text property via Javascript the passed control is updated and the other one is not:
sap.ui.getCore().byId('passed-control').setText('edited value')
Control is rerendered
sap.ui.getCore().byId('direct-control').setText('edited value')
Control is not rerendered
If I execute sap.ui.getCore().byId('direct-control').rerender() then "direct-control" is rerendered with "edited value" as text.
Why do they behave differently?
Is there a way to configure this behaviour?
Thanks.

Using WYSIWYG editor like summernote in openui5 application

I am fairly new to openui5. I want to include summernote editor into my application. I have included the cdn links from their homepage but I am getting the following error
ShellRenderer-dbg.js:143 Uncaught (in promise) TypeError: Cannot read property 'require' of undefined
at Object.S.getLogoImageHtml (ShellRenderer-dbg.js:143)
at Object.S.render (ShellRenderer-dbg.js:86)
at R.renderControl (RenderManager-dbg.js:1004)
at R.render (RenderManager-dbg.js:1259)
at constructor.U.rerender (UIArea-dbg.js:629)
at constructor.Core.renderPendingUIUpdates (Core-dbg.js:2774)
at constructor.Core.init (Core-dbg.js:1235)
at Core-dbg.js:485
at a (Core-dbg.js:179)
at SyncPoint.finishTask (Core-dbg.js:173)
Any ideas would be much appreciated. Thanks

I've managed to get this working in a simple scenario but not sure how it will work with other UI5 elements & re-rendering etc. I've created a simple control to show how it could interact with UI5 but it would need some work!
Notes: SAPUI5 contains jQuery in the default library, although there is a non-jQuery version available so you can use your own version of jQuery, I am not sure of the version needed to get both working optimally overlap. Additionally, Summernote seems to require bootstrap CSS + JS and not sure if that will work with UI5 too, especially if this is to be deployed in a Launchpad scenario. Could be OK as a standalone app though!
Have fun!
sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("MySummernoteControl", {
metadata: {
properties: {},
aggregations: {},
events: {}
},
renderer: {
apiVersion: 2,
render: function(rm, oButton) {
rm.openStart("div", oButton);
rm.openEnd();
rm.close("div");
}
},
onAfterRendering: function () {
if (!this._rendered) {
this.$().summernote();
this._rendered = true;
}
}
});
});
const ctrl = new MySummernoteControl();
ctrl.placeAt("content");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<!-- include bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.js"></script>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div id='content'></div>
</body>
</html>

how to integrate sailsjs with vuetify?

I am trying to use vuetify component like tables in my sails project. I can get the UI working fine, but all actions (button clicks) are not working unless I disable parasails for that page. Anyone has experience integrating sails with vuetify?

I followed this example:
https://github.com/ndabAP/vue-sails-example
But instead of using vue-bootstrap I did with Vuetify with the vue-cli:
vue create frontend
cd frontend
vue add vuetify
And in the vue.config.js I used:
// frontend/vue.config.js
outputDir: "../backend/assets/dependencies",
In the backend generate a controller route to index.js:
// config/routes.js
'/*': { action:'index', skipAssets: true, skipRegex: /^\/api\/v1\/.*$/ },
with the content:
// controllers/index.js
module.exports = {
friendlyName: 'View homepage',
description: 'Display homepage view',
exits: {
success: {
statusCode: 200,
description: 'Display the view index page.',
viewTemplatePath: 'pages/index'
},
},
fn: async function () {
return {};
}
};
The view layouts/layout.ejs should content:
<% /* views/layouts/layout.ejs */ %>
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<!--TEMPLATES-->
<!--TEMPLATES END-->
<%- exposeLocalsToBrowser() %>
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
And that is the better way that I figured it out. If there is another simplest way I want to know, because I think that is necessary modifying parasails.js to upload components directly or change the form of registering pages by registering components instead, using a unique page in a similar way.

Using Leaflet with rollup generates a huge sourcemap

I am currently getting my feet whet by using rollup.js beyond the simple "helloworld" case. I have created a rollup project where I am using a combination of babel, eslint and leaflet. My rollup.config.js is given below:
// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default{
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourcemap: 'inline',
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
eslint({
exclude: [
'src/styles/**',
]
}),
babel({exclude:'node_modules/**', })
]
};
Next my main.js is given by:
import L from 'leaflet';
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
And my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
#map {
width:600px;
height:400px;
}
</style>
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<title>Learning Rollup</title>
</head>
<body>
<div id="map">
</div>
<!-- This is the bundle generated by rollup.js -->
<script src="js/main.min.js"></script>
</body>
</html>
When I execute rollup -c, I end up with a huge 1.4MB+ main.js.min file...If I remove sourcemap: 'inline' from my rollup.config.js, the size of the file drops to 390 kb. For what reason is the sourcemap exploding the size of the generated file? Isn't treeshacking supposed to further reduce the generated file?

The sourcemap will almost always be bigger than the code it's mapping. For that reason, sourcemap: 'inline' is not recommended — do sourcemap: true instead and it'll be written to an adjacent .map file, which will only be downloaded if someone has their devtools open with sourcemaps enabled.
This is unrelated to treeshaking.

tinyMCE Editor removes custom tags in div elements

I need to add some custom tags into tinyMCE. It's ok if they are in body tag alone, but if I put them into the div tags then editor removes it. Here is the example:
I need to add "unsubthis" tag, so I've got this configuration file
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
verify_html : false,
skin: "o2k7",
theme: "advanced",
entity_encoding: "raw",
plugins: "fullpage,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_toolbar_align: "left",
custom_elements: "unsubthis",
valid_children: "+div[unsubthis]",
extended_valid_elements: "unsubthis"
});
If I open the editor and put into HTML this
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<unsubthis></unsubthis>
</body>
</html>
and Update then everything is fine and if I look into the HTML, code looks same. Problem comes if I try put into HTML this:
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<unsubthis></unsubthis>
</div>
</body>
</html>
Then unsubthis will be stripped out after update and I'll get this code
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div></div>
</body>
</html>
Problem occurs only if the unsubthis tag is empty, how can I fix it?
I'm currently using 3.5.6 version.