ace editor with tab-panel - javascript

Hi i am trying to use ace-editor with tab-panel. i can use separate ace editor for each editor-tabs. But if i didn't misunderstood, it is recommended to use one ace editor and create edit sessions for each tab.
My question is ;
I initiate ace editor like
var editor = ace.edit('someId');
so this initiates only one page by injecting ace containers on the element with id '#someId'
so how can i initiate a session in another tab without duplicating the ace.edit(''). My confusion is i only have one element with id 'someId' and
i need two of them tom be shown in separate tabs.

Ace can use id of an element or the element itself.
http://ace.c9.io/#nav=api&api=ace
You can use some class or other selector of tab
in jQuery it would be sth like
var editors = []; //let's have an array
$('some tab selector').each(function(index){
editors[index] = ace.edit(this);
});
Or add some id's to each tab.
Important id must be unique for page!

Related

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.

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

Button not disappearing on multiple views using common div id in jQuery

I am working on a .NET MVC application. I have added a button using jQuery using the following code:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$("#titleDiv").append(button_to_add);
The problem is multiple views are using the "titleDiv" and each view is rendered through javascript. As a result, the button is appearing on all the views. The view slides in when another link is clicked. I could remove the button using:
$("#csv_button").remove();
But I am not sure how and when to call it so that the button disappears when the view slides off.
Edit: I am looking for a javascript call that will detect when the view starts sliding so that the button can be removed at that moment.
As you are saying titleDiv is use for multiple view then use it as a class rather than an id.
And you should have unique id's for each element if at all you are using id's.
so your expression will become:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$(".titleDiv").append(button_to_add);
IDs in HTML cannot be reused. The browsers will accept it, but you jQuery will only look at the first one.
Use a distinct ID to allow for clean, single append.

Lightbox 2 with ember js and Froala editor (image preview on click)

I am using ember js as my front end MVC. I have a Question and Answers module which is similar to stack overflow where there are 2 fields one for the title and the other for the description.
Since the description is a text area and I have plugged it with Froala wysiwug editor.
Now I get the content typed in the froala text editor in ember by using
var editorText = $('.froala-element');
var desciption = editorText.html();
in the ember controller.
For example, if I console log what comes from the textarea
<p><img class="fr-fin" data-fr-image-preview="false" alt="Image title" src="/img/4ad38ae5b4a73cbad30987ac441075998d1e6b35.jpg" width="300"></p><p><br></p>
And I save this string in the database. All works good.
Now I want to use lightbox plugin
And as you notice, to make use of the plugin the image needs to be wrapped inside an anchor tag and added few data-lightbox attributes
Since I am stroing the image tag markup in the database, what is the best approach wrap the image inside the anchor tag
I got 2 options -
1) Before saving the image in the database, do a pattern match with javascript and find the image and wrap it inside an anchor tag.
2) In the didInsertElement hook of ember view, find all the images on the page and perform a dom manuplation and wrap the images inside anchor tag.
Is there any other way I could get this working ? Need some suggestions.
First of all you should get the HTML inside the editable area using the methods that are available in the editor, in this case getHTML method http://editor.froala.com/examples/getHTML. It is preferable to do so because there are some cleanups which the getHTML method does and it's good to make them.
$('#edit').editable('getHTML', false, true);
You can use the RegEx approach that you suggested, but you have to take into consideration not to wrap it twice. Another option would be to do that using jQuery which is easier.
var editorText = $('#edit').editable('getHTML', false, true);
var $div = $('<div>').html(editorText);
// Wrap image.
$div.find('img').each (function (index, img) {
var $img = $(img);
// Check if image is already wrapped in your anchor tag.
if (!$img.parents('a.your_anchor_selector').length) {
$img.wrap('<a class="your_anchor"></a>');
}
});
var description = $div.html();

Resizing a specific TinyMCE editor added by JS

I am adding/replacing two textareas with TinyMCE via two different javascript clicks/calls. They have different IDs and are being added correctly by the 'execCommand' call:
tinymce.execCommand('mceAddControl',true,'comment1');
However, I am having trouble resizing the objects when there are more than one on screen. If there is just one I am able to successfully call 'resizeTo' using the 'activeEditor' to resize the object, like this:
tinymce.execCommand('mceAddControl',true,'comment1');
var ed = tinymce.activeEditor;
ed.theme.resizeTo(400, 200);
But when there is more than one editor, I cannot use 'activeEditor' and I don't know how to select a specific editor to resize. I have tried the following, but it didn't work:
var edd = tinymce.get('comment2');
edd.theme.resizeTo(350,306);
Any help/suggestions? Thanks!
In order to have to working tinymce editors with textareas as source elements you have given each of those testareas a unique id. This id will help you to get the correct editor instance.
Use
var editor = tinymce.get('your_textarea_id');
to get the correct editor. That's all.

Categories