I'm using TinyMCE as texteditor in my project, now I want people to write some text with newlines etc... , store it in my database, and show it on the website.
But the problem is the text gets saved with all the <p> for newlines in my database so when I show it on my website I got all the <p> in my text, is there any way to decode this to newlines?
Which version of TinyMCE are you using? You should check the options during init of tinymce such as:
tinymce.init({
forced_root_block: false,
force_br_newlines: true,
force_p_newlines: false,
apply_source_formatting: false,
remove_linebreaks: false,
convert_newlines_to_brs: true
or you may directly replace on post process phase
editor.on('PostProcess', function(ed) {
// perform clean
ed.content = ed.content.replace(/(<p> <\/p>)/gi,'<br />');
});
Related
I'm trying to add a custom button into the Elementor text widget toolbar next to other buttons like Bold, Italic, Underline etc. It seems that the ability to customize the instance using PHP may be disabled but that it is possible to do so using JavaScript instead.
I can get back the view by using the following code but I'm unable to get back the editor instance.
elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}
I've tried the following suggestions but none seem to return anything after that.
// get active instances of the editor
let editor = tinymce.activeEditor;
var editor = elementor.editors.get(0).getEditModel().get('editor');
var activeEditor = view.getOption('editor');
The rest of the suggested code after getting the editor instance is as follows but I don't get this far.
// add a button to the editor buttons
editor.addButton('tooltip', {
text: 'tooltip',
icon: false,
onclick: (editor) => {
tooltipCallback(editor);
}
});
// the button now becomes
let button=editor.buttons['tooltip'];
// find the buttongroup in the toolbar found in the panel of the theme
let bg=editor.theme.panel.find('toolbar buttongroup')[0];
// without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
// append the button to the group
bg.append(button);
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(),
...
On one hand
I've a field will in a collection, where user can save html text (through a WYSIWYG editor): it works fine and users can write/save some strings like this it's<strong>bold</strong> and sometimes <i>italic</i>. Nothing crazy..
On a second hand
When a user send this field will by email (as part of emailData), rendered with meteorhacks:ssr in an html template, the field show up as it's<strong>bold</strong> and sometimes <i>italic</i>. with HTML tags as normal text.
So, anyone know the trick to render in the html email's body: 'it's bold and sometimes italic.'? Thanks.
My code is very complicated, lot of const and succession of functions, but except of html rendering, it works fine and is finally structured like this:
SSR.compileTemplate('htmlEmail', Assets.getText('replycontact.html'));
var emailData = {
message: `${message}`,
will: `${will}`,
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});
The problem was that Meteor was escaping the HTML string.
Therefore, the solution is to use 3 brackets {{{ }}} instead of 2 - here for the emailData in the html template : instead of {{will}}, use {{{will}}}.
The code above in the question remain as it.
source: https://stackoverflow.com/a/16565529/7281870
Your data is most likely being saved as HTML encoded in the database, eg
<b>
is saved as
<b>
If so, you simply need to unencode it using the Javascript decodeURI() function, which you can read more about here:
http://www.w3schools.com/jsref/jsref_decodeuri.asp
So your code will look like this:
var emailData = {
message: `${message}`,
will: decodeURI(${will}),
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});
I'm creating a simple WordPress plugin that requires wp_enqueue_media() to be called from a TinyMCE pop up in order to upload and/or select an image.
The issue im having is wp_enqueue_media() and wp_enqueue_script() don't appear to work with the TinyMCE pop up modal.
I am including wp-load.php in my modal window.
Is there a way to utilize native WordPress script loading within a TinyMCE modal?
Here is an example of what I am doing.
http://return-true.com/adding-tinymce-button-to-wordpress-via-plugin-part-2/
Like I already said in my comment, I think the best approach is to use an inline modal (no iframe).
It is very simple: using the 1st part of the article (http://return-true.com/adding-tinymce-button-to-wordpress-via-a-plugin/) as a basis, just replace the JavaScript with the following (copied from TinyMCE guidelines):
(function() {
tinymce.PluginManager.add('example', function(editor) {
// Add a button that opens a window
editor.addButton('example', {
text: 'Example',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
})();
After that, you have a simple modal, with no iframe, thus using the native Wordpress script loading.
If the content must be in an iframe (which I doubt), one option is to create a 'blank' page in Wordpress with a page template of its own and use that page as the modal content. I actually tested that it works, but it is clearly more complicated (requires something like a blog post to explain).
The issue was that I was not including wp_head() and wp_footer() in the modal window html.
Adding these functions solved the enqueue issues.
As part of a WP plugin I am creating, I am using Wordpress' Javascript/AJAX modal Uploader/gallery browser for multiple item selection. I am using this JS code;
file_frame = wp.media.frames.file_frame = wp.media({
multiple: true,
library: {
type: 'image'
},
});
This creates the frame as expected, but removes the left hand side bar, and the bottom edit/clear selection tool. Does anyone know how I can get these 2 things back?