1.1.0 • Published 2 years ago
cc-tinymce v1.1.0
CC-TINYMCE
基于tinymce@5.9.2、vue@3.0、tinymce-vue@5.0.0的二次封装汉化本地化插件。
使用：
1. npm i cc-tinymce 下载依赖包
2. 在需要用到的页面引入或挂载到全局 import CCTinymce from 'cc-tinymce';
3. 需要找到node_modules文件下的tinymce，在public文件夹下新建tinymce，然后复制skins文件夹到tinymce中。
4. 页面使用
<script>
import { defineComponent,reactive } from 'vue'
import CCTinymce from 'dx-tinymce';
export default defineComponent({
name: 'ServeDev',
components: {
CCTinymce
},
setup() {
const form = reactive({
content:''
})
const getVal =()=>{
console.log(form)
}
const underlineFun = function(val){
console.log('这是划词回调输出的数据：'+val)
}
const uploadImageCallBack = function(blobInfo,successUrl,failureFun){
// blobInfo（选择的文件 file类型）,successUrl(成功后的回调),failureFun(失败的回调)
// todo:uploadImg 为定义的axios请求方法
uploadImg(file).then(res => {
if(res.code === '200'){
// 成功执行回调,传入接口返回的文件地址
successUrl(res.data.url)
}else{
// 失败执行回调
failureFun('上传失败')
}
})
}
const uploadFileCallBack = function(blobInfo,successUrl){
// blobInfo（选择的文件 file类型）,successUrl(成功后的回调)
// todo:uploadFile 为定义的axios请求方法
uploadFile(blobInfo).then(res => {
if(res.code === '200'){
// 成功执行回调,传入接口返回的文件地址, 默认text传空即可
successUrl(res.data.url,{text: ''})
}else{
// 失败执行回调
console.log('上传失败')
}
})
}
return{
form,
getVal,
underlineFun,
uploadImageCallBack,
uploadFileCallBack
}
}
});
</script>
<template>
<div id="app">
<cc-tinymce
ref="editor"
placeholder="请输入"
@myUnderline="underlineFun"
toolbar='underlineword image bullist numlist'
@uploadImageCallBack="uploadImageCallBack"
@uploadFileCallBack="uploadFileCallBack"
v-model="form.content"
:height="500"
/>
<button class="btn" @click="getVal">获取editor2内容</button>
</div>
</template>5. 解释
myUnderline 一个自定义划词的插件，如定义在使用插件的后，会执行这个回调方法，参数就是划词的内容。
placeholder 自定义占位符
toolbar 自定义工具栏可选：
1.advlist 高级列表 创建和定义UL和OL列表
2.anchor 锚点插件 插入锚点（也有叫书签的）
3.autolink 自动连接 自动创建超链接
4.autoresize 编辑器自适应 自动调整Tinymce大小以适应内容
5.autosave 自动存稿 定时自动将编辑内容保存到浏览器本地存储中（Local Storage）
6.bbcode 通过使用类似[b]这样的bbcode转换为html的strong标签显示
7.charmap 特殊字符插件 在tinymce中插入特殊字符
8.code 编辑源码 编辑内容生成的HTML源码
9.codesample 代码示例 提供代码高亮功能用于在内容区展示程序源代码。
10.directionality 文字方向，可以设置从左到右或者从右到左
11.emoticons 表情插件 在内容区插入unicode字符表情
12.fullpage 文档属性 编辑元数据和文档属性，包含title，keywords，description和文档编码charset
13.fullscreen 全屏 将编辑器铺满当前窗口大小。
14.help 帮助 打开使用帮助窗口
15.hr 水平分割线 实际上就是插入一个hr标签。
16.image 插入编辑图片
17.imagetools 图片编辑器 内容区对图片进行简单编辑的快捷菜单
18.importcss 将class加入格式下拉菜单中 对选中的文字添加类名样式
19.insertdatetime 插入当前日期时间 可以自定义插入的日期时间格式
20.legacyoutput 输出html4
21.link 超链接
22.lists 列表插件 设置有序列表和无序列表
23.media 插入编辑媒体 插入H5的audio和video标签
24.nonbreaking 插入不间断空格
25.noneditable 不可编辑元素 将带有 mceNonEditable类的内容设为不可编辑（但可以删掉） 适合做模板
26.pagebreak 插入分页符 插入特定的分页符，用于使用CMS系统时将内容拆分为数个页面。
27.paste 粘贴插件 用于从Word复制和粘贴内容的标准版功能。
28.preview 预览 在弹出的拟态窗口中预览当前编辑区的内容
29.print 打印 打印当前编辑区的内容
30.quickbars 快速工具栏 在光标当前位置出现的快速工具栏（快速选择、快速插入图像表格等）
31.save 保存 在工具栏添加一个保存提交按钮 在工具栏添加了一个保存提交按钮，点击它将提交编辑器所在的表单。
32.searchreplace 查找替换 查找替换编辑区的内容
33.spellchecker 拼写检查 启用TinyMCE的拼写检查功能 https://www.tiny.cloud/docs/plugins/spellchecker/
34.tabfocus tab切入切出 按tab切入切出TinyMCE
35.table 表格插件 提供插入及编辑表格的能力
36.template 内容模板 该插件实现了自定义内容模板。
37.textcolor 文字颜色（5.0版本已集成） https://www.tiny.cloud/docs/plugins/textcolor/
38.textpattern 快速排版 （类似markdown） 匹配文本中的特殊文本标记，并对其执行格式化或执行编辑器命令
39.toc 目录生成器 根据当前内容生成目录
40.visualblocks 显示块元素范围 汉化包中翻译为显示区块边框
41.visualchars 显示不可见字符
42.wordcount 字数统计 统计当前内容区文字个数
...