JS开发富文本编辑器TinyMCE详解

什么是TinyMCE

TinyMCE是一款完全基于JavaScript的开源富文本编辑器，它是一个丰富、灵活的工具，可以帮助我们创建各种各样的文档内容。它支持各种格式的文本、图片、表格等元素，并且能够保留你所选样式的完整性和可编辑性。

基本用法

引入TinyMCE

我们首先要引入TinyMCE的JavaScript文件，可以通过CDN或者下载后本地引入，以下是通过CDN引入的方式：

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>

初始化TinyMCE

在引入TinyMCE后，需要对编辑器进行初始化，可以使用jQuery或者JavaScript的形式进行初始化。以下是通过jQuery的方式进行初始化的实例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      tinymce.init({
        selector:'textarea', // 触发编辑器的选择器
        height: 500 // 编辑器高度
      });
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

获取编辑器的内容

我们可以使用tinyMCE.activeEditor.getContent()方法获取当前编辑器中的内容，例如：

let content = tinyMCE.activeEditor.getContent();
console.log(content);

进阶用法

自定义工具栏

我们可以使用toolbar选项自定义编辑器的工具栏，以下是一个自定义工具栏的实例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      tinymce.init({
        selector:'textarea', // 触发编辑器的选择器
        height: 500, // 编辑器高度
        toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat | subscript superscript'
      });
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

自定义主题风格

我们可以使用content_css选项自定义编辑器的主题样式表，以下是一个自定义主题风格的实例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      tinymce.init({
        selector:'textarea', // 触发编辑器的选择器
        height: 500, // 编辑器高度
        content_css: 'https://mywebsite.com/mytheme.css'
      });
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

在上述的示例中，content_css选项指定了一个主题样式表的URL，我们需要将这个样式表上传到自己的服务器中，然后将URL替换为自己的服务器地址即可。