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) } }, }; },
  • 相关阅读:
    字节
    服务器每个网站占用资源
    in exists 条件查询
    NUnit2.0详细使用方法
    敏捷方法之极限编程(XP)和 Scrum区别
    学习内容及计划
    关于查看网页源文件不显示源代码(打开的是桌面文件夹)的问题
    用JS取float型 小数点 后两位
    [转]什么是CMMI?
    六月新版微软一站式示例代码库发布 新增20个Windows示例代码
  • 原文地址:https://www.cnblogs.com/zpfqi/p/14928029.html
Copyright © 2011-2022 走看看