ngadmin引用富文本插件angularuitinymce

angular-ui-tinymce

angular-ui-tinymce 是一款整合了 angular 和 tinymce 的第三方插件。目的是为了更方便的在angular基础上使用tinymce。

ng-admin引用 angular-ui-tinymce 非常之简单。

1.先引入tinymce 的 Javascript 文件&＃xff0c;下载地址&＃xff1a;https://github.com/tinymce/tinymce

整理后的目录结构&＃xff1a;

2.引入 angular-ui-tinymce/tinymce.js 文件&＃xff0c;下载地址&＃xff1a;https://github.com/angular-ui/ui-tinymce

3.把 ui.tinymce 引入到模块里

var myApp &＃61; angular.module(&＃39;myApp&＃39;, [&＃39;ng-admin&＃39;,&＃39;ui.tinymce&＃39;]);

3.为相应字段添加模板&＃xff08;就这么简单&＃xff09;

nga.field(&＃39;content&＃39;,&＃39;template&＃39;).template(&＃39;

重点&＃xff1a;ui-tinymce&＃61;"tinymceOptions" ng-model&＃61;"value" field&＃61;"field"  三个属性

测试截图&＃xff08;编辑&＃xff09;&＃xff1a;

本地配置tinymce:

myApp.directive("uiTinymce", function() {return {restrict: "A",link: function($scope) {var editParam &＃61; {selector: &＃39;textarea&＃39;,mobile: {theme: &＃39;silver&＃39;,plugins: [&＃39;autosave&＃39;, &＃39;lists&＃39;, &＃39;autolink&＃39;]},plugins: &＃96;link lists image code table colorpicker fullscreen fullpage textcolor wordcount contextmenu codesample importcss media preview printtextpattern tabfocus hr directionality imagetools autosave paste&＃96;,language: &＃39;zh_CN&＃39;,toolbar: &＃39;codesample | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft&＃39; &＃43;&＃39; aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo &＃39; &＃43;&＃39;| link unlink image code | removeformat | h2 h4 | fullscreen preview paste&＃39;,height: 700,codesample_languages: [{text: &＃39;Javascript&＃39;,value: &＃39;Javascript&＃39;},{text: &＃39;HTML/XML&＃39;,value: &＃39;markup&＃39;},{text: &＃39;CSS&＃39;,value: &＃39;css&＃39;},// { text: &＃39;TypeScript&＃39;, value: &＃39;typescript&＃39; },{text: &＃39;Java&＃39;,value: &＃39;java&＃39;}],image_caption: true,// paset 插件允许粘贴图片paste_data_images: true,imagetools_toolbar: &＃39;rotateleft rotateright | flipv fliph | editimage imageoptions&＃39;,// 这个便是自定义上传图片方法images_upload_handler: function(blobInfo, success, failure) {let xhr, formData;xhr &＃61; new XMLHttpRequest();xhr.withCredentials &＃61; false;xhr.open(&＃39;POST&＃39;, &＃39;/api/upload&＃39;);xhr.onload &＃61; function() {let json;if(xhr.status !&＃61;&＃61; 200) {failure(&＃39;HTTP Error: &＃39; &＃43; xhr.status);return;}json &＃61; JSON.parse(xhr.responseText);if(!json || typeof json.location !&＃61;&＃61; &＃39;string&＃39;) {failure(&＃39;Invalid JSON: &＃39; &＃43; xhr.responseText);return;}success(json.location);};formData &＃61; new FormData();formData.append(&＃39;file&＃39;, blobInfo.blob(), blobInfo.filename());xhr.send(formData);}};$scope.tinymceOptions &＃61; editParam;}};
});


参考&＃xff1a;https://www.tiny.cloud/docs/integrations/angularjs/