10.07.2015 Views

belle-workbook

belle-workbook

belle-workbook

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

So what did you just add?You just added a prevalue editor, with a fields collection. This collection contains informationabout the controls we will render on the DataType configuration for this particular editor.The first option above gets the label ‘Preview’ and uses the view ‘boolean’. This will allow youto turn preview on/off via a simple checkbox.The name ‘boolean’ derives from the Umbraco convention where all preview editors arestored in ‘/Umbraco/views/prevalueeditors/’ and matched via .htmlThe second option does the same as the first option, however instead of a Boolean, aTextArea is used to allow the user to add a default value for the editor.Now save the manifest, restart the app pool and have a look at the markdown datatype inUmbraco. You should see that you have the two configuration options.Using the configurationThe next step is to gain access to our new configuration options. To do this, open the‘markdowneditor.controller.js’ file.First you need to add the ‘Default Value’ functionality. So basically when the $scope.model.value is empty or undefined, the default value is used. To do this, add the following to thebeginning of the controller:-if($scope.model.value === null || $scope.model.value === ""){$scope.model.value = $scope.model.config.defaultValue;}Do you see what’s new?The ‘$scope.model.config’ object is new. The other thing you will notice is that because ofour configuration settings we now have access to ‘$scope.model.config.defaultValue’. Thiscontains the configuration value for that key.It really is that easy to setup and use the configuration values from code.However, you can also use these values without any javascript, so open the ‘markdowneditor.html’ file instead.You can also use the configuration directly in your HTML as shown below. You can use it totoggle the preview , using the ‘ng-show’ attribute:-

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!