We Keep Coding

TinyMCE image custom hash

I'm working with TinyMCE editor with some old webpage content.
All HTML content could contain "links" to images in format ".. <img src="##IMAGE:1234##"/> ..".
I need to show image in HTML preview, but in code it has to stay in format "..<img src="##IMAGE:1234##"/>.."
I know URL to download/inline all images =>
http://example.com/images/1234
Do I need to parse editor content, replace IMG src by URL + ID from original IMG src (##IMAGE:1234##).
Is there some way, how to have in HTML code mode something like this "..<img src="##IMAGE:1234##"/>..", but in preview mode have image displayed?
Thanks

TinyMCE relies on the browser to render the HTML that you give to the editor. As the current src you are providing is not valid the image won't show.
What I would suggest is to use a data-xxx to store the value you need and programmatically set the src attribute when you place the content into the editor.
For example...
You might store the image tag in your database as <img data-imgsrc="##IMAGE:1234##" />. When you get ready to load the content into the editor add the src attribute to the image tag so you end up with <img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />. This allows the editor to render the images.
When you go to save the HTML content back to the database you can remove the src attribute from any image that also has the data-imgsrc attribute (assuming you need to do this for some reason).

Changing the attribute of different anchor tag to same

I'm new in JS and jQuery. I'm trying to make dynamic page selector button via jQuery. The problem is when I try to change attribute and text of 3 anchor tags with different IDs, all the value of 3 anchor tags change to last value.
Let's say:
currentSlide=2;
slideToShow=3;
Then when the following code gets executed all the 3 anchor tags became same with i.e.
<a onclick="loadmore(4);return false" id="anchor4">4</a>
The jQuery code is:
$("a#anchor"+(currentSlide-1)).text((slideToShow-1)).attr({onclick:"loadmore("+(slideToShow-1)+");return false",id:"anchor"+(slideToShow-1)});
$("a#anchor"+currentSlide).text(slideToShow).attr({onclick:"loadmore("+slideToShow+");return false",id:"anchor"+slideToShow});
$("a#anchor"+(currentSlide+1)).text((slideToShow+1)).attr({onclick:"loadmore("+(slideToShow+1)+");return false",id:"anchor"+(slideToShow+1)});
Sorry for bad English.

Img file name as title & alt attribute from CSS

I want to know if we can write dynamically ALT & title attribute's value same as the img file name? I think it will possible by using css content property but dont know much about it.
like <img src="file_name.jpg" alt="File Name" title="File Name">
If it is possible then also I want both the attributes having the clean & formatted values like I dont want _ underscore. may be it can be remove as well from CSS?

$('img').attr({ //change multiple attributes
title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});
You can't use content because:
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.
This will put text in front or after an element, but does not change it's properties!

How to define custom html tags in ckeditor

How can I define custom html tags in ckeditor.
When user select a word e.g. Apple.
Then I want to replace this with profileTag Apple /profileTag".
But if the selected word already has a tag then it should append the profile tag.
For example if anchorTag Apple /anchorTag then after user selection it will be profileTag anchorTag Apple /anchorTag /profileTag.
The above thing is working. But when I execute the below code the output is null in case of custom html tag like profile tag.
var current_selected_element = editor.getSelection().getSelectedElement();
console.log(current_selected_element);

The problem is that CKeditor's advanced content filter is filtering out your custom tags ... you're going to have to configure the ACF to accept the custom tags your plugin is creating and inserting into the DOM. There are a couple ways this can be done. The most basic would be to implement config.extraAllowedContent = 'profile' or whatever the name of your custom markup will be. Otherwise you can work with the global CKEditor.filter object. There's more documentation on the CKEDITOR.filter object here.

Is there anyway to stop CKEditor 4 from filtering my anchor tag attributes?

CKEditor 4 attribute filtering is stripping any occurrence "href" from anchor tags put into the editor. I have a plugin which creates links that contain some "custom" attributes. A link looks something like this:
Some Link
The CKEditor returns the link in this form when I call getData():
<a href="#" document->Some Link</a>
Is there a way to instruct CKEditor to stop filtering link attributes? Does anyone happen to know where in the source this regex is so I can fix it?
Thanks!

I've just checked this link on CKEditor 4.1 - the output is:
<p>Some Link</p>
Since 4.1 the document-href is stripped because it is now allowed in the editor. You have to add an Advanced Content Filter rule - e.g.:
config.extraAllowedContent = 'a[!href,document-href]';
And then it would work in 4.1. Before 4.1 it should work by default, without setting anything.
However there's a bug in CKEditor's HTML parser. It does not parse correctly sth-href attributes on links so a result is a sth- attribute.
For now I advice you to change the name of this attribute to data-url or whatever else without href ending.
I created a ticket: https://dev.ckeditor.com/ticket/10298

try setting this in config file.
config.allowedContent = true;
also if its getting filtered on insert then you can try this:
//var yourAnchor = 'Some Link';
editor.insertHtml(yourAnchor, 'unfiltered_html');