保存数据后,TinyMCE显示HTML标签和内联CSS代码。
创始人
2024-11-22 18:02:05
0次

问题描述: 在使用 TinyMCE 编辑器保存数据后,显示的内容中包含 HTML 标签和内联 CSS 代码。

解决方法: 这个问题通常是由于 TinyMCE 的默认设置导致的。要解决这个问题,可以通过配置 TinyMCE 的选项来过滤掉 HTML 标签和内联 CSS 代码。

以下是一个示例代码,演示如何配置 TinyMCE 来过滤掉 HTML 标签和内联 CSS 代码:

tinymce.init({
  selector: 'textarea',
  plugins: 'textcolor',
  toolbar: 'forecolor',
  menubar: false,
  valid_elements: '*[*]',
  valid_styles: {
    '*': 'color'
  },
  extended_valid_elements: 'span[style]',
  valid_children: '+body[style]',
  invalid_styles: 'font-size font-family',
  formats: {
    forecolor: { inline: 'span', styles: { color: '%value' } }
  }
});

解释:

  1. valid_elements:指定允许的 HTML 元素和属性,*[*] 表示允许所有的元素和属性。
  2. valid_styles:指定允许的内联样式属性,这里只允许 color 属性。
  3. extended_valid_elements:指定额外的允许的元素和属性,这里允许 span 元素的 style 属性。
  4. valid_children:指定允许的子元素和它们的属性,+body[style] 表示允许 body 元素及其子元素的 style 属性。
  5. invalid_styles:指定不允许的内联样式属性,这里禁止了 font-size 和 font-family 属性。
  6. formats:指定格式化选项,这里定义了 forecolor 格式化选项,使用 span 元素和 color 样式属性。

通过上述配置,保存数据后,TinyMCE 将会过滤掉 HTML 标签和内联 CSS 代码,只显示纯文本内容。

这只是一个简单的示例,你可以根据实际需求来配置 TinyMCE 的选项。请参考 TinyMCE 的官方文档以获取更详细的配置选项和说明。

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...