It is not possible to use the feature to change the edit type of cDBEdit to cDBWysiwyg. The reason is that the properties of both components do not have enough similarities. Instead we need to delete the edit component and apply the new one.


First, select the item field and use the 'delete' key on your keyboard to delete the field. 


Next, select the DBWysiwyg from the component panel and place it in the (now empty) column.



Click on the row and use the mouse to make the row heigher, so that you can see the wysiwyg field better. Also set the align property of the field to alfull.



Verify that the datasource of the wysiwyg component points to datasource_1 and set the correct datafield



Now you can test the application by generating and running the code.


Note: the edit area of the wysiwyg editor is depending on the Bootstrap theme that you are using. This form can be improved further by expanding the todo field over the full width of the form. Select the row with the edit field. In the component tree use the right mouse click to open the dialog and select 'add new row after selected row. .



Next apply a new column in the row. 


To move the wysiwyg field into the new column you can use the component tree and drag/drop the wysiwyg field into the column:


If the component tree is large due to many components on the form, then you can also change the parent of the component


The final thing to do is to specify the full width of the column in the row (col_1). Select the column that contains the wysiwyg component and set the device context to 12 (= full width).


Generate and run the code, it should look something like: