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?
Related
I need for the element "Supersctipt" set attribute title value as "footnote".
By default here "Superscript".
I don't know a way how to do it. Here is my code tinymce:
initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
tinymce.init({
selector: selector,
skin: false,
branding: false,
menubar: false,
height: 500,
toolbar:
'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
plugins: [
"code", "paste", "lists"
],
paste_as_text: true,
block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6; ',
content_css: '/css/tinymce.css?' + new Date().getTime(),
})
}
I tried through jQuery refer to this element, but without success, because tinymce inits a little later:
$(function() {
$('.js-tinymce button[title="Superscript"]').attr('aria-label', 'footnote')
})
I also tried this way, reading documentation:
formats: {
sup: { selector: 'sup'},
},
style_formats: [
{ title: 'footnote', format: 'sup' },
]
But without success too( Finally, how to do this easy task?
Yeeeah! I've solved the problem by adding setup:... option to the end of tinymce init object. Code:
initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
tinymce.init({
selector: selector,
skin: false,
branding: false,
menubar: false,
height: 500,
toolbar:
'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
plugins: [
"code", "paste", "lists"
],
paste_as_text: true,
block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6',
content_css: '/css/tinymce.css?' + new Date().getTime(),
setup: function(tinyMCE) {
tinyMCE.on('init', function() {
$('[aria-label="Superscript"]').attr('title', 'Footnote')
});
},
})
}
I search a solution to add automatically a "rel-attribute" to every image which is added in the TinyMCE 5 editor. So the html tag should look like:
<img class="imageborder" src="https://xy.jpg" rel="lightbox" width="500" height="333" />
I've tried it like that, but it doesn't get added. This is the JSFiddle.
tinyMCE.init({
selector: '#myTextarea',
plugins: 'code image autolink link lists charmap print preview textcolor',
toolbar: 'code image link | undo redo | insert | ',
menubar: false,
min_height: 300,
image_class_list: [
{ title: 'imageborder', value: 'imageborder' },
],
image_rel_list: [
{ title: 'lightbox', value: 'lightbox' },
],
setup: function (ed) {
ed.on("keyup", function () {
$('#preview').html(tinymce.activeEditor.getContent());
});
}
});
You can get the img element on NodeChange event.
Doc: https://www.tiny.cloud/docs-4x/advanced/events/#nodechange
Jsfiddle: https://jsfiddle.net/aswinkumar863/L48jdqzs/
tinyMCE.init({
...
setup: function(ed) {
ed.on("keyup", function() {
$('#preview').html(tinymce.activeEditor.getContent());
});
ed.on('NodeChange', function(e) {
e.element.parentNode.querySelectorAll('img:not([rel=lightbox])').forEach(img => {
img.setAttribute('rel', 'lightbox');
});
});
}
});
You could add the rel to the link instead of the image like this:
tinyMCE.init({
selector: '#myTextarea',
plugins: 'code image autolink link lists charmap print preview textcolor',
toolbar: 'code image link | undo redo | insert | ',
menubar: false,
min_height: 300,
image_class_list: [
{ title: 'imageborder', value: 'imageborder' },
],
rel_list: [
{title: 'lightbox', value: 'lightbox'},
{title: 'Other rel', value: 'otherrel'}
],
setup: function (ed) {
ed.on("keyup", function () {
$('#preview').html(tinymce.activeEditor.getContent());
});
}
});
It´s in the documentation here: https://www.tiny.cloud/docs/plugins/opensource/link/#exampleusingrel_list
Then use the a rel as the lightbox link, instead of the image.
My application is written using Ext.js and uses TinyMCE. The toolbars in the TinyMCE editors offers text alignment options: align left, center, right and justify. I would like the "justify" option to be selected by default when the screen containing the editor is loaded. I looked in the docs of TinyMCE and Ext.js to no avail.
Here my configuration code for TinyMCE:
Ext.define('Xxx.config.TinyMceConfig',{
singleton : true,
alternateClassName : ['TinyMceConfig'],
config:{
plugins: [
"lists link charmap searchreplace code fullscreen table paste ice"
],
language : "fr_FR",
docs_language : "fr_FR",
visual : true,
cleanup_on_startup : false,
cleanup : true,
gecko_spellcheck : true,
remove_linebreaks : false,
encoding : "xml",
entity_encoding : "raw",
toolbar1 : "fullscreen | undo redo selectall | bold italic underline alignleft aligncenter alignright alignjustify | pastetext pasteword pasteEditor",
toolbar2 : "searchreplace | subscript superscript charmap | unlink removeformat | visualaid table | cleanup code ice_smartquotes",
toolbar3 : "bullist numlist row_props cell_props | row_before row_after delete_row | col_before col_after delete_col | ice_togglechanges ice_toggleshowchanges iceacceptall icerejectall iceaccept icereject",
inline_styles : false,
paste_as_text :true,
paste_auto_cleanup_on_paste: true,
paste_text_use_dialog: true,
paste_retain_style_properties: "margin, border, border-width, border-style, bgcolor, background, border-color, ul, li, ol, page-break-before, " +
" page-break-after, border-collapse, padding, width, height, font-size, font-weight, font-family, text-align, text-decoration, float, " +
"display, line-height, align",
paste_convert_headers_to_strong : true,
paste_convert_word_fake_lists: false,
ice: {
isForceTracking: false,
isTracking: false,
user: { name: 'Utilisateur inconnu', id: 1}
},
menubar:false,
statusbar: false,
elementpath: false,
toolbar_items_size: 'small'
},
constructor: function(config) {
this.initConfig(config);
}
});
Try to use tinymce property forced_root_block_attrs, and forcing style in line text-align justify
config:{
...,
forced_root_block_attrs : { style: 'text-align: justify;' }
}
tinymce docs:
https://www.tiny.cloud/docs/configure/content-filtering/#forced_root_block_attrs
Consider the initialization:
function initMyTinymce() {
tinymce.init({
selector: $(this).attr("id"),
directionality: "ltr",
});
}
Is it possible to add properties to tinyMCE after init()?
For example:
plugins: "link,code,textcolor",
relative_urls: false,
convert_urls: false,
remove_script_host: false
I'm using TinyMce 4.1.6 (2014-10-08).
Yes, this is possible, but parameters that get read on initialisation only won't have an impact if they get set later on. Example: To change the parameter
plugins changes nothing because the tinymce UI has been rendered already.
To set a paramter after initialization use:
editor.settings.my_setting = 'abcd',
function Tiny_readonly(id, action) {
tinymce.get(id).remove();
if (action == 0) {
tinymce.init({
selector: 'textarea#' + id,
skin: 'dark',
height: 200,
readonly: true,
toolbar: false,
menubar: false,
statusbar: false,
init_instance_callback: function(editor) {},
});
} else {
tinymce.init({
selector: 'textarea#' + id,
height: 250,
menubar: false,
skin: 'default',
plugins: [
'advlist autolink lists link charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
}
}
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);
});
},
});