angular的编辑器tinymce

效果图


  通过nodejs的 npm 的bower安装依赖安装, 命令行下执行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局变量)

  等待bower自动下载完毕以后,在DEMO的页面引用几个JS文件;


1

2

3


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

<script type="text/javascript" src="app/bower_components/angular/angular.js"></script>

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

  不用加载css文件, js已经帮助我们加载了, 所以在本地要开启chrome的允许本地cros;

  只要一个控制器, 控制器里面是初始化配置, 不用配置就是默认的配置(没啥子配置要改的);

  HTML和JS的代码改都不用改, 直接复制即可;

  

运行下面代码

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="bower_components/tinymce/tinymce.min.js"></script>
        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>

    </head>

    <body ng-controller="editorController">
        <form method="post">
            <textarea ui-tinymce="tinymceOptions"  ng-model="tinymceModel"></textarea>
        </form>

        <script>
            var app = angular.module(‘app‘, [‘ui.tinymce‘])
            app.controller("editorController", function( $scope ) {
                $scope.tinymceOptions = {            //配置回调的事件
                    handle_event_callback : function(e) {
                        console.log(e);
                    }
                };
                $scope.tinymceModel = "niceMCE"//初始化绑定的值
            });        </script>
    </body></html>

  总结,很简单的插件啊;

时间: 2024-10-10 15:35:12

angular的编辑器tinymce的相关文章

react引入富文本编辑器TinyMCE

这周做了一个PC端的service后台需求,要求有富文本编辑器,插入图片.表格,字体字号背景色等等, 最后引入了富文本编辑器TinyMCE 对于TinyMCE的简介: TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器.同类程序有:UEditor.Kindeditor.Simditor.CKEditor.wangEditor.Suneditor.froala等等. TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有

html编辑器tinymce使用配置教程实例demo分享

原文:html编辑器tinymce使用配置教程实例demo分享 源代码教程地址:http://www.zuidaima.com/share/1550463284202496.htm 很简单的demo,大家可以扩展,不过功能很全. 标签: 编辑器 富文本 html tinymce 教程话题: 前端技术 入门教程 html编辑器tinymce使用配置教程实例demo分享

django后台集成富文本编辑器Tinymce的使用

富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pip install django_tinymce直接下载安装) 安装完成之后,就可以在C:\python3.6\Lib\site-packages这个文件夹. 点击进入文件夹,copy"tinymce"这个文件到你的项目的根目录下. 3.配置tinycmce到你的项目中,配置到admin数

富文本编辑器TinyMCE的使用(React Vue)

富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有能力可以无限拓展功能 界面好看,符合现代审美 提供经典.内联.沉浸无干扰三种模式 对标准支持优秀(自v5开始) 多语言支持,官网可下载几十种语言. 二,配置集成并组件化 2.1,通用配置

angular 引入编辑器以及控制器的学习和理解。。。

在angular中引入编辑器的时候花了很长时间,然后发现自己以前根本就没好好用过angular,因为项目是接手的学姐的,学姐又是接手的学姐的,到我这里就只是写写页面的事了. 引入编辑器差了好多好多资料,因为controller这个东西卡住了好久好久,前几天看了两节angualr的视频才有一点点的接触到controller,然后今天理解了一下下就搞出来了,其中遇到过的报错,不只有一下三种...时间跨度太久,没有记录下了. 1.项目中找不到angular-cli.json,也找不到angular.j

WordPress 如何修改编辑器TinyMCE里的内容

//获取编辑器对象,wp中的编辑器ID是"content" var editor = tinymce.get('content'); //获取编辑器内容 var content = editor.getContent(); //更改编辑器内容 content = content+"通过JS更改编辑器内容."; //将内容保存到编辑器 editor.setContent(content); 参考: 为WordPress添加简码选择按钮 How to dynamical

Java开发之富文本编辑器TinyMCE

一.题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就很麻烦,所有用户共享一个文件目录,这样就不好了,于是便想到了TinyMCE编辑器,博客园默认的也是这个编辑器,接下 来,我们开始吧 二.TinyMCE编辑器集成步骤 2.1:下载相关文件 (1)下载TinyMCE插件包 下载地址:   https://www.tinymce.com/download

drupal7编辑器TinyMCE安装,整合IMCE

Drupal7安装TinyMCE 1. 安装模块WysiWYG:下载地址:https://www.drupal.org/project/wysiwyg. 2. 启用模块WysiWYG:admin/modules. 3. 登录admin/config/content/wysiwyg:根据提示地址下载TinyMCE的library 下载地址:http://www.tinymce.com/ 解压TinyMCE的zip到sites\all\libraries\tinymce, 回到drupal的admi

在页面调用wp编辑器 tinyMCE以及遇到的问题

有多了wp后台的编辑器觉得还不错,由于项目需要在前端页面调用wp编辑器  ,在这里简单说明下. $content 编辑器初始化内容,相当于默认值, $editor_di  textarea的ID , $settings   的元素太多了,包含一个name的元素,这个用到的比较多,有兴趣了解的可以搜搜. wp_editor( string $content, string $editor_id, array $settings = array() ). 在需要的地方调用这个函数就可以了,还是挺简洁