zoukankan      html  css  js  c++  java
  • vue项目使用tinymce 适用于5.0版本

    1.安装tinymce包

    npm install tinymce -S 
    npm install @tinymce/tinymce-vue -S

    2.从node_modules/tinymce目录中将skins和plugins文件复制出来,在static目录创建了一个tinymce文件夹,然后将复制出来的文件放在tinymce里。

    langs为下载的语言包

     3.组件中引入tinymc

    import tinymce from 'tinymce';
    import Editor from '@tinymce/tinymce-vue';
    import 'tinymce/themes/silver';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/link';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/table';
    import 'tinymce/plugins/lists';
    import 'tinymce/plugins/wordcount';
    import 'tinymce/plugins/colorpicker';
    import 'tinymce/plugins/textcolor';
    import 'tinymce/icons/default'

    4.配置int

    //powerpaste插件为tinymce的收费插件,下载之后放入static/tinymce/plugins文件夹
    //该插件作用为复制word文档时批量上传图片,不需要的可以不要

    props: {
    //传入一个value,使组件支持v-model绑定 value: { type: String, default: '' }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default:'lists image table wordcount powerpaste code'//插件 }, toolbar: { type: [String, Array], //菜单 default:'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat' } }, data() { return { //初始化配置 init: { language_url: 'tinymce/langs/zh_CN.js', //如果语言包不存在,指定一个语言包路径 language: 'zh_CN', //语言 skin_url: 'tinymce/skins/ui/oxide', content_css: 'tinymce/skins/content/default/content.css', height: '500px', selector: 'textarea', // change this value according to your HTML plugins: this.plugins, //插件 //以下为powerpaste插件配置 convert_urls: false, external_plugins: { powerpaste: `/tinymce/plugins/powerpaste/plugin.min.js` // 注意这里路径一定要写对!!!一定要写对 然后在puligins里添加 }, end_container_on_empty_block: true, powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear,效果自行切换对比 powerpaste_html_import: 'propmt',// propmt, merge, clear powerpaste_allow_local_images: true, paste_data_images: true, //以上为powerpaste插件配置 toolbar: this.toolbar, //工具栏 branding: false, //技术支持(Powered by Tiny || 由Tiny驱动) menubar: true, //菜单栏 theme: 'silver', //主题 //此处为图片上传处理函数,这个直接用了base64的图片形式上传图片, //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler images_upload_handler: (blobInfo, success, failure) => { console.log(blobInfo, success, failure) } }, }; },
  • 相关阅读:
    [Linux]调整swap
    [Linux]mysql错误总结-ERROR 1067 (42000): Invalid default value for TIMESTAMP
    Canvas动画:地球绕着太阳转
    50个好用的前端框架,建议收藏!
    flex布局属性说明
    纯CSS绘制的图形一览
    深入理解CSS盒模型(转)
    JS的防抖与节流学习笔记
    应用八:Vue之在nginx下的部署实践
    css元素居中的几种方式
  • 原文地址:https://www.cnblogs.com/zpfqi/p/14928029.html
Copyright © 2011-2022 走看看