how to use TinyMCE visual_anchor_class - javascript

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

How to change value in attribute title for button on the toolbar tinymce?

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')
});
},
})
}

Add "rel"-attribute to img tag in TinyMCE 5 editor

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.

How to select the "Justify text" toggle button in TinyMCE by default?

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

Add properties to TinyMce after init()?

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 }'
});
}
}

bbcode tags formatting incorrectly in tinymce 4

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);
});
},
});

Categories

Resources