tinymce是开源的富文本编辑器，对于现在众多停止维护的富文本编辑器而言，应该算首选富文本编辑器了。

一、安装下载

（一）下载

1.下载tinymce

下载地址：https://www.tiny.cloud/get-tiny/

在这里插入图片描述

选左边“Download Now”就可以下载了。由于软件不断更新，我当时下载的版本是7.3.0版本。

下载解压之后取出含根目录的文件夹，重命名一下放在public目录下。
在这里插入图片描述

2.设置中文

下载中文语言包，语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/

选择其中“Chinese Simplified”的语言包。
在这里插入图片描述

解压后将压缩包中的zh_CN.js文件放在刚才tinymce7.3.0的langs的目录下
在这里插入图片描述

（二）使用示例

1.html中使用tinymce

将下载好的tinymce目录复制到public目录下后，在index.html中引入tinymce的相对路径。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入tinymce.min.js文件-->
    <script src="/tinymce7.3.0/tinymce.min.js" referrerpolicy="origin"></script>
    <!--挂载tinymce到某个ID的节点上-->
    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>
  </head>

  <body>
    <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
    	<!--必须在需要挂载的地方命名一个ID选择器-->
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

该使用方法分为三步:

  • 引入tinymce的文件地址
  • 在js中初始化tinymce并挂在到某ID上
  • 在需要挂载的节点上命名一个ID

2.引入插件

根据上面代码的方式引入之后，渲染成功如下：
在这里插入图片描述

可以看到，渲染的文本编辑器上面的工具栏有一些功能插件。

有些插件我们不需要，有些插件我们发现没有，所以这时我们就需要配置工具栏了。

具体有哪些插件，可以参考官方文档：https://www.tiny.cloud/docs/tinymce/7/plugins/

这里我给出一个比较全的插件配置，可以参照下面代码自行调整。

tinymce.init({
        selector: `#tinymceId`,
        language: "zh_CN",//设置语言
        toolbar: [
		`code undo redo  | cut copy paste | forecolor backcolor bold italic underline strikethrough link | alignleft  aligncenter  alignright alignjustify outdent indent |  `,
		` styleselect  fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |  `,
		" table image media  hr pagebreak  insertdatetime print   preview anchor | fullscreen  | charmap wordcount restoredraft help",
		],
        menubar: false,
        plugins:
          "advlist anchor  autosave code codesample directionality emoticons fullscreen  image  importcss " +
          " insertdatetime font_size  link autolink lists media nonbreaking pagebreak  preview  save searchreplace" +
          " table   visualblocks visualchars wordcount charmap help",
])

可以在任何一个节点进行挂载。

<template>
  <div class="tinymce-container editor-container">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
  </div>
</template>

官方使用文档：https://www.tiny.cloud/docs/tinymce/7/

二、在vue中引入tinymce

（一）安装使用

1.安装

上面是从官网下载压缩包的方式引入了tinymce，若在vue中也可以直接通过包管理器引入tinymce。

使用vue3的用户，引入命令如下：

npm install --save tinymce "@tinymce/tinymce-vue@^5"

使用vue2的用户，引入命令如下：

npm install --save tinymce "@tinymce/tinymce-vue@^3"

安装成功后，就可以在vue文件中使用了，示例代码如下：

<script setup>
import Editor from '@tinymce/tinymce-vue'
</script>

<template>
  <main id="sample">
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <Editor
      api-key="no-api-key"
      :init="{
        plugins: 'lists link image table code help wordcount'
      }"
    />
  </main>
</template>

<style scoped>
.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1000px;
  }
}
</style>

渲染后界面如下所示：
在这里插入图片描述
因为我没有api-key所以它会提示要你升级。这个不要紧，通过配置隐藏掉就好！

2.设置语言

注意：上面通过包管理器引入tinymce的方式，并没有引入语言文件，所以还是得自己去官网下载语言包。

设置语言方式如下：

<template>
   <Editor
      :init="{
        language: 'zh_CN',
        menubar: false,
        plugins: 'lists link image paste help wordcount',
        toolbar:
          'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
      }"
    />
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import '/public/tinymce7.3.0/langs/zh_CN.js';
</script>

（二）使用介绍

一个完整的组件可以有如下配置：

<editor
  api-key="your-api-key"
  cloud-channel="7"
  :disabled=false
  id="uuid"
  :init= "{ }"
  initial-value=""
  :inline=true
  model-events= ""
  plugins=""
  tag-name="div"
  toolbar=""
  value=""
/>

可以自定义一个组件方便其他页面使用，例如我写的自定义组件TinymceVue代码如下：

<template>
  <Editor
    :init="{
      language: 'zh_CN', // 设置为中文
      menubar: false, //隐藏菜单栏
      branding: false, // 隐藏版权信息
      plugins: 'lists link image paste help wordcount code', //插件加载
      license_key: 'gpl', // 使用开源许可
      toolbar:
        'code undo redo  | cut copy paste | forecolor backcolor bold italic underline strikethrough link | alignleft  aligncenter  alignright alignjustify outdent indent |   styleselect  fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |    table image media  hr pagebreak  insertdatetime print   preview anchor | fullscreen  | charmap wordcount restoredraft help' //工具栏配置
    }"
  ></Editor>
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
import './zh_CN.js'
</script>

此处我将语言文件放在同一包里了。

实现效果如下：
在这里插入图片描述

1.设置只读

disabled属性可以将文本编辑器设置成只读模式

<editor
  :disabled=true
/>

2.设置ID

给编辑器设置ID，用于使用tinymce.get（‘ID’）方法检索编辑器实例。

<editor
  id="uuid"
/>

3.初始化编辑器的配置

<editor
  :init="{
    plugins: 'lists link image paste help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
/>

4.默认填充值

给编辑器一个初始化的默认值

<editor
  initial-value="Once upon a time..."
/>
# java # 开发语言
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

cover

一文解决Cellphonedb单细胞互作分析及可视化作图（2）

avatar 开放原子开发者工作坊
cover

[工具使用]——时序图与UML类图

avatar 开放原子开发者工作坊

CTFHub技能树 Web-SQL注入 详解

整数型注入我们输入 1不断尝试发现闭合方式就是 1 ，整数型存在两列order by 2存在两个注入点/?id=-1 union select 8,9爆库，当前数据库为sqli/?id=-1 union select 8,database()爆出所有表名,这里我们需要吧sqli转换为16进制/?id=-1 union select 8,group_concat(table_name) from i

avatar 开放原子开发者工作坊