StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
19441160
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-10-18T03:36:07.250
FavoriteCount
0
LastActivityDate
2013-10-18T07:42:58.097
LastEditDate
2013-10-18T07:42:58.097
LastEditorUserId
2258673
OwnerUserId
2258673
ParentId
16284447
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
<p>To answer your specific question, you would need to keep track of where an edit is coming from so that the update isn't triggered twice. When the observable is being updated not from the editor you don't want the sudden change in the editor to re-update the observable. Same idea when the editor updates the observable, you do not want the observable to notify the editor again. I used to booleans to keep track of them. The editor-agnostic code is below:</p> <pre><code>var isObservableChange = false; var isEditorChange = false; editor.change = function () { if(!isObservableChange){ isEditorChange = true; observable(editor.data); isEditorChange = false; } }; observable.subscribe(function (newValue) { if(!isEditorChange){ isObservableChange = true; editor.data = observable(); isObservableChange = false; } }); </code></pre> <p>I had a project where I was trying my best to get inline editing with CKEditor. I finally gave up and tried TinyMCE with the same type of code and the solution worked. The following example uses knockout 2.3.0, tinymce 4.0.8, and jquery 1.10.2. The jquery can be replaced with regular document id accessing, but I use jquery as a crutch for fast code. The binding code is as follows:</p> <pre><code>ko.bindingHandlers.wysiwyg = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var value = valueAccessor(); var valueUnwrapped = ko.unwrap(value); var allBindings = allBindingsAccessor(); var $element = $(element); $element.attr('id', 'wysiwyg_' + Date.now()); if (ko.isObservable(value)) { var isSubscriberChange = false; var isEditorChange = true; $element.html(value()); var isEditorChange = false; tinymce.init({ selector: '#' + $element.attr('id'), inline: true, plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", setup: function (editor) { editor.on('change', function () { if (!isSubscriberChange) { isEditorChange = true; value($element.html()); isEditorChange = false; } }); } }); value.subscribe(function (newValue) { if (!isEditorChange) { isSubscriberChange = true; $element.html(newValue); isSubscriberChange = false; } }); } } } </code></pre> <p>To use it just bind it to a div. like so</p> <pre><code><div data-bind="wysiwyg: test"></div> </code></pre> <p>A working example can be found here <a href="http://jsfiddle.net/dhQk/2xjKc/" rel="nofollow">http://jsfiddle.net/dhQk/2xjKc/</a> I hope this helps.</p> <h1>EDIT:</h1> <p>It looks like the CKEditor version works after all. I just had to use a different cdn. The link for that is <a href="http://jsfiddle.net/dhQk/CSwr6/" rel="nofollow">http://jsfiddle.net/dhQk/CSwr6/</a></p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POInline CKEditor integration with knockoutjs
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USdane fairbanks
UserOwnerUserId
1. USdane fairbanks
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.