精华内容
下载资源
问答
  • Vue-html5-editor是一个Vue富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.
  • vue 富文本编辑器插件官网文档

    千次阅读 2020-10-30 17:16:13
    https://www.kancloud.cn/wangfupeng/wangeditor3/460259
    展开全文
  • npm i vue-froala-wysiwyg -S; 如果出现 Cannot find module '@babel/runtime/core-js/object/keys' 执行下面这个 npm install --save-dev @babel/runtime-corejs2 main.js import 'froala-editor/css/froala_...
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 1、npm安装编辑器组件 npm install vue-quill-editor --save 2、在components文件夹创建ue.vue组件,如下 <!-- 组件代码如下 --> <template> <div> <script id="editor" type="text/plain...

    1、npm安装编辑器组件

    npm install vue-quill-editor --save
    

    2、在components文件夹创建ue.vue组件,如下

    在这里插入图片描述

    <!-- 组件代码如下 -->
    <template>
      <div>
        <script id="editor" type="text/plain"></script>
      </div>
    </template>
    <script>
      export default {
        name: 'UE',
        data() {
          return {
            editor: null
          }
        },
        props: {
          defaultMsg: {
            type: String
          },
          config: {
            type: Object
          }
        },
        mounted() {
          const _this = this;
          this.editor = UE.getEditor('editor', this.config); // 初始化UE
          this.editor.addListener("ready", function () {
            _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后,放入内容。
          });
        },
        methods: {
          getUEContent() { // 获取内容方法
            return this.editor.getContent()
          }
        },
        destroyed() {
          this.editor.destroy()
        }
      }
    
    </script>
    
    

    3、页面代码部分

    <template>
      <div>
        <el-card style="height: 610px;">
          <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
          </quill-editor>
        </el-card>
      </div>
    </template>
    
    <script>
      import { quillEditor } from 'vue-quill-editor'
      import 'quill/dist/quill.core.css'
      import 'quill/dist/quill.snow.css'
      import 'quill/dist/quill.bubble.css'
    
    	export default {
    	  name: "ActicleInfo",
    	  components: {
    	    quillEditor
    	  },
        data() {
          return {
            content: null,
            editorOption: {}
          }
        }
      }
    
    </script>
    

    效果如下:

    在这里插入图片描述
    可以插入图片,图片被转码,可以插入外部链接视频,学习使用,已被后期遗忘

    展开全文
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • Vue-Quill-Editor 是一个基于 Quill、适用于 Vue富文本编辑器,支持服务端渲染和单页应用。 该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。 一、实现效果: 二、使用方法: 1...

    Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。

    该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。

    一、实现效果:

    在这里插入图片描述

    二、使用方法:

    1. 下载 Vue-Quill-Editor

    npm install vue-quill-editor --save
    

    2. 下载 Quill(Vue-Quill-Editor 需要依赖)

    npm install quill --save
    

    也可以使用 CDN 的方式引入,具体使用见官网:Vue-Quill-Editor - npm

    3. 挂载

    我们在项目开发中,一般是将富文本编辑器直接封装成组件使用,所以我们一般在组件中直接挂载即可!

    3.1 全局中挂载
    // main.js
    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    
    import 'quill/dist/quill.core.css' // import styles
    import 'quill/dist/quill.snow.css' // for snow theme
    import 'quill/dist/quill.bubble.css' // for bubble theme
    
    Vue.use(VueQuillEditor, /* { default global options } */)
    
    3.2 组件中挂载(推荐)
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    import { quillEditor } from 'vue-quill-editor'
    
    export default {
      components: {
        quillEditor
      }
    }
    

    4. 组件开发

    4.1 基本框架使用
    <template>
        <div class="edit_container">
            <quill-editor 
                v-model="content" 
                ref="myQuillEditor" 
                :options="editorOption" 
                @blur="onEditorBlur($event)" 
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
        </div>
    </template>
    <script>
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                content: `富文本编辑器内容`,  // 富文本编辑器默认内容
                editorOption: {} // 富文本编辑器配置
            }
        },
        methods: {
        	// 准备编辑器
            onEditorReady(editor) {
    			console.log('editor ready!', editor)
    		}, 
    		// 失去焦点事件
            onEditorBlur(editor){
            	console.log('editor blur!', editor)
            }, 
            // 获得焦点事件
            onEditorFocus(editor){
            	console.log('editor focus!', editor)
            }, 
            // 内容改变事件
            onEditorChange({ quill, html, text }){
            	console.log('editor change!', quill, html, text)
            	this.content = html
            }, 
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        }
    }
    </script>
    
    4.2 扩展开发
    1. 自定义toolbar工具栏

      // 工具栏配置
      const toolbarOptions = [
        ["bold", "italic", "underline", "strike"], //加粗,斜体,下划线,删除线
        ["blockquote", "code-block"], //引用,代码块
        [{ header: 1 }, { header: 2 }], // 标题,键值对的形式;1、2表示字体大小
        [{ list: "ordered" }, { list: "bullet" }], //列表
        [{ script: "sub" }, { script: "super" }], // 上下标
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        [{ direction: "rtl" }], // 文本方向
        [{ size: ["small", false, "large", "huge"] }], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
        [{ color: [] }, { background: [] }], // 字体颜色,字体背景颜色
        [{ font: [] }], //字体
        [{ align: [] }], //对齐方式
        ["clean"], //清除字体样式
        ["image", "video"], //上传图片、上传视频
      ];
      
    2. 汉化工具栏
      主要通过修改 css 样式配置来实现工具栏的汉化处理。

      <style>
      .ql-snow .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
      }
      .ql-snow .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: "14px";
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
        content: "10px";
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
        content: "18px";
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
        content: "32px";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: "文本";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: "标题1";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: "标题2";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: "标题3";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: "标题4";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: "标题5";
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: "标题6";
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: "标准字体";
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
        content: "衬线字体";
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
        content: "等宽字体";
      }
      </style>
      

      注意:因为我们是在组件内写的样式,所以要删除 style 中的 lang=‘scss’ scoped 中的 scoped,使样式全局生效。

    3. data 选项中的配置

      data() {
          return {
            content: ``, // 富文本编辑器默认内容
            // 富文本编辑器配置
            editorOption: {
              modules: {
                toolbar: toolbarOptions,  // 自定义工具栏,与上面定义的toolbarOptions 相对应
              },
              theme: "snow",  //主题
              placeholder: "请输入正文", 
            }, 
          };
        },
      

    至此,通过以上配置,插件 Vue-Quill-Editor 就可以轻松使用了,但是在使用过程中肯定会有很多其他问题,在这里我并没有进行整理,如果有其他问题,欢迎小伙伴留言讨论。

    完整版代码我已经上传 GitHub,需要的小伙伴自取。


    参考文章:

    1. 基于Vue项目的富文本vue-quill-editor的使用
    2. Vue轻量级富文本编辑器-Vue-Quill-Editor

    感谢原作者,如有侵权,请联系删除。

    展开全文
  • ueditor富文本编辑器,在其原有的基础上集成Word导入功能,可以将Word转换成HTML,可以解析Word中的图片。Word导入大小配置可以通过修改config.json。
  • vue-cli 使用百度富文本编辑器插件【Editor】 简介:因为在项目中需要使用到普通文章编辑的功能,要求选择编辑器的时候尽量偏大众一点,偏操作性强一点的编辑器。查阅了很多的资料,最后选择了百度富文本编辑器,...

    vue-cli 使用百度富文本编辑器插件【Editor】

    简介:因为在项目中需要使用到普通文章编辑的功能,要求选择编辑器的时候尽量偏大众一点,偏操作性强一点的编辑器。查阅了很多的资料,最后选择了百度富文本编辑器,虽然百度的编辑器已经从16年开始没有再升级和维护,但是富文本社区还是有很多开发人员自主的进行各自版本的升级和演变。

    说明:Editor编辑器与vue连用的例子在网上并不少,但是很多都有各种各样的问题。后来看到一个大佬写的集成插件,将 Editor编写为了一个适用于vue数据双向绑定的插件。

    以下是本人对这个插件的总结说明:亲测vue-cli 2.x 使用成功;vue-cli 3.x 使用失败,具体原因是因为public的目录在项目中取不到资源(有可能与本地开发环境地址和线上生产环境地址的配置有关系,本人比较菜,没弄懂cli3.x里面的这个怎么配置)

    1.插件安装

    插件:vue-ueditor-wrap
    
    npm:npm i vue-ueditor-wrap
    
    yarn:yarn add vue-ueditor-wrap
    
    github:https://github.com/HaoChuan9421/vue-ueditor-wrap.git
    

    2.下载editor资源

    下载最新编译的 UEditor。官网目前最新的版本是1.4.3.3,存在诸多 BUG,例如 Issue1,且官方不再积极维护。为了世界的和平,针对一些常见 BUG,我进行了修复,并把编译好的文件放在了本仓库的 assets/downloads 目录下,你可以放心下载,当然你也可以自己 clone 官方源码并编译。建议下载地址:https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads
    在这里插入图片描述
    将下载的压缩包解压并重命名为 UEditor(只需要选择一个你需要的版本,比如 utf8-php),放入你项目的 static 目录下。
    在这里插入图片描述

    3.引入VueUeditorWrap组件

    import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
    // 或者
    const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS
    

    4.注册组件

    components: {
      VueUeditorWrap
    }
    // 或者在 main.js 里将它注册为全局组件
    Vue.component('vue-ueditor-wrap', VueUeditorWrap)
    

    5.实现双向绑定数据

    <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
    
    data () {
      return {
        msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
      }
    }
    

    至此你已经可以在页面中看到一个初始化之后的 UEditor 了,并且它已经成功和数据绑定了!

    6.根据项目需求修改配置,完整配置选项

    <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    
    data () {
      return {
        msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 240,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
          serverUrl: 'http://35.201.165.105:8000/controller.php',
          // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
          UEDITOR_HOME_URL: '/static/UEditor/'
        }
      }
    }
    

    7.修改图片上传功能

    思路:在编辑器挂载的时候,新增一个按钮在最开始的位置,用新增加的按钮来继续写一个上传操作,最终达到替换编辑器自带的上传按钮的操作

       <vue-ueditor-wrap v-model="content" :config="myConfig" @beforeInit="addCustomButtom"></vue-ueditor-wrap>
    
       addCustomButtom(editorId) {
            let that = this
            // 1. 自定义按钮
            window.UE.registerUI('test-button' + editorId, function (editor, uiName) {
              // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
              editor.registerCommand(uiName, {
                execCommand: function () {
                  editor.execCommand(
                  )
                }
              })
              // 创建一个 button
              var btn = new window.UE.ui.Button({
                // 按钮的名字
                name: uiName,
                // 提示
                title: '图片上传',
                // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
                cssRules: "background-image: url('/static/image/upload.png') !important;background-size: cover;",
                // 点击时执行的命令
                onclick: function () {
                  // 这里可以不用执行命令,做你自己的操作也可
                  that.dialogVisible = true
                }
              })
              // 当点到编辑内容上时,按钮要做的状态反射
              editor.addListener('selectionchange', function () {
    
                var state = editor.queryCommandState(uiName)
                if (state === -1) {
                  btn.setDisabled(true)
                  btn.setChecked(false)
                } else {
                  btn.setDisabled(false)
                  btn.setChecked(state)
                }
              })
              // 因为你是添加 button,所以需要返回这个 button
              return btn
            }, 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
          }
    

    在这里插入图片描述
    总结:这次使用本插件过程全部记录下来了,在使用的过程遇到了几个问题,发了几封邮件给插件的开发者:郑昊川 ,感谢郑昊川大佬耐心的讲解和回复。如有同学在使用此插件遇到问题之后,推荐大家前往:https://github.com/HaoChuan9421/vue-ueditor-wrap 查阅详细的资料,或者前往郑昊川大佬的个人主页询问:https://github.com/HaoChuan9421

    展开全文
  • 这是一款使用jquery和css3制作的简单的富文本编辑器插件。该jquery富文本编辑器中带有加粗、斜体、下划线、文本居中、文本对齐、显示图片等编辑器基本功能。
  • 1、安装插件:npm install vue-quill-editor 2、安装插件依赖:npm install quill 3、main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core....
  • 今天在原有的代码上面加一个富文本,将原来的文本域textare替换。吐槽一下谁设计的。很明显是要富文本的呀。一开始怎么写的文本域。 1. 先安装依赖 npm i wangeditor -S 2. 导入 3.配置相关参数 <...
  • 1、百度UEditor插件的安装过程请查看我的另篇博文:http://blog.csdn.net/lzc4869/article/details/784381212、组件(1)组件页面ueditor.vue <script :id=id type="text/plain"></script> </template><script> ...
  • 基于vue2.0 开发的 富文本编辑器,比之前的ueditor好看又好用,安装需要执行 npm install --save vue2-editor <vue-editor v-model="content"></vue-editor> import { VueEditor } from 'vue2-editor' 即可
  • vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
  • 富文本编辑器Vue插件

    千次阅读 2019-03-04 15:07:11
    下载 vue-quill-editor // 下载Vue-Quill-Editor npm install vue-quill-editor --save; 下载quill(Vue-Quill-Editor需要依赖) // 下载quill(Vue-Quill-Editor需要依赖) npm install quill --save; 引入 &...
  • 富文本编辑器导出word

    2021-01-14 14:05:49
    将系统中富文本编辑器内容导出到word文件(包含图片)
  • vue富文本编辑器

    2021-01-11 22:43:21
    vue富文本编辑器 Vue-Quill-Editor 主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。 wangEditor(国产,...
  • vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器,轻量,简洁,易用,开源免费。 兼容常见的PC浏览器:Chrome,Firefox,Safar,Edge,QQ浏览器,IE11。 不支持移动端。 wangEditor当前是v4...
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • vue-quill-editor是本文主要讲的富文本编辑器 一、vue-quill-editor是什么? vue-quill-editor是一款好用的富文本编辑器,并且开源 二、使用步骤 现在有很多好用的富文本编辑器,有开源的,也有付费的,下线...
  • 常见的富文本编辑器 首先我们来看一下当下比较流行的富文本编辑器有哪些? tinymce :是一家老牌做富文本的公司(这里也推荐 ckeditor,也是一家一直做富文本的公司,新版本很不错),它的产品经受了市场的认可,不管...
  • 1.安装 # npm install tinymce -S 2.把node_modules\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面,如下图 ...3.在mian.js中引入tinymce(也可以在组件中...Vue.prototype.$tinymce = Tinymce...
  • NicEdit富文本编辑器是一个非常简洁的轻量级网页编辑器插件,跨平台的Inline Content Editor。
  • vue-quill-editor 基于 Quill、适用于 Vue富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。 基础用法 1、npm 导入 vue-quill-editor npm install vue-quill-editor --save 2、引入 vue...
  • vue富文本编辑器tinymce

    2021-04-08 15:28:10
    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,...
  • ant.vue富文本编辑器 Vue-Trix文字编辑器 (Vue-Trix Text Editor) Simple and lightweight Trix rich-text editor component for Vue.js. Vue.js的简单轻量级Trix RTF编辑器组件。 安装 (Installation) NPM NPM ...
  • // 配置 server 接口地址 _this.editorE.config.uploadImgServer = process.env.VUE_APP_API_HOST+'/api/v1/file/uploadImage' //设置富文本的高度 _this.editorE.config.height = 600 //默认限制图片大小是 5M _...
  • 暂未更新完毕,明天再更。。。 背景:项目中的后台数据库不支持...一、插件的基本使用 1.安装依赖包 npm install vue-quill-editor --save 2.在vue项目的src下的main.js文件中引入以下代码 import Vue from 'vue'...
  • 本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,229
精华内容 1,291
关键字:

vue富文本编辑器插件

vue 订阅