Greetings Umbracians,

After 4+ months of learning umbraco on the job, I have finally stumbled onto something neither the forum, the docs or my boss have a (partial) answer to.

I want to make a grid editor and set out with a simple enough design. A text box and a dropdown with a color.

Now i want to change the textarea i have by an existing RTE and the select by a color picker.

If any of you could point me in the direction of a tutorial i might have missed or help me understand how it all works, I would really appreciate it.

Below is what i currently have.

All the code currently resides in Solution\WebProject\app_plugins\GridManuals

Package.manifest

{
"gridEditors": [
    {
        "name": "Action",
        "alias": "GridManuals.Action",
        "view": "/app_plugins/GridManuals/ActionEditor.html",
        "render": "/app_plugins/GridManuals/ActionRender.cshtml",
        "icon": "icon-code",
        "config": {
            "color": "red",
            "text-align": "right"
            }
    }
],
javascript:[
    "/app_plugins/GridManuals/Action.Controller.js"
]

}

Super basic controller (action.Controller.js)

angular.module("umbraco").controller("GridManuals.ActionEditorController", function ($scope) {
//Nothing yet

});

Editor (ActionEditor.html)

<div ng-controller="GridManuals.ActionEditorController">
<textarea rows="1" ng-model="control.action"></textarea>
<select ng-model="control.color">
    <option value="#ff0000" style="color:#ff0000; Background:#ff0000">Red</option>
    <option value="#ff8000" style="color:#ff8000; Background:#ff8000">Orange</option>
    <option value="#ffff00" style="color:#ffff00; Background:#ffff00">Yellow</option>
    <option value="#00ff00" style="color:#00ff00; Background:#00ff00">Green</option>
    <option value="#00ffff" style="color:#00ffff; Background:#00ffff">Teal</option>
    <option value="#0000ff" style="color:#0000ff; Background:#0000ff">Blue</option>
    <option value="#bf00ff" style="color:#bf00ff; Background:#bf00ff">Purple</option>
    <option value="#ff00bf" style="color:#ff00bf; Background:#ff00bf">Pink</option>
</select>