第一步：下载

官网下载：https://www.tiny.cloud/download/

TinyMCE从4.0开始，不再支持直接下载，而是直接使用提供免费的CDN，让用户免除安装过程，可以在网站中使用TinyMCE，但是这样会导致无法DIY程序，所以大叔还是提供了下载版本

百度网盘：https://pan.baidu.com/s/1FxqpYHNLayF0dZs9GqxZUg
访问密码：pasm

第二步：安装

解压程序包，找到目录：xxx -> js -> tinymce 此文件夹为程序运行核心文件夹，保留此文件夹，其余全部删除，然后将文件夹放入插件/样式文件夹中

下面这段代码是一个简单的TinyMCE使用示意图，使用前需要先引用 TinyMCE.min.js，然后将编辑器套用到 textarea 控件上。

<!DOCTYPE html>

<html>

<head>

  <script src="/插件&样式文件夹路径/tinymce/TinyMCE.min.js"></script>

  <script>TinyMCE.init({ selector:'textarea.content' });</script> <!--这里设置 class="content" 套用TinyMCE编辑器-->

</head>

<body>

  <textarea class="content">Next, start a free trial!</textarea>

</body>

</html>

修改样式表

TinyMCE控件本地安装好后，会出现一个样式Bug，部分功能图标，能看到的地方鼠标点不到，大叔找到的方法是在样式表中用padding撑开一些：

样式表：skin.min.css

.mce-btn-small button{padding:1px 5px; height:24px;}

.mce-splitbtn.mce-btn-small .mce-open{padding:0 3px 6px;}

中文语言包

成功显示后，TinyMCE的菜单栏以及按钮的说明全是英文，这是因为程序默认是英文这时，我们需要去下载一份中文语言包。

下载地址：https://www.tiny.cloud/download/language-packages/

语言文件：zh_CN.js

将文件放到 tinymce -> langs 中，清除浏览器缓存，刷新页面即可。

第三步：配置

这是一个最基本的配置，可以根据自己的需求，自定义功能区。

plugins：激活控件
toolbar：显示控件

<script>

  TinyMCE.init({

    selector:'textarea.content', //表单控件.样式名称 - 绑定textarea

    height:"140", //高度

    width:"280", //宽度

    toolbar_items_size: 'small', //控件大小

    menubar:true, //是否显示菜单栏

    plugins: ["link code"], //插件区，激活控件

    toolbar: "link code",  //控件区，显示控件

    //名称前后显示，影响控件显示位置

  });

</script>

<textarea name="content" class="content">需要编辑的内容</textarea>

TinyMCE：下载、安装、配置的更多相关文章

  1. win10 DVWA下载安装配置（新手学渗透）

    电脑重装系统了,需要重新装一下渗透测试的学习环境DVWA,借此机会就跟大家讲一下DVWA的安装过程,因为不同的电脑配置.环境不同,在我的电脑上按照我这个安装教程是一次性就安装好了的.如果安装的时候遇到 ...

  2. Jmeter下载安装配置及使用（windows）

    1 前言 仅作为记录使用. 2 步骤 2.1 下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.2 选择binary版本即可:apache-jme ...

  3. 01_2Java开发环境的下载 安装 配置

    01_2Java开发环境的下载 安装 配置 l 配置Java开发环境步骤(WindowsXP) l 下载并按照最新版本的J2SDK l 设置Windows环境变量 l 选择合适的文本编辑器或使用集成开 ...

  4. 2019-03-18 OpenCV Tesseract-OCR 下载 安装 配置（cv2 报错）

    OpenCV 下载 安装 配置 1.下载和Python版本对应的版本,此为下载地址 2.安装(在powershell管理员模式下安装) pip3 install .\opencv_python-3.4 ...

  5. 从零开始使用git第一篇：下载安装配置

    从零开始使用git 第一篇:下载安装配置 第一篇:从零开始使用git第一篇:下载安装配置 第二篇:从零开始使用git第二篇:git实践操作 第三篇:从零开始使用git第三篇:git撤销操作.分支操作和 ...

  6. JDK下载安装配置教程(详细)

    JDK下载安装配置教程(详细) 版权声明:本文为原创文章,转载请附上原文出处链接和本声明.https://www.cnblogs.com/mxxbc/p/11844885.html 因为最近需要在Wi ...

  7. Windows32位或64位下载安装配置Scala

    [学习笔记] Windows 32位或64位下载安装配置Scala: 1)下载地址:http://www.scala-lang.org/download/,看我的spark那节,要求scala是2.1 ...

  8. Windows32或64位下载安装配置Spark

    [学习笔记] Windows 32或64位下载安装配置Spark:1)下载地址:http://spark.apache.org/downloads.html 马克-to-win @ 马克java社区: ...

  9. win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结

    win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结 一:前提 注意:现在有两种安装的方式 1. oracle11g服务端(64位)+oracle客户端(32位)+plsql(3 ...

  10. MongDB4.1-入门学习之下载安装配置

    下载安装配置三步走 下载,MongoDB官网下载中心 下载_.msi_安装版 安装,注意以下几个步骤: Choose Setup Type: Please Choose Custom Custom S ...

随机推荐

  1. 【Anaconda】windows安装报错：UnicodeDecodeError解决方法

    UnicodeDecodeError: 'utf8' codec can't decode byte 0xce in position 11: invalid continuation byte 解决 ...

  2. HTML5时代的纯前端上传图片预览及严格图片格式验证函数（转载）

    原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...

  3. CSS中DIV只出现竖向滚动条且内容自动换行

    只需要设置如下的样式即可: <div id="testDiv" style="overflow-x: hidden; word-break:break-all;bo ...

  4. 【NLP_Stanford课堂】文本分类1

    文本分类实例:分辨垃圾邮件.文章作者识别.作者性别识别.电影评论情感识别(积极或消极).文章主题识别及任何可分类的任务. 一.文本分类问题定义: 输入: 一个文本d 一个固定的类别集合C={c1,c2 ...

  5. Topshelf Configuration z

    Topshelf Configuration While the Quickstart gives you enough to get going, there are many more featu ...

  6. 在自己机器上实现apache的多域名

    自己机器上有3个目录,分别是/var/www/html/                             /var/www/solaris/                           ...

  7. [零基础学JAVA]Java SE基础部分-03. 运算符和表达式

    转自:http://redking.blog.51cto.com/27212/116751 1.课程名称:运算符.表达式 讲解了JAVA中各种运算符的使用,包括与.或.非.大于.小于等. 2.知识点 ...

  8. itext-2.1.7.jar

    iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件转化为PDF文件. ...

  9. pexpect 初坑

    通过一个很坑的任务,最近认识了一个新坑: pexpect .其实基本的用法并不难,不过,我还是跟以前一样,把几个基本函数的坑蹚了个遍.有感而发,记录一下. 首先简单的介绍一下这个坑,哦不对,这个库.这 ...

  10. ResourceWarning: unclosed <socket.socket fd=864, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('10.100.x.x', 37321), raddr=('10.1.x.x', 8500)>解决办法

    将代码封装,并使用unittest调用时,返回如下警告: C:\python3.6\lib\collections\__init__.py:431: ResourceWarning: unclosed ...