Databases
StackOverflow2013
Postsdbo
POACE editor foreach binding with knockoutJS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POACE editor foreach binding with knockoutJS
    text
    copied!<p>-> I would like to integrate the Ace JavaScript editor into KnockoutJS.</p> <p>-> Unfortunately, it seems I've reached my limits on Javascript so I'm turning to JavaScript Sith Masters here.</p> <p>-> The HTML is div with "id="editor" data-bind="ace:Value".</p> <p>-> Value is the actual value for the textEditor from the viewModel.</p> <p>The start of my custom binding handler for Ace:</p> <pre><code>ko.bindingHandlers.ace = { init: function (element, valueAccessor) { var editor = ace.edit(element.id); var eitorValue = valueAccessor(); editor.setTheme("ace/theme/textmate"); editor.getSession().setMode("ace/mode/html"); //handle edits made in the editor editor.getSession().on('change', function (e) { if (ko.isWriteableObservable(eitorValue)) { eitorValue(editor.getValue()); } }); }, update: function (element, valueAccessor) { } } }); </code></pre> <p>-> It only works when first loaded not at the time of edit when the value is assign to -> editor.</p> <p>-> For Reference i am trying to achieve something like tinyMce as shown</p> <pre><code>ko.bindingHandlers.tinymce = { init: function(element, valueAccessor, allBindingsAccessor, context) { var options = allBindingsAccessor().tinymceOptions || {}; var modelValue = valueAccessor(); //handle edits made in the editor options.setup = function(ed) { ed.onChange.add(function(ed, l) { if (ko.isWriteableObservable(modelValue)) { modelValue(l.content); } }); }; //handle destroying an editor (based on what jQuery plugin does) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).parent().find("span.mceEditor,div.mceEditor").each(function(i, node) { var ed = tinyMCE.get(node.id.replace(/_parent$/, "")); if (ed) { ed.remove(); } }); }); $(element).tinymce(options); }, update: function(element, valueAccessor, allBindingsAccessor, context) { //handle programmatic updates to the observable var value = ko.utils.unwrapObservable(valueAccessor()); $(element).html(value); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload