I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...
Related
Is it possible to define static meta data for each route in nuxt.config.js?
Suppose there is the following folder structure:
- pages
- examplepage.vue
- loremipsumpage.vue
- index.vue
the following is configured in nuxt.config.js:
head: {
title: 'Hi, I should only be displayed if nothing else is defined!',
meta: [
{ hid: 'description', name: 'description', content: 'Hi, I should only be displayed if nothing else is defined!' },
]
},
the following is configured in examplepage.vue:
head() {
return {
title: "Examplepage",
meta: [
{ hid: 'description', name: 'description', content: 'I wanna be placed in the generated html' },
]
}
},
And yes I know, that works in principle. When calling the page, the title and the meta tags are adjusted by the javascript. But not when generating my static examplepage/index.html file.
The following head is still generated there (dist/examplepage/index.html):
<head>
<title>Hi, I should only be displayed if nothing else is defined!</title>
<meta data-n-head="1" data-hid="description" name="description" content="Hi, I should only be displayed if nothing else is defined!">
.....
Is there a possibility to define fixed meta tags for certain routes which will be considered when generating the static html files? The data is not even dynamic. I only want to define static meta values for static routes.
Important notice:
I know that SSR would solve my problem.
But i would like to continue to run the site as SPA.
I have already tried various configurations in nuxt.config.js. However, all without success. In the Nuxt documentation I have also not found.
I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links.
I ended up only seeing the raw HTML output, so after some searching on Google I found this post on Github suggesting to use RawHTML.
So I put this code together which does create the red notice, but it doesn’t show the actual HTML only [object Object]. So I’m clearly doing something wrong here, but not sure what? Anyone who can point me in the right direction how to make the notices show the raw HTML?
wp.data.dispatch( 'core/notices' ).createNotice(
'error',
wp.element.createElement( wp.element.RawHTML, null, '<p>test</p>' ),
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true
}
);
The notice component has an actions property which enables links to be rendered inside a notice, removing the need to use RawHTML.
options.actions [Array]: User actions to be presented with notice.
A notice can have one or more actions, each action has a label and must specify either a url or onClick function, eg:
wp.data.dispatch('core/notices').createNotice(
'error', // type of notice
'Something went wrong..', // message
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true,
actions: [
{
label: 'Option A',
url: '#link' // styled as plain link
},
{
label: 'Option B',
onClick: () => { alert('ok') } // styled as a button link
}
]
}
);
Result:
Im using foundation emails, i can use variables on a template by wrapping them in a raw tag, for example:
<raw><%= myVariable %></raw>
Now, I need to add attachments, and attachmeants come as an array with this form:
attachmentsData: [
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
title: 'Screenshotfrom2018-11-1916-43-01.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
},
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
title: 'Screenshotfrom2018-11-1916-43-02.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
},
],
On the documentation it also says that i can loop over arrays that are declared in src/data in yml format.
However in my case i need the array of objects to come from the backend.
but if it comes from the backend it i have to parse it with the raw tags.
But if use the raw tags i cant use the each helper:
https://foundation.zurb.com/emails/docs/panini.html#custom-data
Do you know how to loop over this array?
note that, If i do <raw><%= myArray[0].name %></raw> this works and prints the right value.
Any tips? Thanks
If <raw><%= myArray[0].name %></raw> works, then the following should work too.
<% myArray.forEach(data => { %>
<raw><%= data.name %></raw>
<% }); %>
In the open source example http://www.telesc.pe/, how do I remove digest and daily view items from the view menu? Do I need to modify telescope-base?
You need to create a new package to hold your customizations. You can look at the Telescope documentation, look at existing theme packages such as base and hubble, or copy and adapt the telescope-blank package.
Once you have your new package, you can simply overwrite the viewNav menu. For example:
viewNav = [
{
route: 'posts_top',
label: 'top'
},
{
route: 'posts_new',
label: 'new'
},
{
route: 'posts_best',
label: 'best'
}
];
The daily view is provided by another package, telescope-daily, so you'll need to remove it from the app if you don't want to use it:
meteor remove telescope-daily
(Note that the digest view will also be extracted out as its own package eventually, but right now it's still part of the core)
You can try this :
Create a config.js under client/ and put the following code inside :
while(viewNav.length > 0){
viewNav.pop();
}
viewNav.push({
route: 'posts_top',
label: 'Top'
});
// etc...
This will load after telescope-base which is responsible for exporting viewNav an array used to control which items are inserted in the menu.
I have a sencha touch 2 app which is working flawlessly without deployment. However, when I deploy to either testing, production or native, I have several buttons inside a navigation view with tap events which won't work anymore. No errors are shown. I cannot understand why this is happening only after deployment.
Here is the relevant code:
Controller:
control: {
'#main-function': {
tap: 'loadFunction'
},
loadMyBoat: function() {
this.getProducts().up().push({
xtype: 'myxtype',
})
Ext.getStore('Items').getProxy().setUrl('myurl');
Ext.getStore('Items').load();
},
View:
Ext.define('MyBoat.view.ItemList', {
extend: 'Ext.navigation.View',
xtype: 'myxtype',
config: {
title: 'My Title',
styleHtmlContent: true,
defaultBackButtonText: 'Items List',
items: {
xtype: 'list',
itemTpl: '{Field_Name}',
title: 'Tap on a boat to access further details',
store: 'Boats'
}
}
})
Anyone ever encountered this? Any help would be greatly appreciated.
Open up your DOM editor (in chrome, F12 I believe). Your control selector is selecting #main-function, so you'll want to make sure this is a valid selector.
On the console of your developer tools window, type:
Ext.ComponentQuery.query('#main-function')
This should be what the controller is trying.
After lots of debugging I managed to fix the problem. Turns out that using the following code to generate any component will not work well after deployment:
new Ext.button({.....})
Instead you have to use xtypes rather than the new keyword. I think this has something to do with the fact that the deployer stores all the js code in one file and thus since I was using the new keyword, it was being created somewhere in the js file when it actually won't exist in the context. The weird thing is that it does not show any errors so hopefully this will help other folks.