文档章节

ng-admin 引用富文本插件 angular-ui-tinymce

SummerGao
 SummerGao
发布于 06/03 10:06
字数 420
阅读 26
收藏 0

angular-ui-tinymce

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

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

1.先引入tinymce 的 javascript 文件,下载地址:https://github.com/tinymce/tinymce

<script type="text/javascript" src="lib/tinymce/tinymce.js"></script>

整理后的目录结构:

2.引入 angular-ui-tinymce/tinymce.js 文件,下载地址:https://github.com/angular-ui/ui-tinymce

<script type="text/javascript" src="lib/angular-ui-tinymce/tinymce.js"></script>

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

var myApp = angular.module('myApp', ['ng-admin','ui.tinymce']);

3.为相应字段添加模板(就这么简单)

nga.field('content','template').template('<div ui-tinymce="tinymceOptions" ng-model="value" field="field"></div>'),

重点:ui-tinymce="tinymceOptions" ng-model="value" field="field"  三个属性

测试截图(编辑):

本地配置tinymce:

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

			};
			$scope.tinymceOptions = editParam;
		}
	};
});

参考:https://www.tiny.cloud/docs/integrations/angularjs/

          

© 著作权归作者所有

SummerGao
粉丝 4
博文 201
码字总数 74336
作品 0
济南
高级程序员
私信 提问
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
54
0
angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比
2015/11/15
274
1
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
35.9K
22
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
2018/05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
2018/05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
134
7
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
18
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部