I'm trying to implement edit in place functionality for a description field, where editing is done using the telerik mvc editor. The editor needs to be hidden unless the user clicks on a span representing the editable section, and once done, hide the editor and have the marked up entry be placed in the editable element.
I'm not sure where to apply the knockout binding so that whatever is entered into the telerik editor is shown in the span after the editor is hidden.The editor creates an iframe that contains the marked-up html that get's generated as the user enter's content. That markup is converted is stored as an html encoded value within a textarea that's just outside the iframe.
If tried adding a bind to the textarea generated, but don't see the span bound with data-bind = "text: imgDescr" updating.
Her'es the razor view
<div>
<span data-bind="text: imgDescr"></span>
</div>
<div>
#{ Html.Telerik().Editor()
.Name("editor")
.HtmlAttributes(new {style = "height:400px"})
.Encode(false)
.Render();
}
</div>
and the js
function appViewModel() {
this.ImgName = ko.observable(helpText);
this.ImgDescr = ko.observable(helpText);
}
$('t-raw-content').attr('data-bind', "value: ImgDescr");
// Activates knockout.js
ko.applyBindings(new appViewModel());
Any suggestions on how this could be done? I also looked into using tinyMCE, but I think the rendering is handled in a similar manner.
If your editor is tinymce editor (?) adding a bind to the textarea is not helpfull.
You may acces the editor content using tinymce.get('editor_id').getContent(); and set it using tinymce.get('editor_id').setContent('This is a demo text.');
Using the examples listed here and here and the bindings example for tinyMCE provided by knockout wiki here I was able to get the editor bound in the way I needed it.
Part of what I was missing was the jquery.tinymce.js script.
The binding was done in a custom binding as in the example above and the only line needed to do the binding was
setTimeout(function() { $(element).tinymce(options); }, 0);
in the init section of the custom binding.
Here's the jsfiddle of what I had. It's not a completely working example within jsFiddle, but shows everything I had on my page.
Related
I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.
I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});
You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");
I am having problem on loading the second and next ckeditor widget on the front-end form in html. It works well in admin. When I click add more form set dynamically, the widget not come out but showing textarea instead, it just works on the first (initalized) form. I already follow the documentation step by step for basic requirements. I am using Django with django-ckeditor package. Got no javascript errors on the page.
Sorry for not showing any codes before. This is part of the javascript which dynamically adding another form set after button clicked:
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor-init.js"></script>
$('#add_more_work').click(function(){
var form_idx = $('#id_form_set-TOTAL_FORMS').val();
$('#form_set_work').append($('#empty_form_work').html().replace(/__prefix__/g, form_idx));
$('#id_form_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);});
The field which use the ckeditor widget not loading after it added dynamically by this button but instead, it shows plain textarea. Did I miss anything?
You might want to look at using the formset:added and formset:removed JavaScript signals available from Django 1.9 onwards.
A simple method (combined from django-content-editor and feincms3 ) might look like this:
(function($) {
$(document).on('formset:added', function newForm(event, row) {
row.find('textarea').each(function() {
CKEDITOR.replace(this.id);
});
});
})(django.jQuery);
I'll leave the handling of formset:removed to the reader.
I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).
Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :
$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()
Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.
Any way to focus it properly?
I know the code is very less here but the question is self explanatory I believe.
if you are using jquery then you can use .on() on dynamically generated elements
$("#prescribe-input").on( "focus", function() {
//do what ever you want
});
You should do this in the callback function:
$(selector).html(response, function(){
$("#prescribe-input").focus();
})
Once I create dropdown list from existing text field input in Kendo UI - is there a way of changing it back to text field?
$('#myInput').kendoDropDownList({...});
I wish to have something like:
var kendolist = $('#myInput').kendoDropDownList({...});
kendolist.textField({....});
or
kendolist.destroy().textField({....});
at best without extensive jQuery shenanigans... :)
I am afraid it is not possible to turn it back into regular textbox. You can use the destoy method of the widget, however there will be some HTML left which you will not really need and you will need to do some manually cleaning with JavaScript.
Better destroy the widget and remove all the HTML then add regular textbox manually.
I built a simple CMS in Laravel 4. I've decided to switch from my old editor to this markdown editor.
My old editor used a textbox and so all I had to do was submit the form and it was passed from the view to the controller and inserted into the database etc.
However, this new editor works by turning the markdown into html and that html is inserted within a div that looks like this:
<div id="preview" class="wmd-preview"></div>
I still want to use my old form to submit the contents of the div, so my question is this:
Is there a way to insert the contents of my "preview" div into some sort of hidden input in my form?
Alternatively, is there a better way to submit the contents of my post?
get the content of your div by its id
var a = document.getElementById('preview').innerHTML;
document.getElementById('hid').value = a //create a hidden input give it an id hid
To answer your question about firing the function every time a key is pressed, I would use a jQuery event listener like .keyup().
http://api.jquery.com/keyup/