富文本编辑器 TinyMCE 的使用

Posted by violetks on November 1, 2019

参考 TinyMCE 中文文档

一、下载 TinyMCE 插件包,解压放到项目中

我下载来用时报错了初始化无效,后来是使用BootCDN引入:

<script src="https://cdn.bootcss.com/tinymce/5.2.1/tinymce.min.js"></script>

二、初始化

<!-- 一个基本的初始化案例 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TinyMCE 的使用</title>
  <script src="https://cdn.bootcss.com/tinymce/5.2.1/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>

三、TinyMCE 的配置主要分为四个部分

  • 选择器配置selector确定哪个 HTML 元素被替换成编辑器。
  • 插件配置plugins指定哪些插件被用在当前编辑器实例中。
  • 工具栏配置toolbar配置工具栏上可用的按钮,多个控件使用空格分隔,使用竖线符来创建分组。
  • 菜单栏配置:
    • menu:影响菜单上放置的项目(其还提供创建自定义标题菜单的方法)。
    • menubar:影响菜单下拉列表中显示的项目。

四、实例

我在毕设项目中的配置实例。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TinyMCE 的使用</title>
    <script src="zh_CN.js"></script>
    <script src="https://cdn.bootcss.com/tinymce/5.2.1/tinymce.min.js"></script>
    <script>
        tinymce.init({
            // 使输入内容插入数据库时不带<p>标签
            forced_root_block: '',
            selector: '.mytextarea',
            language: 'zh_CN',
            plugins: 'print preview searchreplace code codesample fullscreen link autolink charmap hr table advlist lists autoresize autosave',
            toolbar1: 'searchreplace | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify outdent indent | blockquote undo redo | removeformat subscript superscript | code codesample',
            toolbar2: 'restoredraft hr bullist numlist link table forecolor backcolor fullscreen',
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
            font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;'
            width: 710
        });
    </script>
</head>

<body>
    <div>
        <form method="post">
            <textarea class="mytextarea">Hello, World!</textarea>
            <textarea class="mytextarea">Hello, World!</textarea>
        </form>
    </div>
</body>

</html>

在单个页面测试是可以用的,放到 JSP 页面中又不能使用了,报了下图的错误:

GL4aa8.png

原因:缺少<!DOCTYPE html>。加上就正常显示了,但是汉化还是失效的。