I have just included my first tinyMCE bit of code, works absolutely great. However, In one part of my project, I dynamically create textareas that must also have tinyMCE enabled.. How do i go about adding tinymce to the new textarea i create.
At the moment, this is firing globally:
function LoadTinymce()
{
tinymce.init({
menu: {
file: false,
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: '|'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table'},
tools: {title: 'Tools'}
},
selector: ".tinymce"
});
}
LoadTinymce();
When i click on the button that creates my new textarea, what might i be calling to apply a new tiny mce rte on it?
This is very easy, all you need to do is to call the tinymce mceAddcontrol command in combination with the id of the newly created textarea:
tinymce.execCommand('mceAddControl', false, "your_textarea_id");
This should do! Click on fiddle link below. :)
http://jsfiddle.net/dcodesmith/ttXvb/
(function($) {
function loadTinymcsConfig(){
tinymce.init({
menu: {
file: false,
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: '|'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table'},
tools: {title: 'Tools'}
},
selector: ".tinymce"
});
};
loadTinymcsConfig();
var textareaHtmlTmpl = '<textarea class=\'tinymce\'></textarea>';
$('.addtextarea').on('click', function(){
$('body').append(textareaHtmlTmpl);
loadTinymcsConfig();
});
})($);
Related
I'm trying to create an application. Where I'm using tinymce as editor. In the file panel, I don;t want to show new document. Corrently it's rendering:
But I just want to render it with thse two options:
Can anyone help me with it?
Here is my related config:
plugins: 'print preview ...',
menubar: 'file edit ...',
thanks.
Per the documentation if you want to control what you see on each discrete menu you have to provide those choices explicitly:
https://www.tiny.cloud/docs/configure/editor-appearance/#menu
The defaults are:
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
So if you only want 2 items on the file menu you would have to state that explicitly within the broader menu option:
file: { title: 'File', items: 'preview | print ' },
Here is a TinyMCE Fiddle showing this in action: https://fiddle.tiny.cloud/hYhaab
I really need help as this is actually the first time I'm using a wysiwyg editor on a site.
This is the code for the textarea: <textarea title="news" id="news" name="news" class="form-control col-md-7 col-xs-12"></textarea> and that of tinymce integration:
<script>
tinymce.init({
selector: '#news',
browser_spellcheck: true,
branding: false,
height: 400,
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
},
menubar: 'file edit insert view format table tools help',
toolbar: ['undo', 'redo','searchreplace', 'preview'],
plugins: [ 'code', 'lists', 'autolink', 'preview', 'searchreplace', 'wordcount'],
encoding: 'xml'
});
</script>
my issue now is that when i try to insert the values into the database, it inserts the first time but does not insert consecutive values. This is my code for insertion:
$ins->insert('headline', array('id'=>'','post_id'=>$pi_id,'post_cat'=>$cat,'post_title'=>$title,'post_cont'=>$content));
Also i allowed $content which is the value of the textarea to pass through some functions like striptags and htmlentities, i print out the values of $content after submission and it displays it in xml which i don't see as a problem. the only issue i've got is it does not display consecutive data in the database after the first submission. Thanks
I guess I'll reply this myself, I made a very silly mistake and i found out that the apostrophes were causing the error. I ended using bindParam to solve that. You can also use addslashes() function for that.
Using TinyMCE, I want to be able to add a custom class to some of the anchor tags in my editor. I found visual_anchor_class which I can't get to work. I've created a class called .anchorBtn and added contextmenu to my init.
When I right-click over my anchor (where it says "DONATE"), I see an empty white box.
tinymce.init({
selector: selector,
menubar: false,
height: 300,
plugins: [
"link anchor lists code paste image contextmenu"
],
statusbar: false,
toolbar: 'undo redo | bold italic underline | bullist numlist | buttons link image | code',
content_css : "css/tinyMCE.css",
link_list:"cgi/linkList.exe?token="+tkn,
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
body_class: "mceBackColor",
oninit : "setPlainText("+selector+")",
visual_anchor_class: 'anchorBtn',
contextmenu: "anchorBtn",
paste_as_text: true,
file_browser_callback: function(field_name, url, type, win) {
var tkn=getToken();
$("#PDFuform").attr("action", "cgi/pdfUpload.exe");
$("#pdfToken").val(tkn);
$("#pdfField").val(field_name);
$('#PDFuform input').click();
},
setup: function (editor) {
editor.addButton('buttons', {
type: 'menubutton',
text: 'Custom Buttons',
icon: false,
menu: [
{
image : '../img/tourBtn.jpg',
title : "SCHEDULE A TOUR",
text: "SCHEDULE A TOUR",
icon: false,
onclick: function () {
editor.insertContent("<div class='bbtn bSAT'>SCHEDULE A TOUR</div>");
}
}
]
})
}
});
What am I doing wrong?
I've created a custom dropdown in tinymce like this:
tinymce.init({
toolbar: "alignment",
setup: function(editor) {
editor.addButton('alignment', {
type: 'menubutton',
text: 'Alignment',
icon: false,
menu: [
{ text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
{ text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
{ text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
{ text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
]
});
}
});
which creates this:
However what I'd like is to just move the alignment buttons from the main toolbar in the dropdown menu.
How do I got about putting these actual buttons from the toolbar, into a dropdown menu? Is it like the code above or is a a totally different way?
So basically put these buttons in the dropdown above with the toggle states for on and off too.
Try this setup - Plunker
tinymce.init({
selector: "textarea",
toolbar: "styleselect | bold italic | alignment | alignmentv2",
setup: function(editor) {
editor.addButton('alignment', {
type: 'listbox',
text: 'Alignment',
icon: false,
onselect: function(e) {
tinyMCE.execCommand(this.value());
},
values: [
{icon: 'alignleft', value: 'JustifyLeft'},
{icon: 'alignright', value: 'JustifyRight'},
{icon: 'aligncenter', value: 'JustifyCenter'},
{icon: 'alignjustify', value: 'JustifyFull'},
],
onPostRender: function() {
// Select the firts item by default
this.value('JustifyLeft');
}
});
editor.addButton('alignmentv2', {
type: 'menubutton',
text: 'Alignment v2',
icon: false,
menu: [
{icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
{icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
]
});
}
});
#NoBugs, you can enhance the onselect method to perform the alignment icon update.
At first, by examining structure of this object in the onselect method we'll see that this.settings.values property stores an array with early defined values.
By using one of many find utility functions we get the selected value item and update the icon as needed:
onselect: function() {
selectedItem = find(this.settings.values, {value: this.value()})
this.icon(selectedItem.icon)
tinyMCE.execCommand(this.value());
}
Hope, this helps. Cheers!
This is probably best solved using a custom split button. That way we can assign the last selected option to the main button.
See the result here - CodePen
tinymce.init({
selector: '#editor',
menubar: false,
toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',
setup: function (editor) {
editor.on('init', function() {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Georgia';
});
editor.addButton('alignmentsplit', {
type: 'splitbutton',
text: '',
icon: 'alignleft',
onclick: function(e) {
tinyMCE.execCommand(this.value);
},
menu: [{
icon: 'alignleft',
text: 'Align Left',
onclick: function() {
tinyMCE.execCommand('JustifyLeft');
this.parent().parent().icon('alignleft');
this.parent().parent().value = 'JustifyLeft'
}
}, {
icon: 'alignright',
text: 'Align Right',
onclick: function() {
tinyMCE.execCommand('JustifyRight');
this.parent().parent().icon('alignright');
this.parent().parent().value = 'JustifyRight';
}
}, {
icon: 'aligncenter',
text: 'Align Center',
onclick: function() {
tinyMCE.execCommand('JustifyCenter');
this.parent().parent().icon('aligncenter');
this.parent().parent().value = 'JustifyCenter';
}
}, {
icon: 'alignjustify',
text: 'Justify',
onclick: function() {
tinyMCE.execCommand('JustifyFull');
this.parent().parent().icon('alignjustify');
this.parent().parent().value = 'JustifyFull';
}
}
],
onPostRender: function() {
// Select the first item by default
this.value ='JustifyLeft';
}
});
}
});
Note: If you re-select an alignment option on content that is already aligned that way, TinyMCE toggles the alignment formatting off. This is default TinyMCE behaviour, but you would need to indicate that the section already has that formatting via a toggle state on the button for this to make more sense to the user. This has not been implemented above.
I'm trying to get the order of bbcode tags to format correctly with tinymce 4.1.5.
When I set the text color and underline it, the closing tags get mixed up or it puts the text-decoration="underline" attribute in the color tag.
For instance, I get
[color="ff0000" text-decoration="underline"]some text[/color]
When it should be
[color="ff0000"][u]some text[/u][/color]
Or I may get
[color="ff0000"][u]some text[/color][u]
Here is my text area
#using (Html.BeginForm("TestTinyMce", "Content", FormMethod.Post))
{
#Html.TextArea("TextArea", Model.TextArea, new { #id = "TextArea", #class = "tinymce" })
<input type="submit" value="submit"/>
}
Here is the initialization:
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"bbcode,paste,textcolor"
],
toolbar1: "undo redo | bold italic underline forecolor | link unlink "
});
I'm checking the value when it reaches the controller after it's submitted. I'm trying to see if there is any configurations, plugins, or tricks I can use to cleanup this bbcode.
I ended up overriding the formatting with tinymce so it breaks up the spans. This way I don't get underline mixed in with color.
To handle the tag closing mismatch, I used the SaveContent event and just cleaned up the tags.
tinymce.init({
selector: "textarea.tinymce",
theme: "modern",
width: "100%",
height: "250px",
plugins: [
"bbcode paste textcolor link"
],
toolbar1: "undo redo bold italic underline forecolor link unlink ",
formats: {
bold: { inline: 'strong', exact: true },
italic: { inline: 'em', exact: true },
underline: { inline: 'span', styles: { "text-decoration": "underline" }, exact: true },
forecolor: { inline: 'span', styles: { color: '%value' }, exact: true }
},
// New event
setup: function (editor) {
editor.on('init', function (args) {
});
editor.on('SaveContent', function (e) {
e.content = FixTags(e.content);
});
},
});