精华内容
下载资源
问答
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • 一、复制文本编辑器组件到项目文件夹里面 二、在build下的webpack.dev.conf.js里面添加 templateParameters: { BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory } 三、在项目的index...

    一、复制文本编辑器组件到项目文件夹里面
    在这里插入图片描述
    在这里插入图片描述
    二、在build下的webpack.dev.conf.js里面添加

     templateParameters: {
            BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
         }
    

    在这里插入图片描述
    三、在项目的index.html引入

      <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
      <script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
    

    四、在相关vue页面引入组件并声明组件

    import Tinymce from '@/components/Tinymce'
    

    在这里插入图片描述
    五、在页面使用标签
    在这里插入图片描述

    注意:在三中<%= BASE_URL %>不要少加了%,否则无法使用

    展开全文
  • vue引入 npm install @packy-tang/vue-tinymce npm install tinymce 复制文件夹 复制node_modules下tinymce到src/assets下(如果有public,也可以选择public) 复制完这个文件夹,这个插件就可以删除了 npm uninstall...

    vue引入

    npm install @tinymce/tinymce-vue
    npm install tinymce
    

    复制文件夹

    复制node_modules下tinymce到src/assets下(如果有public,也可以选择public)
    复制完这个文件夹,这个插件就可以删除了
    npm uninstall tinymce
    

    下载语言包

    官方链接

    选择Chinese (China)	进行下载
    

    在这里插入图片描述

    assets/tinymce中新建目录langs,将语言包zh_CN.js放到该文件夹下
    

    在这里插入图片描述

    index.ejs或者index.html body中添加
    <script type="text/javascript" src="/assets/tinymce/tinymce.min.js"></script>
    

    在这里插入图片描述

    拷贝目录

    使用拷贝插件,将assets/tinymce拷贝到dist目录下,这么做的原因是因为上面配置了tinymce文件夹位置,
    加载资源文件文件时,会访问ip地址:端口号/assets/tinymce/。。。
    所以需要把tinymce拷贝到dist目录下
    npm install copy-webpack-plugin@4.0.1 --save
    webpack.dev.config.js、webpack.prod.config.js
    
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const path = require('path');
    
    plugins: [
    	new CopyWebpackPlugin(
         [
           {
             from: path.join(__dirname, 'src/assets/tinymce'),
             to: path.join(__dirname, 'dist/assets/tinymce')
           }
         ],
         {
           copyUnmodified: true
         }
       ),
    ]
    

    新建editor.vue

    <template>
      <div>
        <vue-tinymce
          ref="tinymce"
          @input="$emit('input', content)"
          v-model="content"
          :init="setting">
        </vue-tinymce>
      </div>
    </template>
    <script>
      import vueTinymce from '@tinymce/tinymce-vue'
      export default {
        components: {
          vueTinymce
        },
        props: {
          value: {
            type: String,
            default: ''
          },
          plugins: {
            type: [String, Array],
            default: "lists image media table wordcount code fullscreen help  toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor"
          },
          toolbar: {
            type: [String, Array],
            default(){
              return [
                'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat | code  bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap  pastetext print preview hr',
              ]
            }
          }
        },
        data() {
          return {
            content: this.value,
            setting: {
              height: 500,
              statusbar: false, // 隐藏编辑器底部的状态栏
              language: "zh_CN",//语言
              plugins: this.plugins,//插件
              toolbar: this.toolbar,//工具栏
              paste_data_images: true, // 允许粘贴图像
              images_upload_handler: (blobInfo, success, failure) => {
                const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                success(img)
              },
            }
          }
        },
        watch: {
          value(val) {
            if (val !== this.content) {
              this.content = val;
            }
          }
        }
      }
    </script>
    

    页面中使用

    <template>
    	<editor v-model="content" ref="editor"></editor>
    </template>
    <script>
    	import Editor from '../_comps/editor'
      export default {
        components: {
          Editor
        },
        data() {
    		return {
    			content:''
    		}
        }
    </script>
    

    自定义图片上传功能

    images_upload_handler: (blobInfo, success, failure) => this.uploadImg(blobInfo, success, failure)
    
    methods: {
    	async uploadImg(blobInfo, success, failure) {
    	  let formData = new FormData();
    	  formData.append('file', blobInfo.blob(), blobInfo.filename());
    	  // 发送ajax返回的url
    	  let uri= await this.uploadFile(formData);
    	  success(uri)
    	},
    	uploadFile(formData) {
    	  return axios.post("/api/editor/upload", formData, {
    	    headers: {
    	      'Content-Type': 'multipart/form-data'
    	    }
    	  }).then(r => {
    	    let data = r.data;
    	    return data
    	  });
    	},
    }
    

    上传视频

    // 想要哪一个图标提供本地文件选择功能,参数可为media(媒体)、image(图片)、file(文件)
    file_picker_types: 'media',
    file_picker_callback: (cb, value, meta) => this.uploadMedia(cb, value, meta)
    
    methods: {
    	uploadMedia(cb, value, meta) {
            //当点击meidia图标上传时,判断meta.filetype == 'media'有必要,因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
            if (meta.filetype === 'media') {
              //创建一个隐藏的type=file的文件选择input
              let input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.onchange = (e) => {
                this.upload(e.currentTarget.files[0], cb)
              }
              //触发点击
              input.click();
            }
          },
          async upload(file, cb) {
            let formData = new FormData();
            formData.append('file', file);
            let uri= await this.uploadFile(formData);
            //cb()回调函数,将mediaLocation显示在弹框输入框中
            cb(uri, {title: file.name});
          },
          //uploadFile同上
    }
    

    关于富文本编辑器内视频不能预览,解决办法暂时只能是通过修改源码的方式,请替换tinymce/plugins/media/plugin.min.js下载链接:https://download.csdn.net/download/qq_35134375/12998656

    文件链接

    https://download.csdn.net/download/qq_35134375/12998767

    展开全文
  • Vue tinymce富文本编辑器整合

    万次阅读 多人点赞 2018-10-23 17:54:57
    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…) 下面开始工作: 插件安装 tinymce官方提供...

    由于该编辑器升级到了5.0版本,会导致下文中的某些文件找不到的情况,但是封装思路是相同的,如需继续使用请使用下面的版本再次尝试
    “@tinymce/tinymce-vue”: “^1.1.0”
    “tinymce”: “^4.8.5”

    vue cli 3 + tinymce5.0版本整合参考:点击前往

    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置
    来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…)
    在这里插入图片描述
    下面开始工作:

    插件安装

    tinymce官方提供了一个vue的组件tinymce-vue
    如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,像我这种懒的注册或者购买的直接下载tinymce,自力更生

    安装tinymce-vue

    npm install @tinymce/tinymce-vue -S
    

    下载tinymce

    npm install tinymce -S
    

    下载的时候可以先在static下面建个目录tinymce,下载tinymce完成后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录下面,
    在这里插入图片描述

    下载中文语言包

    tinymce提供了很多的语言包,这里我们下载中文语言包
    在这里插入图片描述
    下载完成后将其解压到static\tinymce目录下面,最终目录结构形式如下
    在这里插入图片描述

    初始化

    引入基本文件

    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/modern/theme'
    

    components中注册tinymce-vue才能使用

    <editor id="tinymce" v-model="value" :init="init"></editor>
    

    初始化配置项,具体参考官网文档,这里说几个重要的

    init: {
    	language_url: '/static/tinymce/langs/zh_CN.js',//语言包的路径
    	language: 'zh_CN',//语言
    	skin_url: '/static/tinymce/skins/lightgray',//skin路径
    	height: 300,//编辑器高度
    	branding: false,//是否禁用“Powered by TinyMCE”
    	menubar: false,//顶部菜单栏显示
    }
    

    扩展插件

    默认的编辑器只有基本功能,如果还需要上传图片,插入表格之类的功能就需要添加插件
    如添加上传图片和插入表格的插件

    import 'tinymce/plugins/image'
    import 'tinymce/plugins/table'
    

    引入后还需要再toolbar工具栏上添加相应的按钮

    plugins: 'lists image media table textcolor wordcount contextmenu',
    toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
    

    这里我们一般会再次把它进行封装一下,以便其他地方随时可以引用

    完整代码tinymce-editor.vue

    <template>
      <div class="tinymce-editor">
        <editor v-model="myValue"
          :init="init"
          :disabled="disabled"
          @onClick="onClick">
        </editor>
      </div>
    </template>
    
    <script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/modern/theme'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/textcolor'
    export default {
      components: {
        Editor
      },
      props: {
        //传入一个value,使组件支持v-model绑定
        value: {
          type: String,
          default: ''
        },
        disabled: {
          type: Boolean,
          default: false
        },
        plugins: {
          type: [String, Array],
          default: 'lists image media table textcolor wordcount contextmenu'
        },
        toolbar: {
          type: [String, Array],
          default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
        }
      },
      data() {
        return {
          //初始化配置
          init: {
            language_url: '/static/tinymce/langs/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/static/tinymce/skins/lightgray',
            height: 300,
            plugins: this.plugins,
            toolbar: this.toolbar,
            branding: false,
            menubar: false,
            //此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
            //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
            images_upload_handler: (blobInfo, success, failure) => {
              const img = 'data:image/jpeg;base64,' + blobInfo.base64()
              success(img)
            }
          },
          myValue: this.value
        }
      },
      mounted() {
        tinymce.init({})
      },
      methods: {
        //添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        //需要什么事件可以自己增加
        onClick(e) {
          this.$emit('onClick', e, tinymce)
        },
        //可以添加一些自己的自定义事件,如清空内容
        clear() {
          this.myValue = ''
        }
      },
      watch: {
        value(newValue) {
          this.myValue = newValue
        },
        myValue(newValue) {
          this.$emit('input', newValue)
        }
      }
    }
    
    </script>
    <style scoped>
    </style>
    
    

    封装后使用

    <template>
      <div>
        {{ msg }}
        <tinymce-editor v-model="msg"
          :disabled="disabled"
          @onClick="onClick"
          ref="editor"></tinymce-editor>
        <button @click="clear">清空内容</button>
        <button @click="disabled = true">禁用</button>
      </div>
    </template>
    
    <script>
    import TinymceEditor from './tinymce-editor'
    export default {
      components: {
        TinymceEditor
      },
      data() {
        return {
          msg: 'Welcome to Use Tinymce Editor',
          disabled: false
        }
      },
      methods: {
        //鼠标单击的事件
        onClick(e, editor) {
          console.log('Element clicked')
          console.log(e)
          console.log(editor)
        },
        //清空内容
        clear() {
          this.$refs.editor.clear()
        }
      }
    }
    </script>
    
    <style scoped>
    </style>
    

    最后来张动态的效果图
    Vue整合tinymce富文本编辑器

    文章参考:

    https://www.cnblogs.com/wisewrong/p/8985471.html

    展开全文
  • Vue项目中整合富文本编辑器

    万次阅读 多人点赞 2020-01-16 18:13:31
    由于项目中要使用富文本编辑器,我在这把一些步骤做一记录,供大家参考。

    写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。

    这博客是对自己学习的一点点总结及记录,如果您对 Java算法 感兴趣,可以关注我的动态,我们一起学习。

    用知识改变命运,让我们的家人过上更好的生活

    由于项目中要使用富文本编辑器,我在这把一些步骤做一记录,供大家参考。


    富文本编辑器
    在这里插入图片描述

    一、在vue中引入tinymce

    npm install @tinymce/tinymce-vue -S
    

    可是一直无法下载成功,我就直接找了资源

    可以直接点这儿下载

    将下载好的 tinymce 脚本库放到你的项目的static目录下面

    在这里插入图片描述

    二、配置HTML变量

    你的项目/build/webpack.dev.conf.js 中添加如下配置:

    templateParameters: {
            BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
      }
    

    目的:为了在html页面中能够使用这里定义的BASE_URL变量
    在这里插入图片描述

    三、引入js脚本

    由于富文本编辑器是第三方提供的,需要把它的脚本引入进来才能使用。

    你的项目/index.html,也就是程序的入口文件中引入js脚本

    <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
    <script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
    

    在这里插入图片描述
    注意:引入的时候会报错,重启项目错误就会消失

    四、引入组件

    src/components/目录下,编写富文本编辑器的组件

    提供了下载地址,资源在CSDN的下载资源里面

    点击我可以下载

    在需要使用到富文本编辑器的页面:

    1. 引入组件
    import Tinymce from '@/components/Tinymce'
    
    1. 注册组件
    components: { Tinymce }
    

    组件模板:

    <tinymce :height="300" v-model="content" id='tinymce'></tinymce>
    

    目前提供了如下几个属性:

    Property Description Type Default
    id Component unique identifier String Default to help you generate a unique id
    value Rich text content String Only monitor changes once
    toolbar Rich text toolbar Array []
    menubar Rich text menubar String ‘file edit insert view format table’
    height Rich text height Number 360
    width Rich text width Number, String /

    由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!

    展开全文
  • 文章目录一、在vue中引入tinymce二、配置HTML变量三、引入js脚本四、引入组件富文本编辑器一、在vue中引入tinymcenpm install @tinymce/tinymce-vue -S将下载好的 tinymce 脚本库放到你的项目的static目录下面二、...
  • 文章目录一、在vue中引入tinymce二、配置HTML变量三、引入js脚本四、引入组件富文本编辑器一、在vue中引入tinymcenpm install @tinymce/tinymce-vue -S将下载好的 tinymce 脚本库放到你的项目的static目录下面二、...
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 详情地址:http://www.wuhancoder.com/blog/v18Myb41ai7uYBM
  • vue整合百度的富文本编辑器材料:vue2.0vue-ueditor-wrap密码:ocd3把下载的压缩包解压 放到你的vue项目的static 里面 并且在里面创建文件夹UEditor在你需要富文本编辑器的页面引入VueUeditorWrap组件...

空空如也

空空如也

1 2 3 4 5
收藏数 97
精华内容 38
关键字:

vue整合富文本编辑器

vue 订阅