I am developing a discussion panel in ASP.NET in which my TinyMCE code is the following:
<!-- TinyMCE -->
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
editor_selector : "mceEditor",
element: "abc",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
setup: function (ed) {
ed.onKeyPress.add(
function (ed, evt) {
}
);
},
// Theme options
theme_advanced_buttons1: "save,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,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
</script>
<!-- /TinyMCE -->
I want to apply the TinyMCE editor on the text area and in my HTML I am giving the text area with the class name:
<% using (Html.BeginForm("PostProblem", "Discussion", FormMethod.Post))
{ %>
<textarea id = "abc" class = "mceEditor" rows = "100" cols = "100" ></textarea>
<% } %>
The textarea is not working. It is showing a simple textarea, not a TinyMCE text area :(
Make sure the path for tiny_mce.js is correct. Better choose it (tinymce/jscripts/tiny_mce/tiny_mce.js).
Verify also if your textarea looks fine without <% ...%> sections, and also remove class property for the moment, just to identify which one is the cause...
Related
I'm trying to add alert box to my textbox area so I can not add any alert box that will appear on the page's content.
How will I only add it?
I have tried to do this:
importcss_groups: [
{ text: 'Succes (Green)', value: 'alert alert-success' },
{ text: 'Info (Blue)', value: 'alert alert-info' }
]
i have try to make its here:
It must be such that it makes them bootstrap alert.
My TinyMCE code:
tinymce.init({
selector: 'textarea',
theme: 'modern',
height: 350,
plugins: [
'advlist autolink image link lists charmap anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons paste textcolor bbcode'
],
content_css: [
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'
],
importcss_groups: [
{ text: 'Succes (Green)', value: 'alert alert-success' },
{ text: 'Info (Blue)', value: 'alert alert-info' }
]
});
I have complete its now:
i have add
style_formats: [{
title: 'Succes (Grøn)',
block: 'div',
classes: 'alert alert-success'
}, {
title: 'Info (Blå)',
block: 'div',
classes: 'alert alert-info'
}, {
title: 'Warning (Gul)',
block: 'div',
classes: 'alert alert-warning'
}, {
title: 'Danger (Rød)',
block: 'div',
classes: 'alert alert-danger'
}]
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'm using tinymce editor for sending an email.While sending actual email in mscrm activities and ember.js framework ,Email body is sent as HTML source not as actual HTML format.
E.g while receiving an email I got format as '<'strong'>test<'/strong'>'
not as 'test' in bold.Please suggest.
below is the init function i have used
RichTextArea = Ember.TextArea.extend({
editor: null,
_suspendValueChange: false,
didInsertElement: function () {
debugger;
var id = "#" + this.get("elementId");
var view = this;
tinyMCE.init({
width: "700",
height: "400",
plugins : "table,inlinepopups",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'},
customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
},
mode: "specific_textareas",
editor_selector : "mceEditor",
theme: "advanced",
theme_advanced_resizing: true,
//// Theme options
// theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code",
// theme_advanced_buttons2: "",
// theme_advanced_buttons3: "",
// theme_advanced_buttons4: "",
// theme_advanced_toolbar_location: "top",
// theme_advanced_toolbar_align: "left",
// theme_advanced_statusbar_location: "bottom",
// theme_advanced_resizing: true,
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_location: "top",
selector: id,
element_format : 'html',
setup : function(ed) {
view.set("editor", ed);
ed.onKeyUp.add(function (ed, e) {
view.suspendValueChange(function () {
view.set("value", ed.getContent());
});
});
},
valid_styles: {
'*': 'border,font-size',
'div': 'width,height'
}
});
},
suspendValueChange: function(cb) {
this._suspendValueChange = true;
cb();
this._suspendValueChange = false;
},
valueChanged: function() {
if (this._suspendValueChange) { return; }
var content = this.get("value");
this.get("editor").setContent(content);
}.observes("value"),
willClearRender: function() {
this.get("editor").remove();
}
});
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);
});
},
});