TinyMCE编辑器，如何保存style样式和script等

TinyMCE 是一个流行的富文本编辑器，它允许用户以所见即所得（WYSIWYG）的方式编辑内容。在许多情况下，出于安全考虑，你可能希望在使用 TinyMCE 编辑器时过滤或清理用户输入的 HTML 内容，以确保不会执行恶意脚本或包含有害的 HTML 标签。

在TinyMCE编辑器中保存样式通常涉及到两个方面：

一是如何在编辑器中设置定义样式，二是如何将这些样式应用到保存的内容中。


1. 在TinyMCE编辑器中设置样式
使用 content_style 或 content_css
可以通过设置content_style或content_css来定义编辑器中的默认样式。content_style允许你直接在TinyMCE的配置中定义CSS规则，而content_css则允许你链接到一个外部的CSS文件。

示例代码：

tinymce.init({
  selector: 'textarea',  // 修改为你的textarea选择器
  content_css: 'path/to/your/styles.css', // 外部CSS文件的路径
  content_style: 'body { font-family: Arial; }' // 直接在配置中定义样式
});

2. 在TinyMCE编辑器中设置定义放行范围
可以通过设置 valid_elements 或 valid_children 来定义放行的范围。

‌示例代码：

tinymce.init({
  selector: 'textarea',  // 修改为你的textarea选择器
  valid_elements: '*[*]', // 允许所有HTML元素和属性
  extended_valid_elements: '*[*]', // 同上，扩展验证规则
  forced_root_block: false, // 不自动添加根块元素  		
  inline_styles: true, //确保内联样式被保留
  custom_elements: 'style',
  valid_children: '+body[style|link]',//配置保留style标签,link标签
});

或者直接定义明确点

extended_valid_elements: 'script[src|type],style[type],link[rel|href|type]' // 允许 script 和 style 标签

3. 启用 verify_html
确保 verify_html 设置为 true，这样 TinyMCE 会在粘贴或输入内容时验证 HTML 代码。这有助于防止不安全或无效的 HTML 被插入到编辑器中。

tinymce.init({
  selector: 'textarea',
  verify_html: true
});

当然，也可以  verify_html: false ， 直接不检测HTML代码，但不建议！



通过上述方法，你可以在TinyMCE编辑器中灵活地设置和应用样式，确保用户编辑的内容既美观又符合设计要求。同时，合理地使用内联样式和预定义样式格式，可以提高用户的编辑体验和内容的可维护性。