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.
Related
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
I am building a web app which uses Summernote to allow for HTML editing.
Users are allowed to add and edit JavaScript as well, using inline <script> tags. This works fine and can be done in the editor's "Code View" mode.
What I'd like to do is, in the preview/WYSIWYG mode, instead of having the script being executed, just display an image (or text) to let the user know that there's a script there.
Something like:
I looked around and I don't think this has been done before. Is it possible? Any pointers on how I could accomplish this?
Thanks!
https://github.com/summernote/summernote/issues/495 explains how to do it using CSS only.
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
I've run into an issue where I'm developing pages on a CMS which is out of my control, and I'm editing increasingly complex pages with nothing more than a textarea.
Initially I'm creating the pages in my code editor, then copying the HTML into the textarea. Keeping the local and CMS code in sync by hand.
This workflow sucks.
I'd like to have code highlighting, etc while I work within the CMS. Is there any way I can add a code editor like Ace or CodeMirror to the textarea via bookmarklet or console command? I've tried using the Ace Bookmarket Builder but I don't know if it's been designed to work on any page, or just github.
Edit:
I don't think I was clear enough above. I'm just an end user on this CMS, I have no ability to change how it functions on the backend. I literally just need a bookmarklet that finds the textarea and applies a code editor to it.
both tinymce and syntaxhighlighter are packages that are not tied to a CMS, so if yours is custom then you will want to try to use these together, I have heard of some success in this adventure in the Drupal (there is actually a project for it currently) arena but you may be looking at a bit of work to do so custom. there is chatter about this http://www.tinymce.com/forum/viewtopic.php?id=22901 <-here with even a plugin to tinymce :) hope this gets the ideas going!
At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?
WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.
In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor
I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.
I would suggest BUEditor, you can configure all buttons and thus control the output
Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.