前端项目开发：富文本编辑器（tinymce6简单使用教程）

晓风残月淡

已于 2023-08-24 21:05:25 修改

阅读量1.5k

点赞数

分类专栏：软件项目开发最佳实践文章标签： java 开发语言

于 2023-04-10 22:17:24 首次发布

本文链接：https://blog.csdn.net/qq_40610003/article/details/130070939

版权

软件项目开发最佳实践专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

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

在这里插入图片描述
选右边“Download TinyMCE SDK Now”输入电子邮箱就可以下载了。
语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/
英文官方使用文档：https://www.tiny.cloud/docs/tinymce/6/
一、使用示例
将下载好的tinymce目录复制到static目录下，在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="/tinymce6.4.1/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>
  </head>

  <body>
    <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

二、引入插件

正常来说，渲染成功之后，就需要配置工具栏了。
在这里插入图片描述

tinymce.init({
        selector: `#mytextarea`,
        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",
])

插件功能参考官方文档：https://www.tiny.cloud/docs/tinymce/6/plugins/

晓风残月淡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端项目开发：富文本编辑器（tinymce6简单使用教程）

语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/插件功能参考官方文档：https://www.tiny.cloud/docs/tinymce/6/plugins/tinymce是开源的富文本编辑器，对于现在众多停止维护的富文本编辑器而言，应该算首选富文本编辑器了。英文官方使用文档：https://www.tiny.cloud/docs/tinymce/6/下载地址：https://www.tiny.cloud/get-tiny/
复制链接

扫一扫