精华内容
下载资源
问答
  • 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-10-16 15:42:21
    富文本编辑器,由于现在官网不在做更新,开发者也不容易找到,为了开发者能够找得到该富文本编辑器~
  • Vue添加富文本编辑器

    2021-05-13 18:56:55
    Vue添加富文本编辑器1 安装 vue2-editor2 引入方式1 全局引入2 局部引入3 回显数据方式方式 1 安装 vue2-editor npm install vue2-editor 如报以下错误则需要以管理身份运行cmd窗口,且要切换到项目文件目录内才能...

    1 安装 vue2-editor

    npm install vue2-editor
    

    如报以下错误则需要以管理身份运行cmd窗口,且要切换到项目文件目录内才能运行 npm命令

    Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\npm_cache\_cacache\tmp\1a0eb15e'
    

    2 引入方式

    1 全局引入

    1.引入

    import Vue from 'vue'
    import Vue2Editor from "vue2-editor"
    

    2.注册

    Vue.use(Vue2Editor);
    

    2 局部引入

    1.引入

    import { VueEditor } from "vue2-editor"
    

    2.注册

    	components:{
    				VueEditor
    		},
    

    3 回显数据方式方式

    富文本框存入数据库的数据是html标签所以回显数据时需要放入v-html="scope.row.description"标签内解析

    	<el-table-column type="expand">
    					<template v-slot="scope">
    						<div v-html="scope.row.description"></div>
    					</template>
    				</el-table-column>
    
    展开全文
  • 基于vue2.0 开发的 富文本编辑器,比之前的ueditor好看又好用,安装需要执行 npm install --save vue2-editor <vue-editor v-model="content"></vue-editor> import { VueEditor } from 'vue2-editor' 即可
  • Vue使用富文本编辑器

    千次阅读 2018-11-21 11:15:15
    本人用vue使用富文本编辑器踩了很多坑,特记下供大家借鉴。 一.选取编辑器 刚开始使用的是kindeditor,在npm社区中找到了适用于vue的版本vue-kindeditor。存在如下缺陷:文档不全、网上资料不全、npm社区实例过于...

    在这里插入图片描述
    本人用vue使用富文本编辑器踩了很多坑,特记下供大家借鉴。

    一.选取编辑器

    刚开始使用的是kindeditor,在npm社区中找到了适用于vue的版本vue-kindeditor。存在如下缺陷:文档不全、网上资料不全、npm社区实例过于简单、上传图片不能控制图片尺寸。

    最终换用了wangEditor,优点:文档齐全(有具体vue用法实例)、网上资料多、上传图片可以控制尺寸。

    个人推荐wangEditor,官网wangEditor - 轻量级web富文本编辑器

    二:实例代码

    前端vue

    html:
    <div class="ArticleDetail">
      <div ref="editor" style="text-align:left"></div>
    </div>
    

    js:

    <script>
      import axios from 'axios';
      import {Loading} from 'element-ui'
      import E from 'wangeditor'
      var editor;
    
      export default {
        name: "WriteArticle",
        data: function () {
          return {
            Title:'',
            Content:''
          }
        },
        mounted:function(){
          var That = this;
          editor = new E(this.$refs.editor);
          editor.customConfig = {
            onchange:function(html){
              That.Content = html
            },
            uploadImgServer: '/api/UploadImg', // 上传图片到服务器
            uploadFileName : 'Content', //后端使用这个字段获取图片信息
            uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
          } 
          editor.create()
        }
      }
    </script>
    

    后端node.js

    Express.post('/UploadImg',function (Request,Response) {
      var From = new Formidable.IncomingForm();
      //设置保存 文件路径
      var TargetFile = Path.join(__dirname, './Public/');
      From.uploadDir = TargetFile;
    
      From.parse(Request, function (err, fields, files) {
        if (err) throw err;
        var FilePath = files.Content.path;    //此content由前端uploadFileName设置
        var NewPath = Path.join(Path.dirname(FilePath), files.Content.name);
        FS.rename(FilePath, NewPath, function (err) {
          if (err) throw err;
          var MyJson = {
            errno: 0,
            data:['http://localhost:8888/' + files.Content.name]
          };
          Response.json(MyJson);
        });
      });
    });
    

    三:代码高亮

    用了wangEditor才发现,3.0版的不支持代码高亮。可是我的应用场景是我的博客,必须要有代码高亮功能,无奈换掉编辑器。

    经过一番对比又选了一个叫mavon-editor的基于vue实现的MakeDown编辑器。好处是使用真滴方便,而且可以与别的MarkDown编辑器实现直接复制文本。Github地址如下hinesboy/mavonEditor,按文档操作即可

    需要注意的地方是一般使用富文本的都是管理端,客户端拿到MarkDown格式的数据需要使用maked组件转成html格式的数据来展示。客户端还需要引用一个样式如下

    <link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">
    

    还需要在展示数据的容器上加上一个class,如:

    <div class="markdown-body" v-html="Article.Content">{{ Article.Content }}</div>
    
    展开全文
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • Vue实现富文本编辑器

    2020-04-02 21:32:35
    Vue实现富文本编辑器 安装 npm install vue-quill-editor --save 引入 在项目需要使用富文本编辑器的文件中引入组件 import { quillEditor } from “vue-quill-editor”; 使用 <template> <div class=...

    Vue实现富文本编辑器

    安装

    npm install vue-quill-editor --save

    引入

    在项目需要使用富文本编辑器的文件中引入组件
    import { quillEditor } from “vue-quill-editor”;

    使用

    <template>
      <div class="dashboard-container">
        <div class="app-container">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="收件人">
              <el-input v-model="form.name" style="width:50%;" />
            </el-form-item>
            <el-form-item label="主题">
              <el-input v-model="form.theme" style="width:50%;" />
            </el-form-item>
            <el-form-item>
              <el-card style="height: 610px;">
                <quill-editor
                  v-model="form.content"
                  ref="myQuillEditor"
                  style="height: 500px;"
                  :options="editorOption"
                ></quill-editor>
              </el-card>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即发送</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <script lang="ts">
    import {  quillEditor } from "vue-quill-editor";
    import { Component, Vue, Watch } from "vue-property-decorator";
    @Component({
      name: "email",
      components: {
        quillEditor
      }
    })
    export default class extends Vue {
      private editorOption: any = {};
      private form: any = {
        name: "",
        theme: "",
        content: ""
      };
      private async onsubmit() {}
    }
    </script>
    

    效果

    效果图

    注意

    若你项目中使用的是ts,在安装命令完成后,引入过程,会报错。
    在这里插入图片描述
    此时应该找到项目中的shims.d.ts文件,加入declare module ‘vue-quill-editor’
    则解决问题。
    在这里插入图片描述

    展开全文
  • vue使用富文本编辑器

    2021-07-30 17:09:11
    vue-富文本编辑器 Vue-Quill-Editor使用 官网文档,可以参照文档进行使用https://www.kancloud.cn/liuwave/quill/1434140 简单的使用: 首先安装依赖: npm install vue-quill-editor --save 然后可以在全局挂载...
  • vue2.0富文本编辑器.zip

    2019-08-22 16:00:41
    vue中使用富文本编辑器,使用插件上图,视频,查看源代码和编写原代码
  • vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor、tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享一下~ 按照下面步骤即可 前言 ...
  • vue WangEditor 富文本编辑器config https://github.com/jiangyoucai/vue-editor editor.config.uploadImgUrl = `${apiHost}/uploadimg/` // 图片上传 editor.config.uploadImgFileName = 'files' //后台代码接收...
  • vue富文本编辑器

    2019-07-30 17:17:13
    Vue 项目中引入 tinymce 富文本编辑器 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: ...
  • Vue-html5-editor是一个Vue富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.
  • vue实现富文本编辑器(附图)

    千次阅读 2019-09-15 22:56:00
    工作项目中涉及到富文本编辑器的使用,这里我使用Vue-Quill-Editor插件实现了一个基本具备设计图上功能的编辑器。 下载Vue-Quill-Editor npm install vue-quill-editor --save 安装 vue-quill-editor 插件。 ...
  • vue富文本编辑器:集成了网上集中富文本编辑器
  • vue集成富文本编辑器froala 编辑器风格 风格是选择富文本编辑器的一个重要因素,所以先给你看下整体风格,不喜欢……。 官网传送门: 项目配置 vue项目配置传送门 看到这里你肯定想都是官方文档要你有何用,...
  • Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

    万次阅读 热门讨论 2018-09-13 10:03:10
    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 ...
  • vue cli 富文本编辑器

    多人点赞 热门讨论 2020-06-22 21:02:16
    安装富文本 npm install vue-quill-editor --save 在main.js中引入 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css'...
  • let callbacks = [] function loadedTinymce() { return window.tinymce } const dynamicLoadScript = (src, callback) => { const existingScript = document.getElementById(src) const cb = callback || ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,341
精华内容 3,336
关键字:

vue3富文本编辑器

vue 订阅