TinyMCE Editor(https://www.tinymce.com/features/) is an online text editor,

it is used to write posts on blog, email, or something else. It is quite convenient

to build application we want. Just add the tinymce js to the website and configure

it. In TinyMCE official website, many features are shown, we can add what we want.

<!DOCTYPE html>

<html>

<head>

    <script src="./js/tinymce/tinymce.min.js"></script>

    <script>

      tinymce.init({

        selector: 'textarea',

        height: 500,

        theme: 'modern',

        plugins: [

          'advlist autolink lists link image charmap print preview hr anchor pagebreak',

          'searchreplace wordcount visualblocks visualchars code fullscreen',

          'insertdatetime media nonbreaking save table contextmenu directionality',

          'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'

        ],

        toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

        toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',

        image_advtab: true,

        templates: [

          { title: 'Test template 1', content: 'Test 1' },

          { title: 'Test template 2', content: 'Test 2' }

        ],

        content_css: [

          // '//www.fonts.com/css?family=Lato:300,300i,400,400i',

          './css/codepen.min.css'

        ]

      });

    </script>

</head>

<body>

  <textarea>Easy (and free!) You should check out our premium features.</textarea>

</body>

</html>

　　

TinyMCE Editor的更多相关文章

  1. TinyMCE（富文本编辑器）

    [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http:/ ...

  2. TinyMce 使用初探

    https://www.cnblogs.com/nkxyf/p/3883586.html 参考:http://www.tinymce.com/    官网 http://www.tinymce.com ...

  3. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  4. 【转】TinyMCE（富文本编辑器）

    效果预览:http://www.tinymce.com/tryit/full.php [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转自:http://www.cnblogs.co ...

  5. NopCommerce 3.80框架研究（三）替换tinymce 为KindEditor

    NopCommerce 自带的编辑器tinymce 功能不是很全.所以尝试将其替换为功能更强大的 KindEditor 并替实现文件上传和在线浏览功能 首先下载 并解压到如下位置 请注意这里是部署在N ...

  6. MVC.Net5：添加Tinymce的图片上传功能

    Tinymce是目前几个主流的Web文本编辑器之一,不过它的图片上传功能是要收费的,而其它几个免费的上传图片的插件支持的都是PHP.那么就只能自己动手写一个了(源代码下载). 准备工作如下:1.   ...

  7. 富文本编辑器 tinymce 的安装与使用

    百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...

  8. 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...

  9. tinymce + vue 富文本编辑

    用texterea最多支持换行,如果文本信息想要更加丰富一些,比如增加格式样式,比如增加图片,textarea就爱莫能助了 在网上搜寻了一番,发现tinymce是比较方便好用的一款富文本编辑 http ...

随机推荐

  1. 1.maven安装配置

    这段时间在做项目构建管理方面的工作,以前很多项目都是通过ant去构建的,虽然很早就接触过mavan,但是从没有系统的去学习过, 现在项目需要用maven来构建,我结合自己的心得整理一下放在博客上作为自 ...

  2. Pycharm小知识

    1)  重新更改文件名称:(Shift + F6) 2) 设置IDE皮肤主题 File -> Settings ->  Appearance -> Theme -> 选择“Al ...

  3. 一个比较有意思的SDN网络技术相关blog/doc

    http://feisky.xyz/sdn/linux/index.html 涵盖了目前主流的网络技术,所有比较有意思的内容全都覆盖了 SDN网络 目录 基本网络 TCP/IP标准模型 DHCP与DN ...

  4. MSI-X 之有别于MSI

    转自: https://www.cnblogs.com/helloworldspace/p/6760718.html MSI-X Capability结构 MSI-X Capability中断机制与M ...

  5. centos7中输入ifconfig出现ens33，没有eth0（转）

    vmware安装的centos7中没有出现eth0网卡,也没有ip,不能上网,输入ifconfig后如下图 解决办法 1.编辑网卡的配置文件 vi /etc/sysconfig/network-scr ...

  6. 类名.class 与 类名.this 详解

    类名.class 与 类名.this 详解 今天在看 PropertyPlaceholderConfigurer 源码时,突然看到一个 PropertyPlaceholderConfigurer.th ...

  7. vue引用公用的头部和尾部文件。

    我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...

  8. Java虚拟机的相关笔记

    1.垃圾GC回收事件Minor GC(只清除新生代),Full GC(清除新生代和老年代),Major GC(清除新生.老年代和持久代). 2.堆分为新生代.老年代和持久代,持久代一般存放静态文件. ...

  9. 如何用TFS build definition添加自动建立nuget package 步骤

    参考网址:https://www.visualstudio.com/en-us/docs/build/steps/package/nuget-packager https://docs.nuget.o ...

  10. JWT设计实现

    一.JWT基于token的认证流程: 二.JWT SDK的选取: https://jwt.io/ 三.编写JWT Helper: 1.获取token 设置密钥,规定算法,设置过期时间,设置发行方,生命 ...