TinyMCE是一个轻量、简洁、功能强大的富文本编辑器

发表于：2022-10-23 22:54:35浏览：2760次TAG： #TinyMCE #富文本编辑器 #编辑器

TinyMCE是一个轻量、简洁、功能强大的富文本编辑器。TinyMCE，UI界面友好，而且插件丰富，官网提供了很多实用的插件，如多图上传，首行缩进，字数限制等，还可以自定义插件，方便拓展。

图片alt

具体的使用方法如下，中文网站也讲得很详细，可以参考：http://tinymce.ax-z.cn/quick-start.php

第1步：引入TinyMCE脚本

首先在官网下载自己需要的版本后，在中插入如下这行代码，将tinymce.min.js源文件引入项目。

第2步：将TinyMCE初始化为页面的一部分

需要使用tinymce.init()来进行初始化。tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定TinyMCE要绑定的内容容器，传统模式需指定textarea，内联或沉浸模式可指定div或其它块元素，推荐div）

在下面这个例子中，我们创建一个TinyMCE实例初始化，来取代:

<!DOCTYPE html>
<html>
<head>
  <script src='tinymce.min.js'></script>
  <script>
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE快速开始示例</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

图片的复制粘贴，依赖于 paste 插件文档:插件 \ paste 粘贴插件
简单的配置如下：

tinymce.init({
  selector: '#mytextarea',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默认是false的，记得要改为true才能粘贴
})

栏目分类全部>