收集不同富文本编辑器的使用（vue3版本）

最新推荐文章于 2024-05-13 11:57:55 发布
最新推荐文章于 2024-05-13 11:57:55 发布
阅读量860 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiCong_Ling/article/details/134333155
版权

文章目录

  • 一、ueditor（百度富文本编辑器）
    • 安装
    • 使用并二次封装组件
  • 二、KindEditor
    • 下载文件
    • 新建组件及使用

一、ueditor（百度富文本编辑器）

参考 ueditor 和 vue-ueditor-wrap
这里直接使用 封装好的vue组件 vue-ueditor-wrap vue3版本

安装

npm i vue-ueditor-wrap@3.x -S
or
yarn add vue-ueditor-wrap@3.x

使用并二次封装组件

  • main.ts
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from '@/App/index.vue';
const app = createApp(App).use(VueUeditorWrap)
  • ueditor/index.vue
<template>
  <vue-ueditor-wrap
    v-model="content"
    :config="VueUeditorWrapConfig"
    :editor-id="editorId"
  ></vue-ueditor-wrap>
</template>
<script>
import { default as VueUeditorWrapConfig } from "./ueditor.js";
import { RandomNumber } from '@/utils'
export default {
  props: {
    value: [String],
    property: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  model: {
    prop: "value", // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
    event: "change", // 指定要触发的事件名字，将被用于 $emit
  },
  data() {
    return {
      show: false,
      VueUeditorWrapConfig,
      isPosting: false,
      edit_show: true,
      index: 0,
      editorId: 'editor' + RandomNumber()
    };
  },
  computed: {
    content: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="less" scoped>
/* 弹框输入框长度 */
.lengthWidth {
  width: 80%;
}

.editor_if {
  width: 100%;
  height: 400px;
}

.edui1 {
  z-index: 90 !important;
}
</style>
  • ueditor/ueditor.js
// let env = process.env.NODE_ENV || ''
let ueditorPath = ''
// if (env === 'development') {
//   ueditorPath = '/static/UEditor/'
// } else if (env === 'production') {
//   ueditorPath = '/static/UEditor/'
// } else {
//   ueditorPath = '/static/UEditor/'
// }
ueditorPath = '/ueditor/'
export default {
  UEDITOR_HOME_URL: ueditorPath,
  maximumWords: 1000 * 100,
  // toolbars: [
  //   [
  //     'source', '|', 'undo', 'redo', '|',
  //     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  //     'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  //     'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  //     'directionalityltr', 'directionalityrtl', 'indent', '|',
  //     'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  //     'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  //     'horizontal', 'date', 'time',
  //     'inserttable', 'simpleupload', 'preview',
  //   ]
  // ],
  toolbars: [
    [
      'source', '|', 'undo', 'redo', '|',
      'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
      'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
      'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
      'directionalityltr', 'directionalityrtl', 'indent', '|',
      'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
      'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
      'horizontal'
    ]
  ],
  enableAutoSave: false,
  elementPathEnabled: false,
  disabledTableInTable: false,
  serverUrl: '' // 暂无接口 APP_CONFIG.baseURL + '/file/upload'
}

使用上述定义组件即可显示下图效果
在这里插入图片描述

二、KindEditor

下载文件

kindeditor

放在本地静态目录

新建组件及使用

在组件文件夹内新建以下文件夹及文件

  • kind-editor/index.vue
<template>
  <div class="kindeditor">
    <textarea :id="id" name="content" v-model="state.outContent"></textarea>
  </div>
</template>
  
<script lang="ts">

import { defineComponent, onMounted, reactive, watch } from "vue"
import '@public/kind-editor/themes/default/default.css'
import '@public/kind-editor/kindeditor-all.js'
import '@public/kind-editor/lang/zh-CN.js'
import '@public/kind-editor/lang/en.js'
export default defineComponent({
  name: 'kind-editor',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    minWidth: {
      type: Number,
      default: 650
    },
    minHeight: {
      type: Number,
      default: 100
    },
    items: {
      type: Array,
      default: function () {
        return [
          'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste',
          'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
          'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
          'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
          'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
          'media', 'insertfile', 'table', 'hr', 'pagebreak',
          'anchor', 'link', 'unlink',
        ]
      }
    },
    noDisableItems: {
      type: Array,
      default: function () {
        return ['source', 'fullscreen']
      }
    },
    filterMode: {
      type: Boolean,
      default: true
    },
    htmlTags: {
      type: Object,
      default: function () {
        return {
          font: ['color', 'size', 'face', '.background-color'],
          span: ['style'],
          div: ['class', 'align', 'style'],
          table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
          'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
          a: ['class', 'href', 'target', 'name', 'style'],
          embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
            'style', 'align', 'allowscriptaccess', '/'],
          img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
          hr: ['class', '/'],
          br: ['/'],
          'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
          'tbody,tr,strong,b,sub,sup,em,i,u,strike': []
        }
      }
    },
    wellFormatMode: {
      type: Boolean,
      default: true
    },
    resizeType: {
      type: Number,
      default: 2
    },
    themeType: {
      type: String,
      default: 'default'
    },
    langType: {
      type: String,
      default: 'en'
    },
    designMode: {
      type: Boolean,
      default: true
    },
    fullscreenMode: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String
    },
    themesPath: {
      type: String
    },
    pluginsPath: {
      type: String,
      default: ''
    },
    langPath: {
      type: String
    },
    minChangeSize: {
      type: Number,
      default: 5
    },
    loadStyleMode: {
      type: Boolean,
      default: true
    },
    urlType: {
      type: String,
      default: ''
    },
    newlineTag: {
      type: String,
      default: 'p'
    },
    pasteType: {
      type: Number,
      default: 2
    },
    dialogAlignType: {
      type: String,
      default: 'page'
    },
    shadowMode: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 811213
    },
    useContextmenu: {
      type: Boolean,
      default: true
    },
    syncType: {
      type: String,
      default: 'form'
    },
    indentChar: {
      type: String,
      default: '\t'
    },
    cssPath: {
      type: [String, Array]
    },
    cssData: {
      type: String
    },
    bodyClass: {
      type: String,
      default: 'ke-content'
    },
    colorTable: {
      type: Array
    },
    afterCreate: {
      type: Function
    },
    afterChange: {
      type: Function
    },
    afterTab: {
      type: Function
    },
    afterFocus: {
      type: Function
    },
    afterBlur: {
      type: Function
    },
    afterUpload: {
      type: Function
    },
    uploadJson: {
      type: String
    },
    fileManagerJson: {
      type: Function
    },
    allowPreviewEmoticons: {
      type: Boolean,
      default: true
    },
    allowImageUpload: {
      type: Boolean,
      default: true
    },
    allowFlashUpload: {
      type: Boolean,
      default: true
    },
    allowMediaUpload: {
      type: Boolean,
      default: true
    },
    allowFileUpload: {
      type: Boolean,
      default: true
    },
    allowFileManager: {
      type: Boolean,
      default: false
    },
    fontSizeTable: {
      type: Array,
      default: function () {
        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
      }
    },
    imageTabIndex: {
      type: Number,
      default: 0
    },
    formatUploadUrl: {
      type: Boolean,
      default: true
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false
    },
    extraFileUploadParams: {
      type: Array,
      default: function () {
        return []
      }
    },
    filePostName: {
      type: String,
      default: 'imgFile'
    },
    fillDescAfterUploadImage: {
      type: Boolean,
      default: false
    },
    afterSelectFile: {
      type: Function
    },
    pagebreakHtml: {
      type: String,
      default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />'
    },
    allowImageRemote: {
      type: Boolean,
      default: true
    },
    autoHeightMode: {
      type: Boolean,
      default: false
    },
    fixToolBar: {
      type: Boolean,
      default: false
    },
    tabIndex: {
      type: Number
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      editor: {} as any,
      outContent: props.modelValue
    })
    console.log('state_state', state)
    watch(() => props.modelValue, (val: any) => {
      state.editor && val !== state.outContent && state.editor.html(val)
    })
    watch(() => state.outContent, (val: any) => {
      emit('update:modelValue', val)
    })
    onMounted(async() => {
      state.editor = (window as any).KindEditor.create('#' + props.id, {
        width: props.width,
        height: props.height,
        minWidth: props.minWidth,
        minHeight: props.minHeight,
        items: props.items,
        noDisableItems: props.noDisableItems,
        filterMode: props.filterMode,
        htmlTags: props.htmlTags,
        wellFormatMode: props.wellFormatMode,
        resizeType: props.resizeType,
        themeType: props.themeType,
        langType: props.langType,
        designMode: props.designMode,
        fullscreenMode: props.fullscreenMode,
        basePath: props.basePath,
        themesPath: props.cssPath,
        pluginsPath: props.pluginsPath,
        langPath: props.langPath,
        minChangeSize: props.minChangeSize,
        loadStyleMode: props.loadStyleMode,
        urlType: props.urlType,
        newlineTag: props.newlineTag,
        pasteType: props.pasteType,
        dialogAlignType: props.dialogAlignType,
        shadowMode: props.shadowMode,
        zIndex: props.zIndex,
        useContextmenu: props.useContextmenu,
        syncType: props.syncType,
        indentChar: props.indentChar,
        cssPath: props.cssPath,
        cssData: props.cssData,
        bodyClass: props.bodyClass,
        colorTable: props.colorTable,
        afterCreate: props.afterCreate,
        afterChange: function () {
          props.afterChange
          state.outContent = this.html()
        },
        afterTab: props.afterTab,
        afterFocus: props.afterFocus,
        afterBlur: props.afterBlur,
        afterUpload: props.afterUpload,
        uploadJson: props.uploadJson,
        fileManagerJson: props.fileManagerJson,
        allowPreviewEmoticons: props.allowPreviewEmoticons,
        allowImageUpload: props.allowImageUpload,
        allowFlashUpload: props.allowFlashUpload,
        allowMediaUpload: props.allowMediaUpload,
        allowFileUpload: props.allowFileUpload,
        allowFileManager: props.allowFileManager,
        fontSizeTable: props.fontSizeTable,
        imageTabIndex: props.imageTabIndex,
        formatUploadUrl: props.formatUploadUrl,
        fullscreenShortcut: props.fullscreenShortcut,
        extraFileUploadParams: props.extraFileUploadParams,
        filePostName: props.filePostName,
        fillDescAfterUploadImage: props.fillDescAfterUploadImage,
        afterSelectFile: props.afterSelectFile,
        pagebreakHtml: props.pagebreakHtml,
        allowImageRemote: props.allowImageRemote,
        autoHeightMode: props.autoHeightMode,
        fixToolBar: props.fixToolBar,
        tabIndex: props.tabIndex
      })
    })
    return {
      state

    }
  }

})
</script>
  
  <style>
</style>
  • 使用
<KindEditor id="KindEditor012" />

import KindEditor from '@/component/kind-editor/index.vue'
export default defineComponent({
  components: {
    KindEditor
  },
  setup() {
  	return {
  		
  	}
  }
  • 效果
    在这里插入图片描述
失眠时间
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一款纯VUE3 开发的富文本编辑器 editor
10-18
这款vue 编辑是由vue3 开发的，不存在第三方引用，拿来即可用不用添加任何外部图片js,组件，且二次开发也方便 版本为vue-property-decorator
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)
weixin_34358092的博客
05-18 257
这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下,在导入之前要先修改一下ueditor的jar包中的bug,这个可以参考这里点击打开链接 接着就是配置jsp目录下的config.json文件了,让它能适应我们的项目,配置内容如下:...
vue3 + UEditor puls富文本编辑器
最新发布
m0_63811812的博客
05-13 1115
vue3 + UEditor puls富文本编辑器
vue使用富文本编辑器vue-quill-editor
m0_73248604的博客
08-31 1万+
（1），安装插件（2），在文件中导入包（3），在原本的配置项上添加（与toolbar平级进行配置）// 调整图片大小},//在quill中使用toolbar: {// 方法中使用},// 样式/* 自定义toobar样式设计 *//* 工作汇报弹窗 */
百度富文本编辑器UEditor配置及功能实现详解
weixin_52041354的博客
11-11 9532
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */$preg = '/(\s+src\s?// 匹配所有的img。"wordActionName": "wordupload", /* 执行上传视频的action名称 */"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
UEditor富文本编辑器
Wolf__king的博客
05-06 4637
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出，可以帮助不少网站开发者在开发富文本编辑器所遇到的难题，节约开发者因开发富文本编辑器所需要的大量时间，有效降低了企业的开发成本。
vue-element-admin-4.4.0.tar.gz
03-01
9. **富文本编辑器（Rich Text Editor）**：如使用TinyMCE或Quill，提供内容编辑功能。 10. **异常处理（Exception Handling）**：包含404页面未找到、500服务器错误等异常页面。 Vue-element-admin 4.4.0 的压缩包...
awesome-wysiwyg：精选的所见即所得编辑器的精选列表
01-31
3. **富文本编辑器**：富文本编辑器如Draft.js、Prosemirror和Quill等，不仅提供基本的文本编辑功能，还支持复杂的文档结构和样式，能够创建出类似Word文档的效果。 4. **Markdown支持的编辑器**：有些开发者偏爱...
kindeditor-form-editor
02-24
KindEditor是一款开源的JavaScript富文本编辑器，支持多种浏览器环境，如Chrome、Firefox、Safari、IE等。它提供了基本的文字编辑功能，如字体、字号、颜色调整，以及图片上传、链接插入、视频嵌入等多媒体处理能力...
Textarea在光标停留处插入文字
05-28
总的来说，了解如何在`Textarea`中动态插入文字，对于开发富文本编辑器、在线代码编辑器等交互性强的网页应用至关重要。这需要对JavaScript的DOM操作和事件处理有深入的理解，同时，也可以通过实践来提升这方面的...
java版飞机大战源码-Resources:收集资源
06-04
编辑器 Java DB SQL Server MyBatis 日志 RESTful 设计模式 前端 项目 浏览器 IE IE添加受信站点会导致网页对话框中不显示浏览器地址。 IE插件开发 跨域 缓存 权限 奇淫巧技 EBS Mock 面试 3D git GitHub 网络 Linux...
9款 Vue 富文本编辑器
热门推荐
学习 记录 总结 分享
05-10 1万+
Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
vue3项目中使用富文本编辑器
前端学习笔记
11-22 8215
适配 Vue3 的富文本插件不多，我看了很多插件官网，也有很多写的非常棒的，有UI非常优雅让人耳目一新的，也有功能非常全面的。Quill，简单易用，功能全面。editorjs，UI极其优雅，非常好看。ckeditor-5，一款完全重写的富文本编辑器，支持现代 Web 标准，例如模块化架构、原生语义化输出等。还有很多优秀的富文本编辑器插件，就不一一列举了。
【快速上手系列】百度富文本编辑器的快速上手和简单使用
Tuerlechat，的博客
11-18 994
百度富文本编辑器的快速上手和简单使用
Vue集成UEditor puls富文本编辑器
ew45218的博客
08-16 8649
Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。
7 款 Vue 3 富文本编辑器
ithunzi的博客
04-09 4645
> 1. TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富 > 2. tiptap - 多人在线实时协同编辑 > 3. CKEditor 5 - 开源免费可商用，行内编辑 > 4. Quill - 易扩展、轻量级二开、代码高亮好用 > 5. Froala - 插件丰富，UI友好，编辑器里的苹果 > 6. summernote - 恰到好处的轻，可直接粘贴图片 > 7. Trumbowyg - 超轻量，体积小巧，仅 8KB
vue项目中使用富文本编辑器
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
04-27 2704
vue中使用富文本编辑器
vue3使用富文本编辑器vue-quill
08-24
在Vue 3中使用富文本编辑器vue-quill，你可以按照以下步骤进行操作： 步骤1：安装依赖 在你的项目文件夹下，运行以下命令来安装vue-quill和所需的依赖： ``` npm install @vueup/vue-quill quill ``` 步骤2：引入依赖 在你需要使用富文本编辑器的模块中，引入QuillEditor组件和相应的样式文件。你可以按照如下代码进行引入： ```javascript import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; export default { components: { QuillEditor } } ``` 步骤3：在Vue应用中注册组件 在你的main.js文件中，引入QuillEditor组件，并将其注册为全局组件。你可以按照如下代码进行引入和注册： ```javascript import { createApp } from 'vue' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; const app = createApp() app.component('QuillEditor', QuillEditor) ``` 完成以上步骤后，你就可以在Vue 3项目中使用富文本编辑器vue-quill了。希望对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue使用富文本编辑器vue-quill-editor](https://blog.csdn.net/qq_44552416/article/details/125800645)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【避坑指南】vue3使用富文本编辑器vueQuillEditor](https://blog.csdn.net/weixin_43951592/article/details/128017960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值