angular.module("umbraco").controller("facebookTabEditor", function ($scope, assetsService) {
assetsService.loadCss("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
assetsService.loadCss("/App_Plugins/stylesGeneral/dragDropStyles.css");
assetsService.loadCss("/App_Plugins/stylesGeneral/jquery.notebook.min.css");
assetsService.load(["/App_Plugins/jsGeneral/jquery.notebook.js"]).then(function () {
$('#container').bind("DOMSubtreeModified", function () {
var newHtml = $('#container').html();
$('#htmlPlaceholder').val(newHtml);
});
//SYNC AF CONTAINER OG TEXTAREAR VED PAGELOAD
var startHtml = $("#htmlPlaceholder").val();
$('#container').html(startHtml);
});
});
Looks like the jquery.notebook plugin replaces the textarea with something else, subscribe to the on change event to update the value in the scope (which is what Umbraco will store when you save the node):
This way you can have multiples of them and you're not doing too much jQuery. The thing about Angular is that people need to unlearn their bad jQuery habits a little bit as this way is much better and doesn't rely on the DOM so much.
Updating textarear val inside a property editor with jQuery
I am creating a Property Editor With my own Html Editor in jQuery and a textarear for HTML Content.
Text Arear looks like this and working fine when tying as normal and saving:
I am simply using jquery for updating textArear Like This:
But when saving Umbraco's now grapping new insertet content.
Thanks n advance :-)
Hi Anders,
Where did you place your js code ? What event ?
Thanks, Alex
Hi Alex, Thanks for anwsering.
My code is in: facebookTabEditor.controller.js
code:
Looks like the jquery.notebook plugin replaces the textarea with something else, subscribe to the on change event to update the value in the scope (which is what Umbraco will store when you save the node):
Hi Sebastiaan,
Thanks. This also helped me:
The problem with this is that you can now not have more than one editor on each document type (as you're hardcoding the Id).
I would suggest updating to something like this view (note the change from id to class):
<textarea class="notebook-editor-item" ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}"></textarea>
And this controller:
This way you can have multiples of them and you're not doing too much jQuery. The thing about Angular is that people need to unlearn their bad jQuery habits a little bit as this way is much better and doesn't rely on the DOM so much.
is working on a reply...