Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
tinymces
Advanced tools
Readme
能在vue中以插件的形式使用该组件, 由tinymce移植过来的. 为项目需要, 封装了常用的功能及优化了一些属性值.
图片可调整, 包括旋转, 反转, 大小调整等. 且图片支持上传到七牛或其他存储服务, 请参考文中的示例代码
下载安装
npm i tinymces -S
引用
<template>
<div id="app">
<Tinymces id="dd2" v-model="content" :user_config="userConfig"></Tinymces>
</div>
</template>
import Tinymces from 'tinymces'
export default {
data () {
return {
content: '',
userConfig: {}
}
},
components: {
Tinymces
}
}
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 编辑器唯一id | String | - |
value | 编辑器编译后的值(html) | String | '' |
user_config | 自定义配置参数, user_config会与默认的配置参数进行合并, 想要修改默认的配置参数, 可通过user_config覆盖默认的配置, 具体属性请参考以下默认配置参考 示例 | Object | - |
默认配置参考:
let options = {
selector: '#' + this.id,
skin: false,
height: 550,
toolbar1: 'undo redo formatselect | bold italic forecolor codesample blockquote | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link table image | fullscreen removeformat',
toolbar2: '',
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample',
convert_urls: false,
image_caption: true,
image_description: false,
image_title: true,
images_upload_credentials: true,
menubar: false,
language: 'zh_CN',
language_url: 'https://cdn.jsdelivr.net/npm/tinymces@latest/static/prism/zh_CN.js',
codesample_languages: [
{text: 'Java', value: 'java'},
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
init_instance_callback: that.initEditor,
content_css: [
'https://cdn.jsdelivr.net/npm/tinymces@latest/static/prism/prism.css'
],
paste_retain_style_properties: 'all',
paste_word_valid_elements: '*[*]',
paste_data_images: true,
paste_convert_word_fake_lists: false,
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false
}
名称 | 功能 | 参数 |
---|---|---|
input | 监听编辑器内容被改动的事件 | value, 当前编辑器中内容的 html值 |
save | 当用户使用快捷键触发保存时, 接收回调通知的事件 | value, 当前编辑器中内容的 html值 |
快键键兼容win / mac 系统, 区别在于, mac系统中, ctrl 用 command 键代替
组合按键 | 功能 | 备注 |
---|---|---|
ctrl + s | 触发用户自定义保存事件 | 回调用户自定义的save事件, 示例: <Tinymces id="dd2" @save="customerSave"></Tinymces> |
ctrl + d | 调到最后一行文本 | 无 |
可以通过配置回调函数接收用户点击上传文件事件, 在该事件中, 执行上传与回调通知操作, 就可以实现上传功能
user_config: {
images_upload_handler: function (blobInfo, success, failure) {
let fileName = new Date().getTime()
let observable = qiniu.upload(blobInfo.blob(), fileName, '<YOUR KEY>', {region: <YOUR qiniu region>})
let observer = {
next (res) {
if (res.total.percent === 100) {
// must callback by success function
success('http://ztqiniu.szzt.com.cn/' + fileName)
}
},
error (err) {
failure(err)
}
}
observable.subscribe(observer)
}
}
官方参考文章: https://www.tiny.cloud/docs/configure/localization/#language
当前默认为中文, 需要切换成英文, 则需要在 user_config 中, 添加 language
和 language_url
属性, 覆盖中文配置
求施舍一杯2.88块的咖啡...
FAQs
A vue component by Tinymce
The npm package tinymces receives a total of 0 weekly downloads. As such, tinymces popularity was classified as not popular.
We found that tinymces demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.