tinymce基础使用手册

1. 开始

官网文档：https://www.tiny.cloud/docs/
社区版及开发版官方最新打包地址：https://www.tiny.cloud/get-tiny/self-hosted/
汉化包：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

2. 快速使用

引入tinymce脚本
将tinymce初始化为页面的一部分
- 我们需要使用tinymce.init()来进行初始化；tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定tinymce要绑定的内容容器，div和textarea都是可以的）
- 例如：

<div id = "tinydemo"></div>
<script >tinymce.init({selector: '#tinydemo'});
</script>

获取tinymce富文本框内容的几种方式：
- 如果当前页面只有一个编辑器
  - 获取内容：tinyMCE.activeEditor.getContent()
  - 设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
- 如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）
  - 获取内容：tinyMCE.editors[0].getContent()
  - 设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
- 获取不带HTML标记的纯文本内容

var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
//纯文本内容
var text = activeEditor.selection.getContent({'format': 'text'
});

textarea可通过表单提交

<h1>TinyMCE Quick Start Guide</h1>
<form method="post"><textarea id="mytextarea">Hello, World!</textarea>
</form>
<script>tinymce.init({selector: '#mytextarea'});
</script>

3. 常用配置

selector

渲染DOM，必填，String值，使用CSS选择器。

language

指定语言，String，值区分大小写。

language_url

汉化包路径

height

设置整个编辑器的高度，包括菜单栏、工具栏和状态栏,如果提供了数字，TinyMCE 以像素为单位设置高度。如果提供了字符串，TinyMCE 假定该值是有效的 CSS，并将编辑器的高度设置为字符串值。这允许备用单元，例如%，em，和vh。(测试%不起作用)

readonly

只读，Boolean，将编辑器设置成只读模式，不可编辑。

plugins

指定需加载的插件，String或Array，此插件必须已存在plugins目录内；若使用String值，多个插件用空格分隔；默认不会加载任何插件，支持自写插件。
可选插件配置：https://www.tiny.cloud/docs/plugins/opensource/advlist/

toolbar

自定义工具栏，Boolean或String或Array；为false时将关闭工具栏；String值时用于自定义工具栏，例：toolbar:“link | preview”，值中可插入“|”分组；支持多级工具栏,例：toolbar1:"",toolbar2:""；官网：https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar

tinymce.init({selector: '#tinydemo',menu: {file: {title: '文件', items: 'newdocument'},edit: {title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall'},insert: {title: '插入', items: 'link media | template hr'},view: {title: '查看', items: 'visualaid'},format: {title: '格式', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},table: {title: '表格', items: 'inserttable tableprops deletetable | cell row column'},tools: {title: '工具', items: 'spellchecker code'}}
});

当有多级菜单时：

tinymce.init({selector: '#tinydemo',menubar: 'my1',menu: {my1: {title: '我的菜单', items: 'copy paste' }}
});

menubar

1级菜单，Boolean或String；为false时将关闭菜单栏；String时用于自定义1级菜单，例：menubar:“file edit”；官网：https://www.tiny.cloud/docs/configure/editor-appearance/#menubar

placeholder

内容预展示文本，String值。

resize

调整编辑器大小工具，编辑器右下角有一个可以拖动的标记，鼠标按住它可以改变编辑器的大小。默认resize: true；可选值为：true（仅允许改变高度）, false（完全不让你动）, ‘both’（宽高都能改变，注意引号）。

4. 高级功能

图片上传
文件上传

图片上传

tinymce.init({selector: '#tinydemo',language: 'zh_CN',plugins: 'image', //使用image插件toolbar: 'image', //工具栏显示images_upload_url: '/api/controller/action', //用于指定一个接收上传文件的后端处理程序地址images_upload_base_path: '/demo', //如果返回的地址是相对路径，此参数可以给相对路径指定它所相对的基本路径
});

跨域问题：如果TinyMCE和接受上传图片程序未在同一域名下，浏览器会因跨域问题而拒绝操作，后端程序返回结果时，需给浏览器一个允许跨域的指令。

图片上传扩展参数

名称	描述
images_upload_credentials	对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false.
images_upload_handler（图片上传自定义实现）	此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供4个参数：blobInfo、成功回调和失败回调、上传进度（取值1-100）

//以下为自定义上传实现的一个代码示例
tinymce.init({selector: '#tinydemo',images_upload_handler: function(blobInfo, success, failure, progress) {var xhr, formData;xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', 'action');xhr.upload.onprogress = function(e) {progress(e.loaded / e.total * 100);}xhr.onload = function() {var json;if (xhr.status == 403) {failure('HTTP Error: ' + xhr.status, {remove: true});return;}if (xhr.status < 200 || xhr.status >= 300) {failure('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failure('Invalid JSON: ' + xhr.responseText);return;}success(json.location);};xhr.onerror = function() {failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);}formData = new FormData();formData.append('file', blobInfo.blob(), blobInfo.filename());xhr.send(formData);}
});

文件上传

原文里只涉及了图片上传，文件上传没有说明，只能使用 file_picker_callback 写回调。
更多参数请移步官网： https://www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads
简单例子：

tinymce.init({selector: '#tinydemo',language: 'zh_CN',plugins: 'link',        toolbar: 'link',file_browser_callback_types: 'file image media',//这个根据个人需要配置            file_picker_callback: function(callback, value, meta) {//文件分类var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';var upurl = '/api/controller/';//为不同插件指定文件类型及后端地址switch (meta.filetype) {case 'image':filetype = '.jpg, .jpeg, .png, .gif';upurl += 'action1';break;case 'media':filetype = '.mp3, .mp4';upurl += 'action2';break;case 'file':break;};//模拟出一个input用于添加本地文件var input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', filetype);input.click();input.onchange = function() {var file = this.files[0];var xhr, formData;console.log(file.name);//TODO:这里写请求};},
});

自定义插件

第一，在目录tinymce/plugins下新建一个目录，与自己要取的插件名称相同，在到插件目录下新建plugin.min.js，如下：

上图示upfile是我自定义插件名称，位置tinymce/plugins/upfile

第二，理解下面代码，参阅官网：https://www.tiny.cloud/docs/api/tinymce/tinymce.addonmanager/

/*** 上传文件插件*/tinymce.PluginManager.add('upfile', function (editor, url) {var openDialog = function () {return editor.windowManager.open({title: '上传文件',body: {type: 'panel',items: [{type: 'htmlpanel', // component typehtml: '<div><input id="TinymcefileToUpload" type="file"  name="TinymcefileToUpload" class="input"></div>'}]},buttons: [{type: 'cancel',text: 'Close'},{type: 'submit',text: 'Upload',primary: true}],onSubmit: function (api) {let input = document.getElementById("TinymcefileToUpload");console.log("进来了");if (input.files.length > 0) {let file = input.files[0];let formData = new FormData();formData.append("formFile", file);axios.post("https://192.168.0.174:7183/api/Test/UploadFile", formData).then(res => {if (res.data?.path != "") {editor.insertContent(res.data.fileName + ":" + res.data?.path);alert("文件上传成功");}else {alert("上传失败");}}).catch(err => console.log(err));}api.close();}});};// Add a button that opens a windoweditor.ui.registry.addButton('upfile', {text: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-box-arrow-in-up" viewBox="0 0 16 16">< path fill- rule="evenodd" d = "M3.5 10a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 0 0 1h2A1.5 1.5 0 0 0 14 9.5v-8A1.5 1.5 0 0 0 12.5 0h-9A1.5 1.5 0 0 0 2 1.5v8A1.5 1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1h-2z" /><path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z" /></svg> `,onAction: function () {// Open windowopenDialog();}});// Adds a menu item, which can then be included in any menu via the menu/menubar configurationeditor.ui.registry.addMenuItem('upfile', {text: 'Example plugin',onAction: function () {// Open windowopenDialog();}});return {getMetadata: function () {return {name: "Example plugin",url: "http://exampleplugindocsurl.com"};}};
});

第三，笔者理解

不难看出，这是一个自写文件上传插件，需要注意的是该插件基于tinymce5.x，5.x以下会报错；

回到代码，其中upfile是插件名；

openDialog()是用于打开弹窗；

editor.windowManager.open用于自定义弹窗主题内容以及按钮回调；

title是弹窗标题；

body是弹窗中间内容；

上述插件使用的是一个容器包含很多子项，子项其中用了html容器，该容器支持html输出；

buttons弹窗按钮集合；onSubmit是提交按钮触发事件；

editor.ui.registry用于添加自定义项，具体参考：https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#methods

5.使用typo排版

引入typo.css，给div加上"class=‘typo’"即可自动排版，详情参阅：https://typo.sofi.sh/

6.tinymce-vue(不推荐)

快速使用
组件配置项

a.快速使用

本节基于vue2演示
首先，使用vuecli创建项目

vue create vue-demo

选择vue2

安装组件

npm install --save "@tinymce/tinymce-vue@^3"

完整使用：

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js App" /><editor api-key="no-api-key" :init="initME" /></div>
</template><script src="http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js"></script>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import Editor from "@tinymce/tinymce-vue";export default {name: "App",components: {HelloWorld,Editor,},data() {return {initME: {height: 500,language: "zh_CN",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",},};},mounted() {tinymce.init({});
},
};
</script>

b.组件配置项

api-key

Tiny Cloud API 密钥。使用 Tiny Cloud 进行部署时需要提供 TinyMCE 编辑器。
默认值： no-api-key，类型：String.

cloud-channel

不详

disabled

该disabled属性可以在“禁用”（只读）模式 ( true) 和标准可编辑模式 ( false)之间动态切换编辑器。

id

编辑器的id.用于使用该tinymce.get(‘id’)方法检索编辑器实例。默认为自动生成的UUID.

init

对象发送到tinymce.init用于初始化编辑器的方法，同配置。

initial-value

编辑器初始化时编辑器的初始内容，与原生placeholder用法一致。

inline

是否开启内联模式，默认false.

model-events

更改要触发v-model事件的事件，默认为’change keyup’

output-format

用于指定通过input事件发出的内容的格式。这会影响与数据绑定一起使用的内容的格式。
默认值:html.可选择:html,text.

plugins

插件，同plugins.

tag-name

仅当inline=true时有效，用于为内联模式的编辑器定义HTML元素。

toolbar

工具栏，同toolbar.

tinymce-script-src

使用tinymce-script-srcprop 指定 TinyMCE 的外部版本以进行延迟加载，String值，例：

<editortinymce-script-src="/path/to/tinymce.min.js"
/>

v-model

指令可用于创建双向数据绑定。

selectionChange

事件绑定，详细请参阅：https://www.tiny.cloud/docs/integrations/vue/#eventbinding

7.自定义在vue中使用(推荐)

第一，引入，例：

<script src="../tinymce/tinymce.min.js"></script>

第二，创建div或textarea，例：

<div id="tinymcedemo"></div>

第三，tinymce初始化方法写入vue实例的methods属性，例：

methods:{init(){window.tinymce.init({selector:"#tinymcedemo"})}
}

第四，挂载，例：

mounted(){this.init();
}

挂载完成后，就可以使用了