TinyMCE:下载安装配置

Posted dydashu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TinyMCE:下载安装配置相关的知识,希望对你有一定的参考价值。

第一步:下载

官网下载: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:下载安装配置的主要内容,如果未能解决你的问题,请参考以下文章

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

joomla 上的 tinymce 编辑器。安装插件

#VSCode保存插件配置并使用 gist 管理代码片段

tinymce与prism代码高亮实现及汉化的配置

TinyMCE的使用(包括汉化及本地图片上传功能)

Django框架中tinymce富文本编辑器的使用