参考 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 页面中又不能使用了,报了下图的错误:
原因:缺少<!DOCTYPE html>
。加上就正常显示了,但是汉化还是失效的。