I am trying to modify the data-author of annotation in TinyMCE. The documentation said that :
The TinyMCE Annotations API provides the ability to add, modify, and delete annotations; listen to text selection events and retrieve all annotations with the same annotation name.
I have already annotated my selected words, using the
editor.annotator.annotate('comment', {
uid: id,
author: name
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\">Advice</span>
In that code, I've successfully annotated the selected words, but for some event, I want to change the author of the annotated words, and here's my code:
editor.annotator.annotate('comment', {
uid: id,
author: newName
});
OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\"><span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name2\" data-mce-annotation=\"comment\">Advice</span></span>
I thought since the selected words are already annotated, by using the code above I can change the author. but it's just creating another span inside the original span.
What I want is just to edit or change the data-mce-annotation-author value from other values on some event.
Have anyone tried this issue or experience with this? Thank you very much!
I got the solution for this.
You just need to use the Retrieving All Annotations for a Particular Annotation Name
My solution for changing attributes of specific annotator:
const comments = editor.annotator.getAll(this.name);
const comment = comments[id][0];
comment.setAttribute('data-mce-annotation-author', newName);
editor.save();
Related
I am using the tile example from polymers neon elements - and I am trying to make each expanded tile unique. My first try on how to do this was to pass a string in with the grid items like
{
value: 1,
color: 'blue',
template: 'slide-1'
}
And have that element be evaluated when rendered in a new element something like this. (this is the card template itself)
<template>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]">
<[[item.template]]></[[item.template]]>
</div>
This does not work - however I am wondering if there is some way to do this so I can load custom elements for the content of each card. For reference -https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages , it is the grid example and I am trying to replace the content of each card once it is clicked on ( the fullsize-page-with-card.html, here is all the html for it - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid ). Is this the wrong way of approaching this? Or maybe I have some syntax wrong here. Thanks!
Edit : OK, So I can send it through if i add it to the click to open the card like so
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$['fullsize-card'].template = event.detail.data.template;
this.$.pages.selected = 1;
};
and in the card's properties like so
template: {
type: String
},
So I can then evaluate it as [[template]] , however - the question still remains how to call a custom element (dynamically) using this string. I could pass a couple of properties and fill in a card or form so they are unique, but i think I would have much more creative freedom if I could call custom elements inside each card.
I have an element that allows referenced templates. There are a couple of others other there, but this one also allows data bindings to work: https://github.com/Trakkasure/dom-bindref
I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ).
Please note that this integer is to be supplied by external JavaScript.
Efforts I have put:
I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text
To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again.
My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?
Thank You.
You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.
$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});
You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).
JavaScript:
var number = 1;
function IncrementNumber() {
document.getElementById('num').innerText = number;
number++;
}
HTML:
<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>
Here is a jsfiddle with an example http://jsfiddle.net/G638z/
I am working with android webview and for achieving some functionality i need to integrate javascript. I am new to javascript to please tell me how to get the paragraphs id(id of each paragraph which are under selection). In more details:
Like i am having data-
<p id="01">hhh dhghdg
<span id="1.1">dada</span>
<span id="1.2">dgsdd</span>
</p>
<p id="02">dsdgs dhgd hdhd
<span id="2.1">dada</span>
<span id="2.2">dgsdd</span>
</p>
So you select some data i.e "hhh dhghdg dsdgs" so this data belongs to multiple paragraph p1 and p2 so i want to get the id of both the paragraph using javascript.
Please tell me how to get this.
PPK has a very detailed post:
http://www.quirksmode.org/dom/range_intro.html
Which describes range objects. I've not done this before but by the looks of things you'll need to use:
window.getSelection()
Which should return a selection object from which you can get a range object which will contain all the selected elements (as described in the link above)
From scanning the docs on MDN:
https://developer.mozilla.org/en-US/docs/DOM/window.getSelection
You'll get an HTML string back from which you could attempt to get all the ids from, using a regular expression, something like this:
var underSelection = window.getSelection().getRangeAt(0);
var idsRegEx = /#\s(id|class)="[^"]+"/;
var idMatches = idsRegEx.match(underSelection);
//then clean and do something with the ids
I haven't tested any of this but I'm hoping it gets you started.
EDIT: additional info
If you're using jQuery you might be able to load the selection into a jQuery object and get all the ids out by doing :
var IDs = [];
$(underSelection).find("p").each(function(){ IDs.push(this.id); });
You have to use either
document.documentElement.id
or
document.getElementsByTagName('HTML')[0].id
Assuming I can't change the language file because I want the defaults to keep the same except for this particular case.
I want to change the caption for the edit form. Assume as well that there are going to be other grids that will use different captions for that same edit form.
So far, I know that the edit form is launched calling this method:
grid.jqGrid('editGridRow', rowID, {properties});
In the Documentation Wiki, you can find a paragraph about this that says:
These options can be overwritten when passed as options to the method.
When passed to the method we should use by example bSubmit : “Submit”
and not $.jgrid.edit.bSubmit : “Submit”
But it doesn't say what method to which I have to pass the options. 'editGridRow' doesn't have an options parameter, and if I pass it as a property like so:
grid.jqGrid('editGridRow', rowID, { editCaption: "My Edit Caption" });
it doesn't work.
Thanks.
your solution should work, but lets just try this out.
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add Me";
$.jgrid.edit.editCaption = "Edit Me";
you can over ride them like this, include this under your script tag before jQGrid Code, it's not tested though.
How can I temporarily store an array of string values most elegantly in a form?
I have a form, where a user can edit an article - and add tags, which are simply string values.
I don't want to persist it until the user actually saves the entire article, so I need to be able to temporarily ...:
Display the list of selected tags
Add a tag to the list
Remove a tag from the list
Submit the list of values when I save the form
I could store everything in just a comma-separated hidden field, but it seems ugly, and I would prefer something stronger typed.
What is the right way to do this? Pointers to examples very welcome.
JQuery provides the data method for precisely these situations! It works directly with native JavaScript objects, so no need to mess about with comma separated lists - just use an array or object. Perhaps something like this will get you on the right track.
// initialize existing tags
$('#form').data('tags', { foo: true, bar: true });
// add a new tag
$('#form').data('tags').baz = true;
// remove an existing tag
$('#form').data('tags').bar = false;
$('#form').data('tags');
// { foo: true, bar: false, baz: true }
Having removed tags remain in the object as false will help you see which tags need unassigning server-side; not necessary but potentially useful to you.
If you would rather the removed values were removed completely from the object, use the delete construct.
// remove an existing tag
delete $('#form').data('tags').bar;
Edit: In an attempt to address your comments on this answer and give you some ideas:
<ul class="tags">
<li>
<span class="tag-name">foo</span>
remove
</li>
</ul>
And your JavaScript:
$(function() {
$('#form .tag-remove').click(function(e) {
// update the tag data
var tag = $(this).siblings('.tag-name').text();
$('#form').data('tags')[tag] = false;
// remove the tag element
$(this).parent().remove();
return false;
});
});
There will be more of course - this does not handle the initialization of the form's tag data, the addition of new tags, or the submitting of tags to the server - but hopefully it will nudge you in the right direction :)