js TinyMCE富文本

简介: js TinyMCE富文本
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TinyMCE 富文本编辑器</title>
  <script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: 'textarea',
      height: 300,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar: 'undo redo | formatselect | ' +
               'bold italic backcolor | alignleft aligncenter ' +
               'alignright alignjustify | bullist numlist outdent indent | ' +
               'removeformat | help',
      menubar: 'file edit view insert format tools table help',
      content_css: 'https://cdn.jsdelivr.net/npm/tinymce@5/skins/ui/oxide/content.min.css',
      skin: 'oxide',
      setup: function (editor) {
        editor.on('change', function () {
          tinymce.triggerSave();
        });
      }
    });
  </script>
</head>
<body>
  <h1>TinyMCE 富文本编辑器</h1>
  <textarea name="content"></textarea>
</body>
</html>

需要将API_KEY替换为你从TinyMCE官网获取到的API密钥。该代码片段会引入TinyMCE的JavaScript文件,并初始化一个富文本编辑器实例。通过选择器textarea,将富文本编辑器应用于名为content的<textarea>元素。


配置中指定了一些插件和工具栏按钮,以及一些常见的功能,如格式化、插入链接、插入图片、表格等。还可以根据需求进行自定义配置,详细信息可以参考TinyMCE的官方文档。


注意,在使用富文本编辑器时,需要在提交表单或保存数据之前调用tinymce.triggerSave(),将编辑器中的内容同步到对应的<textarea>元素中,以便后续处理


相关文章
|
7月前
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
132 0
|
7月前
|
存储 JavaScript 前端开发
js实现富文本
js实现富文本
61 0
|
JavaScript
js提取富文本文字字符串内容
js提取富文本文字字符串内容
|
JavaScript
原生Js显示富文本效果demo(整理)
原生Js显示富文本效果demo(整理)
|
JavaScript
Js获取富文本所有图片src地址
Js获取富文本所有图片src地址
143 0
|
JavaScript 前端开发 Java
|
JavaScript
(富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式
(富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式
471 0
|
小程序 JavaScript
小程序后台传过来富文本内容,小程序展示文本——不用js
做项目过程中,经常遇到接口里传过来的内容是包含html标签的,但是样式又不全面,导致在小程序显示的时候,整个界面都是乱的。 这时候就要用到rich-text
|
JavaScript Python
Selenium2+python自动化24-js处理富文本(带iframe)
前言     上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题 一、加载配置     1.打开博客园写随笔,首先需要登录,这里为了避免透露个人账户信息,我直接加载配置文件,免登录了。
1368 0
|
JavaScript 前端开发 Web App开发
bootstrap-wysiwyg中JS控件富文本的用法
1、引入js和css文件(注:这里必须引入正确,下面是我的路径,你修改为你自己的,不多说了) 2、其实调用也很容易,难点在于怎么把‘富文本里面的内容提交给后台’...
1456 0