ueditor rich text copy and paste word content containing pictures, and supports screenshots or copying and pasting pictures separately

Background The company’s recent upgrade project requires rich text to support the copying and pasting of word content containing multiple pictures. There is no other way. For the sake of user experience, we can only find a solution. Through various data searches, we have sorted out an effective solution for personal testing. Plan: 1. Listen […]

Fabric.js copy-paste elements

Introduction to this article Like + Follow + Collection = Learned What do you consider when you copy an element of fabric? Deep copy the currently selected object and then add it to the canvas? In fact, fabric.js provides a cloning method. There is also this demo in the case of fabric.js official website: Fabric.js […]

Fabric.js copy-paste elements

Introduction to this article Like + Follow + Collection = Learned What do you consider when you copy an element of fabric? Deep copy the currently selected object and then add it to the canvas? In fact, fabric.js provides a cloning method. There is also this demo in the case of fabric.js official website: Fabric.js […]

vue2 uses tinymce rich text editor-image upload, paste image upload to the server

1. Install the tinymce rich text editor plug-in npm i tinymce npm i @tinymce/tinymce-vue 2. Create the Editor.js file to encapsulate the component for use <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 Api from “@/api/typical/typical”; //Introduce the interface import Vue from […]

Use Tinymce in Vue project to solve image upload/paste

Preface Recently, because the backend management side of the company’s project needs to implement an editor function, on the one hand, it can meet the needs of editing various article content, and on the other hand, it needs to edit some course-related introductions by itself, so I spent some time comparing and experiencing some existing […]

Use ckeditor in vue, support wps, word, web page paste

The ckeditor5 official website currently does not support WPS image pasting, but it can be achieved by modifying the source code. <template> <div> <div v-if=”!disabled”> <div id=”toolbar-container”></div> <!– Editor container –> <div id=”editor”> <p>This is the initial editor content.</p> </div> </div> <div class=”look” v-else> <div v-html=”modelData”></div> </div> </div> </template> <script> const ZZ_HTTP = process.env.NODE_ENV === […]

fix: prosemirror adds two extra spaces when paste

bug The project uses prosemirror, and when copying NodeSelection, there will be two more spaces at the end. NodeSelection Selection of prosemirror is an abstract class, which has three subclasses TextSelection most common NodeSelection points to a selection of a single node. For nodes with selectable = true set, click to select NodeSelection. AllSelection Selects […]

Echarts is used in Vue to encapsulate it as a public component (simple copy and paste)

Encapsulating Echarts components in Vue premise Go straight This article uses Vue3 code to demonstrate the same principle as Vue2 Premise Chinese official website: https://echarts.apache.org/zh/index.html npm install Echarts npm install echarts or pnpm install echarts or yarn add echarts Get straight to the point Create the Echarts.vue file with the following code <template> <div :id=”id” […]

vue+editor changes the copy and paste image path to base64 and changes it to the normal path

<template> <div :class=”pointer ? ‘none-pointer’ : ””> <el-upload :action=”uploadUrl” :on-success=”handleUploadSuccess” :on-error=”handleUploadError” name=”file” :show-file-list=”false” :headers=”headers” style=”display: none” ref=”upload” v-if=”this.uploadUrl” > </el-upload> <div class=”editor” ref=”editor” :style=”styles”></div> </div> </template> <script> import Quill from “quill”; import “quill/dist/quill.core.css”; import “quill/dist/quill.snow.css”; import “quill/dist/quill.bubble.css”; import {<!– –> getToken } from “@/utils/auth”; import request from “@/utils/request”; export default {<!– –> name: “Editor”, props: […]