第一步:下载

官网下载: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 控件上。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/插件&样式文件夹路径/tinymce/TinyMCE.min.js"></script>
  5. <script>TinyMCE.init({ selector:'textarea.content' });</script> <!--这里设置 class="content" 套用TinyMCE编辑器-->
  6. </head>
  7. <body>
  8. <textarea class="content">Next, start a free trial!</textarea>
  9. </body>
  10. </html>

修改样式表

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

样式表:skin.min.css

  1. .mce-btn-small button{padding:1px 5px; height:24px;}
  2. .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:显示控件

  1. <script>
  2. TinyMCE.init({
  3. selector:'textarea.content', //表单控件.样式名称 - 绑定textarea
  4. height:"140", //高度
  5. width:"280", //宽度
  6. toolbar_items_size: 'small', //控件大小
  7. menubar:true, //是否显示菜单栏
  8. plugins: ["link code"], //插件区,激活控件
  9. toolbar: "link code", //控件区,显示控件
  10. //名称前后显示,影响控件显示位置
  11. });
  12. </script>
  13. <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. Android 低版本sdk中没有getSupportedPreviewSizes和getSupportedPictureSizes函数怎么办?

    在做camera和SurfaceView做摄像头程序时,需要获取camera支持的相片大小,在低版本sdk中没有getSupportedPictureSizes函数,怎么办呢,请参阅下面的关键代码: ...

  2. sqlserver查询当月数据

    SELECT * FROM table WHERE datediff(month,LoginTime,getdate())=0 ORDER BY LoginTime SELECT * FROM tab ...

  3. Python爬虫教程-28-Selenium 操纵 Chrome

    我觉得本篇是很有意思的,闲着没事来看看! Python爬虫教程-28-Selenium 操纵 Chrome PhantomJS 幽灵浏览器,无界面浏览器,不渲染页面.Selenium + Phanto ...

  4. 基于zxing的二维码(网格)扫描

    基于zxing的二维码(网格)扫描 前言:对于二维码扫描我们使用的是开源框架Zxing或者Zbar,这里使用基于zxing的二维码扫描,类似支付宝网格扫描, 二维码原理介绍: 二维码是用某种特定的几何 ...

  5. php 环境搭配 脚本模式(1)

    php介绍目标1:<?phpecho 'hello world'; //配置好了apacheecho '<br/> 现在时间:" .date(’Y-m-d H:i:s‘)“ ...

  6. 如何在 MSBuild Target(Exec)中报告编译错误和编译警告

    编译错误和编译警告 MSBuild 的 Exec 自带有错误和警告的标准格式,按照此格式输出,将被识别为编译错误和编译警告. 而格式只是简简单单的 error: 开头或者 warning: 开头.冒号 ...

  7. January 23 2017 Week 4 Monday

    Knowledge is long, life is short. 吾生也有涯,而知也无涯. I often feel that I have a lot of things to learn, ne ...

  8. 百度地图隐藏LOGO显示

    在引入地图的页面加入下列样式即可隐藏百度地图左下角的LOGO   <style type="text/css">   .anchorBL{display:none;} ...

  9. openCV2马拉松第19圈——Harris角点检測(自己实现)

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g/article/details/26824529 收入囊中 使用OpenCV的con ...

  10. 443M衣架遥控arduino代码备档

    ] = {,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,}; ] = {,,,,,,,,,,,,,,,,,,,,,,, ...