Ace Editor - Add hyperlinks inside the editor - javascript

I am fairly new to using Ace Editor. I am trying to develop a small tool using the library and I would like to be able to add hyperlinks inside the editor.
So far I have been able to replace plain text with hyper links using:
editor.renderer.on('afterRender', function(){
// replace specific text with hyperlinks
});
The only thing is that the links are not clickable. I was wondering if there is anyway to make them clickable to have the behaviour I want.
Thank you in advance.

Links are not clikable because of pointer-events:none style on the editor, you can add css to override that, but it won't work on IE < 11.
Answer at https://groups.google.com/d/msg/ace-discuss/XFnf3-3gcAY/O3w8T5aF8ZUJ uses a different way to implement links which will work on old browsers
See jsbin example at http://jsbin.com/jehopaja/4/edit

Related

How to create customize Html Editor in Extjs

I have requirement to create Customize Ext JS HTML Editor. I am facing problem in creating it.
Since you're not providing any information at all there are several solutions:
You can use CSS to style your HTML editor
You can use another editor, like TinyMCE to add extra functionality
You can have a look at the documentation on how to alter functionality of the current editor any maybe even create a subclass of it.
Hope this helps a bit.

How to integrate a overlay help menu in my web page

I need to develop an answer box element as this in my website. Which technologies I am supposed to use to achieve this result.
It is called text editor. There are many plugin available for including text editor in your webpage.
I would suggest you to use CKEditor .
A simple search in google for html editor plugin
Edit: the link seems not to work:
http://A%20simple%20search%20in%20google%20for%20html%20editor%20plugin:%20%20https://www.google.de/search?client=ubuntu&hs=jLj&channel=fs&q=html%20editor%20plugin&oq=html%20editor%20plugin&gs_l=serp.3..0l7.3285.4205.0.4372.7.6.0.1.1.0.136.467.3j2.5.0....0...1c.1.64.serp..1.6.480...0i67.P3oo5nVtfp8

Javascript: ACE editor inside a FancyBox

I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.

TinyMCE content/HTML filtering

I'll show you what I want to achieve.
I have some entities on my website(players, teams, articles, photos etc). I want to make some kind of BBcode that will create links to these elements. (I definitely don't want to use native link button for many reasons like changing url structure etc).
So I want to put into HTML code something like this:
[player=123ID]anchor text[/player]. After saving I will parse this HTML with my custom filter to make this linkable when showing on website in articles, private messages etc.
But my question is:
Is it possible to make custom TinyMCE editor button(one for each entity) that will open some kind of modal window where I'll add JS logic that will offer user some related autocompleter? And after selecting entity user wanted + writing anchor text it will put into HTML code my custom BBcode tag. Any guides, best practices, etc?
Is it possible to show in preview(not HTML) mode this custom BBtag as anchor? TinyMCE by default shows anchor tags like real anchors with anchor text, I want this custom tag to be shown(and editable) in the same way as regular anchors do. Do you have any ideas?
I am currently studying moxiecode wiki for some days, but I'm still not that in-depth in TinyMCE to solve this easily.
Will be happy for your inputs!
Regards,
Jim
To question 1: Yes this is possible. You might want to have a look at how to create a plugin for tinymce. It is not that difficult and you may create as many buttons as you need.
What "preview" mode are you reffering to?

How do I refresh TinyMCE for the code that I add with JavaScript

I need to insert code for flash to TinyMCE with JavaScript. If I insert the same code using HTML menu of TinyMCE, it automatically add flash icon to the editor. But if I insert the code using JavaScript, the actual code is inserted but it shows nothing on the screen.
One trick I found is toggle TinyMCE to normal textarea and back to TinyMCE. Then, it shows the flash icon. Is there a better way to do that?
Thanks.
Sam
Try this code...
var content=tinyMCE.get('comment').getContent()+"ur flash content";
tinyMCE.get('comment').setContent(content);
Since i dont know about flash. but using this way u can insert into tinymce
Have u tried using:mceRepaint ?
http://wiki.moxiecode.com/index.php/TinyMCE:Commands

Categories

Resources