1 Star 0 Fork 4

DJun-小丁/vue3-tinymce

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
docs
.vuepress
assets/images
README.md
example.md
packages/Vue3Tinymce
public/tinymce
src
.gitignore
Dockerfile
LICENSE
README.md
docker-build.sh
index.html
package.json
vite.config.js
yarn.lock
克隆/下载
example.md 3.00 KB
一键复制 编辑 原始数据 按行查看 历史
青山依旧 提交于 4年前 . add docs

使用示例

使用中文

language - 语言 code, language_url - 语言包路径。

vue 脚手架项目可前往官网 下载语言包 放在 pulish/tinymce/langs 中,也可使用该组件语言包 cdn https://unpkg.com/@jsdawn/vue3-tinymce@1.1.6/dist/tinymce/langs/zh_CN.js

const setting = {
    // 以中文简体为例
    language: 'zh_CN',
    language_url: '/tinymce/langs/zh_CN.js',
    ...
}

经典设置

经典设置,包含了大部分可能用到的富文本编辑器功能和插件。

const classic_setting = {
  height: 190,
  toolbar:
    'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
  toolbar_drawer: 'sliding',
  quickbars_selection_toolbar:
    'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
  plugins: 'link image media table lists fullscreen quickbars',
  fontsize_formats: '12px 14px 16px 18px',
  default_link_target: '_blank',
  link_title: false,
  nonbreaking_force_tab: true,
  // 以中文简体为例
  language: 'zh_CN',
  language_url:
    'https://unpkg.com/@jsdawn/vue3-tinymce@1.1.6/dist/tinymce/langs/zh_CN.js'
};

类似掘金设置

类似掘金设置服务 简洁的图文写作,仅包含较常用的文字格式,图片上传,与链接功能。

const juejin_setting = {
  menubar: false,
  height: 190,
  toolbar:
    'bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen',
  plugins: 'codesample link image table lists fullscreen',
  toolbar_mode: 'sliding',
  nonbreaking_force_tab: true,
  link_title: false,
  default_link_target: '_blank',
  content_style: 'body{font-size: 16px}',
  // 自定义 图片上传模式
  custom_images_upload: true,
  images_upload_url: 'your_upload_api_url...',
  custom_images_upload_callback: res => res.url,
  custom_images_upload_param: { id: 'xxxx01', age: 18 }
};
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/djunxp/vue3-tinymce.git
git@gitee.com:djunxp/vue3-tinymce.git
djunxp
vue3-tinymce
vue3-tinymce
master

搜索帮助