Custom styling for tinyMCE nonEditable element - javascript

I'm using tinyMCE 4 in AngularJS (angular-ui-tinymce). I'm trying to use the noneditable plugin to get some variable that I have predefined to show up nicely. I have a plnkr here http://plnkr.co/edit/AImGWCDO6a1J6VC7kD73?p=preview
Now my settings for tinyMCE is as shown
vm.settings = {
menubar: false,
toolbar: 'firstButton | secondButton',
plugins: 'noneditable',
noneditable_regexp: [
/<my-variable>(.*?)<\/my-variable>/g,
/<other-variable>(.*?)<\/other-variable>/g
],
extended_valid_elements :'my-variable,other-variable',
custom_elements: '~my-variable,~other-variable',
content_style: "my-variable: {background: yellow;} other-variable: {background: blue;}",
setup: function(editor){
editor.addButton('firstButton', {
text: 'Insert first',
icon: false,
onclick: function () {
editor.insertContent('<my-variable>MY-VARIABLE</my-variable>');
}
});
editor.addButton('secondButton', {
text: 'Insert second',
icon: false,
onclick: function () {
editor.insertContent('<other-variable>OTHER-VARIABLE</other-variable>');
}
});
}
};
And I just call these on my tinyMCE object with
<div ui-tinymce="vm.settings" ng-model="vm.content"></div>
So it's pretty standard.
My question is: How can I make <my-variable> and <other-variable> have different styles? When TinyMCE translates them they only seem to take on the class of 'mceNonEditable'. I would rather not have to add a class attribute to my custom tags as they are meant to be parsed in a later stage, and it's much easier if there are no attributes on them.

Related

Add custom class to selected text in tinymce V5

I'm trying to implement inside tinymce a custom button, that when clicked, would add a class around the selected text.
I've tried this :
editor.ui.registry.addButton('fwnormal', {
text: 'N',
class: 'nongras'
});
But it doesn't work, I get an error Could not find valid *strict* value for "onAction"
Any idea how can I do that?
https://www.tiny.cloud/docs/configure/content-formatting/
Use the codes like these:
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_class",
setup: function(editor) {
editor.on("init", function(e) {
tinymce.activeEditor.formatter.register("new_class", {
selector: "p,div,h1,h2,h3,h4,h5,h6", // choose elements
classes: "myclass",
styles: { ... },
attributes: { ... },
}); // close formatter.register
}); // close editor.on init
editor.ui.registry.addButton("add_class", {
tooltip: "new class",
icon: "edit-block", // look editor-icon-identifiers page
onAction: function() {
tinymce.activeEditor.formatter.apply("new_class");
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init
Or try these codes:
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_class",
setup: function(editor) {
editor.ui.registry.addButton("add_class", {
tooltip: "new class",
icon: "edit-block", // look editor-icon-identifiers page
onAction: function() {
var element = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setAttrib(element, "class", "myclass");
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init
Custom classes are set in the style_formats https://www.tiny.cloud/docs/configure/content-formatting/
example
tinymce.init({
selector: 'textarea',
style_formats: [
{title: 'Class name', selector: 'p', classes: 'myclass'}
]
});
http://fiddle.tinymce.com/Slhaab

How to add a class to custom tinymce toolbar menu item?

I've added custom toolbar button for tinymce with image, I want to add a class to that. I've tried of adding class parameter but didnt work for me.
pls advice
tinyMCE.PluginManager.add('subBtn', function(editor, url) {
editor.addButton('subBtn', {
class :'buttonClas',
image: icon-path,
icon: true,
tooltip: tooltip,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'PTION',
body: [
{type: 'textbox',value: subBtin, name: 'title', label: 'subBtn'}
],
onsubmit: function(e) {
}
});
}
});
});
Try "classes" instead of "class" - you can add more than one, divided by spaces.

Initializing bootstrap-markdown with JavaScript and customizing the options

I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)
For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:

Can a select drop down list be added to my winJS toolbar via Javascript?

I have created a toolbar in my windows app which contains a few buttons.
What I want is a select dropdown list along side these buttons but no idea how to create it or append it to the toolbar via Javascript (as the elements of the list will change depending on the dataset I use).
I create my toolbar like so :
//JS
var viewsDataArray = [
new WinJS.UI.Command(null, { id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', tooltip: 'View 1', onclick: clickbuttonprintout() }),
new WinJS.UI.Command(null, { id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite', tooltip: 'View 2', onclick: clickbuttonprintout() }),
];
window.createImperativeToolBar2 = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer2"), {
data: new WinJS.Binding.List(viewsDataArray)
});
}
createImperativeToolBar2();
//html
<div id="toolbarContainer2" style="direction: rtl" ></div>
Try using "content" command type. As per the documentation # https://msdn.microsoft.com/en-in/library/windows/apps/dn904220.aspx
its supposed to support <input> tag.
This creates an Command that can host other HTML markup inside of it, including text, <input> tags, and even a subset of WinJS controls. Only a <div> element can host a content Command.
UPDATE
https://jsfiddle.net/vnathalye/yg0rs4xc/
You need to create a <div> tag and pass it as first param to new WinJS.UI.Command.
Once that is done you can add select drop down or any other control to that div and that should appear in the toolbar. In the above jsfiddle link I've hardcoded select tag in the div.

Use Existing Icon in Tiny MCE custom Button

could we use existing icon to custom button? (not an image)
I have tried this, but it doesn't work:
tinymce.init({
...
toolbar: 'example'
setup: function(ed) {
ed.addButton('example', {
title: 'My title',
image: '../js/tinymce/plugins/example/img/example.gif',
classes: 'mce-ico mce-i-image',
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}
});
Yes you can use an existing icon.
You can take the class name from an existing button - e.g. "mce-i-image" as you've done - then, rather than apply that to the class name of your new button, you strip off the "mce-i-" prefix and use the remainder - "image" in this case - as the icon key.
I've amended your example below.
e.g.
setup: function(ed) {
ed.addButton('example', {
title: 'My title',
icon: 'image', // This line sets the icon key.
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}

Categories

Resources