rich text editor replacement - Extending Umbraco

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

AJ 13 posts 72 karma points

Jun 25, 2015 @ 15:11

0

New Rich Text Editor in Umbraco?

Extending Umbraco

Umbraco 7

How to integrate new Rich Text Editor in Umbraco 7?

Copy Link
David Brendel 792 posts 2970 karma points MVP 3x c-trib

Jun 25, 2015 @ 20:05

0

Hi AJ,

to integrate a new rte have a look in how to build a custom data type or if you want it in the grid then at how to build a custom grid editor.

Regards David

Copy Link
AJ 13 posts 72 karma points

Jun 25, 2015 @ 20:09

0

David,

We just bought a licence to a third party Rich Text Editor and we want to integrate that into Umbraco 7. I read some articles about creating simple custom data types but haven't found any articles related to integrating RTE.

Please advice.

Thanks, AJ

Copy Link
Asbjørn 82 posts 195 karma points c-trib

Jun 25, 2015 @ 20:25

1

In its most basic form, you should just be able to follow the tutorial to create a property editor, and just replace the HTML and JS with the bare minimum to get your RTE up and running (and reference the necessary files in the plugin manifest file, as shown in the tutorial).

However, that will only get you a basic RTE that does not integrate with Umbraco in any way. You will not, for instance, be able to insert images from the Media section and link to other Umbraco pages, like you can with the built-in RTE. You would have to build custom plugins for your RTE to support this using the services Umbraco provides. Everything should be possible to do, it just takes a fair bit of work to replicate the built-in functionality.

I'd start by having a look in the Umbraco source code at the implementation of the existing RTE: https://github.com/umbraco/Umbraco-CMS/tree/dev-v7/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte. The various Umbraco plugins for TinyMCE can be found here and may also be useful: https://github.com/umbraco/Umbraco-CMS/tree/dev-v7/src/Umbraco.Web.UI.Client/lib/tinymce/plugins

Copy Link
AJ 13 posts 72 karma points

Jun 25, 2015 @ 20:32

0

Thanks Asbjorn. I will check those out.

Copy Link

AJ 13 posts 72 karma points

Jul 13, 2015 @ 21:02

Hi Asbjorn,

I am able to integrate the new Rich Text Editor as a new datatype to the Umbraco 7. However, when I save the data from RTE nothing happens. How do I bind the new Rich Text Editor data to the model?

My html file looks like this:

 <div ng-controller="My.RTEController" class="wmd-panel" >
   <span ng-bind-html-unsafe="data" ng-model="model.value"></span>
 </div>

My angular controller snippet looks like this :

angular.module("umbraco") .controller("My.RTEController", function ($scope, $http) {
 $scope.callMVC = function () {
     $http({
         url: '/umbraco/surface/Helper/CustomRTE',
         method: 'GET'
     })
     .success(function (data) {
         $scope.data = data;   
     });
 };
 $scope.callMVC();
});

Copy Link

AJ 13 posts 72 karma points

Jul 20, 2015 @ 13:54
0
I ended up saving the RTE content to the database by using the following code snippet on my controller.
```
$scope.$on("formSubmitting", function (e, params) {
         $scope.model.value = $("#Editor1").val();
     });
```
Copy Link
Asbjørn 82 posts 195 karma points c-trib

Jul 20, 2015 @ 13:57

0

Hi,

Sorry for not getting back to you sooner, but you know, holidays and all that ;)

Glad to hear you got it working. Most RTEs have an event of some sorts you can hook up to. That way you can be notified and keep the back-end data in sync at all times. That might be a better option, depending on your particular circumstances.

Asbjørn

Copy Link
AJ 13 posts 72 karma points

Jul 20, 2015 @ 14:12

0

Thanks Asbjorn for your suggestion. We still have one issue with our new Editor. When the editor loads, it always shows the loading gif and when we try to upload an image it gives a popup as shown in the screenshot. So, the new Editor is being rendered as a partial view from our custom MVC controller. When we directly call the MVC controller, all the functionalities work properly on RTE but when we use as Umbraco datatype it is not loading one of the RTE dependent javascript file.

We have also tried loading RTE javascript file as assetsService, hardcoded it on the html page and tried other several different ways but nothing works.

Please let us know if we are missing something.

Thanks.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

New Rich Text Editor in Umbraco?