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) } }, }; },
  • 相关阅读:
    MVC页面打印成pdf插件Rotativa
    lambda表达式嵌套
    MVC+EF五种条件查询获取数据列表方式
    自己写的通用分页存储过程
    Llinux命令大全之软件管理命令
    .net开发 chrome核心浏览器组件
    常用的SQL日期操作
    Linux各版本介绍说明
    大数据环境搭建
    markdown语法链接新页面打开
  • 原文地址:https://www.cnblogs.com/zpfqi/p/14928029.html
Copyright © 2011-2022 走看看