after clicking on a div I am generating a textarea. After then I am loading tinyMCE on it. This works well but after loading the tinyMCE I want to set focus on it using "mceFocus". This isn't working. No focus set regardless which browser I try.
$.when(
btn.parent().html('<textarea autocomplete="off" name="' + fld + '" id="' + fld + '" readonly></textarea>')
).done(function() {
tinyMCE.execCommand('mceAddControl', false, fld);
tinyMCE.execCommand('mceFocus', false, fld);
});
Related
I am attempting to write some tests in Jest that require the use of TinyMCE. I am getting back what seems to be a valid tinymce object (since tinymce.majorVersion displays 4) but when I perform tinymce.editors[0] I get undefined.
This is my js/Jest code:
describe('My Test', () => {
var editor = null;
var BODY = 'editor-body';
var tinyMceSettings = {
elements = BODY,
plugins = 'myplugin',
init_instance_callback: function(editor) {
editor.setContent(Utils.HTML);
};
};
tinymce.init(tinyMceSettings);
editor = tinymce.get(BODY);
// tinymce.majorVersion prints '4'
// tinymce.editors[0] gives me undefined
});
My Utils.js file contains some HTML to testwith:
const HTML =
"<div id='editor-body' class='editor-body-parts'>" +
"<p data-type='header'>" +
"<span class='element'>TIME</span>" +
"<span class='element'>PERSON</span>" +
"<span class='element'>ADDRESS</span>" +
"</p> +
"</div>";
Any help would be great.
Jest is not a "proper" browser so TinyMCE likely won't actually initialize against it. I would suspect that the init() call is simply not working due to that and while the global tinymce variable exists simply by loading the TinyMCE script the editors[] array would be empty unless a proper init() completes.
I have content with placeholder such as [[name]], [[lastname]].
I want everything from [[ until ]] gets highlight, for example in yellow background while the real content that will be save in DB is still plain text.
For easier to understand, please take a look at this link. https://ckeditor.com/docs/ckeditor4/latest/features/placeholder.html
It is placeholder plugin for CKEditor. And here is working sample. https://ckeditor.com/docs/ckeditor4/latest/examples/placeholder.html
Currently I use textpattern plugin for TinyMCE and this code.
tinymce.init({
// options...
'textpattern_patterns': [
{'start': '[[', 'end': ']]', 'cmd': 'KPHW'}
],
'setup': function(editor) {
editor.addCommand('KPHW', function(ui, v) {
let contentText = editor.selection.getContent({ format: 'text' });
editor.execCommand('mceInsertContent', false, '<span style="background-color: yellow;">[[' + contentText + ']]</span>');
});
}
});
But it replace plain text [[placeholder]] with <span style="background: yellow;">[[placeholder]]</span> which is wrong.
Found this variable plugin https://github.com/ziktar/tinymce-variable.
Still have some bugs but is most active.
I have a Select2(Multi-select),I want to type admin and select it.
this my HTML code :
<select class="js-select2" multiple="multiple">
<option> admin </option>
<option> John Doe </option>
</select>
this is my test code :
describe('when select admin and press save button', function () {
beforeAll(function () {
browser.get('http://example');
element(by.css("*[id='technician'] + span.select2")).click();
browser.sleep(1000);
element(by.css(".select2-search__field")).sendKeys('admin');
browser.sleep(1000);
element(by.css('.select2-results__options li:nth-of-type(1)')).click();
element(by.buttonText('save')).click();
});
it('You must see a successful message', function () {
expect(element(by.css(".alert")).getText()).toContain('Settings saved successfully');
});
});
When I execute the code, Protractor gives this message :
Failed: element not interactable
Where did i make mistakes ? and What should i do ?
Select2 is a jQuery plugin, which implement dropdown with css & javascript, it's not native dropdown which implement purely by select.
For such CSS dropdown, the visible option does not comes from select and the select is invisible or visible but with very small size (like 1 * 1 size) prevent user to operate it.
Below code example test on the demo from Select2 site
describe('handsontable', function(){
it('input text into cell', function(){
browser.ignoreSynchronization = true;
browser.get('https://select2.org/selections');
browser.sleep(3000);
// click to make the input box and options display out
element(by.css('select.js-example-basic-multiple-limit + span' +
' .select2-selection--multiple')).click();
browse.sleep(1000);
element(by.css("select.js-example-basic-multiple-limit + span input"))
.sendKeys('Hawaii');
element(by.xpath("//li[#role='treeitem'][text()='Hawaii']")).click();
browser.sleep(3000);
});
})
I want to add a custom button that sets up a bootstrap accordian element. To do this, I will need to know how many other accordian elements are in the text already so that I can give the new element the proper ID. Right now I have:
// Add a custom button
ed.addButton('accordianArea', {
title : 'Accordian Area',
text : '[accordian/]',
icon: false,
onclick : function() {
// Add you own code to execute something on click
ed.focus();
var text = ed.selection.getContent({'format': 'html'});
var accordianText = '<div class="panel panel-default">' +
'<div class="panel-heading" role="tab" id="heading1">' +
'<h4 class="panel-title">' +
'<a role="button" data-toggle="collapse" href="#heading1" aria-expanded="true" aria-controls="heading1">' +
'Accordian Title<span id="_cursor" />' +
'</a>' +
'</h4>' +
'</div>' +
'<div id="heading1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">' +
'<div class="panel-body">' +
(text ? text : 'Accordian Text') +
'</div>' +
'</div>' +
'</div>';
ed.execCommand('mceInsertContent', false, accordianText);
ed.selection.select(ed.dom.select('#_cursor')[0]); //select the inserted element
ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
ed.dom.remove('_cursor'); //remove the element
}
});
I need to be able to count how many panel-collapse classes are in the text so I can make heading1 and collapse1 increment accordingly with each new add. Also I suppose I will need to be able to edit the ones already there in case one is removed, so that the next one added is not a duplicate of a different one.
Is there a way count these in either jQuery or javascript?
Thanks,
James
Yes, this is possible:
var ed = tinymce.get('your_editor_id');
var $elements = $(ed.getBody()).find('.panel-collapse');
var count = $elements.length;
Below is taken from the TinyMCE website and their example for making a custom ui. The problem is that the example only demonstrates what to do if you want buttons. What if you want to implement your own select dropdown for font sizes etc.. I don't even want anything custom really, just a default tag will do. How can I do it?
tinyMCE.init({
mode: "textareas",
content_css : "../css/custom_theme_editor.css",
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
language: false, // Prevents language packs from loading
theme: function(editor, target) {
var dom = tinymce.DOM, editorContainer;
// Generate UI
editorContainer = dom.insertAfter(dom.create('div', {style: ''},
'<div>' +
'<button data-mce-command="bold">bold</button>' +
'<button data-mce-command="italic">italic</button>' +
'<button data-mce-command="underline">underline</button>' +
'<button data-mce-command="fontsizeselect">font size</button>' +
'<button data-mce-command="mceInsertContent" data-mce-value="Hello">Insert Hello</button>' +
'</div>' +
'<div style="border: 1px dashed #cccccc;"></div>'
), target);
// Set editor container size to target element size
dom.setStyle(editorContainer, 'width', target.offsetWidth);
// Bind events for each button
tinymce.each(dom.select('button', editorContainer), function(button) {
dom.bind(button, 'click', function(e) {
e.preventDefault();
// Execute editor command based on data parameters
editor.execCommand(
dom.getAttrib(e.target, 'data-mce-command'),
false,
dom.getAttrib(e.target, 'data-mce-value')
);
});
});
// Register state change listeners
editor.onInit.add(function() {
tinymce.each(dom.select('button', editorContainer), function(button) {
editor.formatter.formatChanged(dom.getAttrib(button, 'data-mce-command'), function(state) {
state ? $(button).addClass("tiny-mce-button-clicked") : $(button).removeClass("tiny-mce-button-clicked");
});
});
});
// Return editor and iframe containers
return {
editorContainer: editorContainer,
iframeContainer: editorContainer.lastChild,
// Calculate iframe height: target height - toolbar height
iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
};
}
});