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

淩亂°似流年 2024-03-24 17:49 17阅读 0赞

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

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

![在这里插入图片描述][fe4ca468d2e6481194d455b89816a189.png]  
选右边“Download TinyMCE SDK Now”输入电子邮箱就可以下载了。  
语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/  
英文官方使用文档：https://www.tiny.cloud/docs/tinymce/6/  
一、使用示例  
将下载好的tinymce目录复制到static目录下，在index.html中引入tinymce的相对路径。  
![在这里插入图片描述][f18338c8b61745e1a9157a3f01ba9529.png]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <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>

二、引入插件

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

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/

[fe4ca468d2e6481194d455b89816a189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a5ad8a80126b4f109252b71e5415ab71.png
[f18338c8b61745e1a9157a3f01ba9529.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3da6f212d7384b96a82dba39ceb37e34.png
[f3f85f0268c8474a99f3e786e23e71c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9d6cd43432184530a6bbed4baa5a0783.png