精华内容
下载资源
问答
  • vue集成百度富文本编辑器
    2021-03-09 00:58:47

    UE编辑器示例


    需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。

    获取内容

    获取无文本内容

    .info {

    border-radius: 10px;

    line-height: 20px;

    padding: 10px;

    margin: 10px;

    background-color: #ffffff;

    }

    import UE from "../../components/ueditor.vue";

    export default {

    components: { UE },

    data() {

    return {

    defaultMsg:

    '夏钧姗:成功的投资需具备哪些心态和掌握哪些重要止损位',

    config: {

    initialFrameWidth: null,

    initialFrameHeight: 350

    },

    ue1: "ue1", // 不同编辑器必须不同的id

    ue2: "ue2"

    };

    },

    methods: {

    getUEContent() {

    let content = this.$refs.ue.getUEContent(); // 调用子组件方法

    this.$notify({

    title: "获取成功,可在控制台查看!",

    message: content,

    type: "success"

    });

    console.log(content);

    },

    getUEContentTxt() {

    let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法

    this.$notify({

    title: "获取成功,可在控制台查看!",

    message: content,

    type: "success"

    });

    console.log(content);

    }

    }

    };

    7.运行项目效果如图:

    a9dd166b34243d7b8a954a6ac4ae58b6.png

    8.会出现这样的报错,是由于后端无配置接口请求,后续完善

    3049a520b9910c568251b1b46b637dd2.png

    觉得不错就关注点赞,欢迎评论不足之处,后期上传GitHub案例

    更多相关内容
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。 近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧! 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: import ...
  • vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
  • 写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源...由于项目中要使用富文本编辑器,我在这把一些步骤做一记录,供大家参考。文章目录一、在vue中引入tinymce二、配置HTML...

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

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

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

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

    文章目录

    一、在vue中引入tinymce

    二、配置HTML变量

    三、引入js脚本

    四、引入组件

    富文本编辑器

    52890497fcdd0f6ef20918686297323b.png

    一、在vue中引入tinymce

    npm install @tinymce/tinymce-vue -S

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

    可以直接点这儿下载

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

    d8c785b3b0613ad0a964a25cfecf3144.png

    二、配置HTML变量

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

    templateParameters: {

    BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory

    }

    目的:为了在html页面中能够使用这里定义的BASE_URL变量

    f2e852e917d6654071b626afa70cfc09.png

    三、引入js脚本

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

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

    d0591f3a973d838a850a643735124165.png

    注意:引入的时候会报错,重启项目错误就会消失

    四、引入组件

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

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

    点击我可以下载

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

    引入组件

    import Tinymce from '@/components/Tinymce'

    注册组件

    components: { 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可视化图形界面创建一个vue项目 安装依赖: npm install mavon-editor --save 在main.js当中输入代码: import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use...

    先用vue可视化图形界面创建一个vue项目

    在这里插入图片描述

    安装依赖:

    npm install mavon-editor --save
    

    在main.js当中输入代码:

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    

    新建一个Test.vue:

    <template>
    	<div id="main">
    		<mavon-editor v-model="value" />
    	</div>
    
    </template>
    
    
    <script>
    	export default{
    		data(){
    			return {
    				value: '',
    			}
    		}
    	}
    </script>
    

    在路由文件中routes加入:

     {
        path: '/test',
        name: 'test',
        component: Test
      }
    

    效果图:

    在这里插入图片描述

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

    千次阅读 2020-07-15 18:57:06
    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

    展开全文
  • 富文本编辑器 博客(coder的自我修养)原文链接:http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的...
  • vue整合文本编辑器

    2021-04-20 16:30:22
    0、富文本编辑器的插件和组件 链接:https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg 提取码:5ggs 复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V4的分享 1、效果如图: 后台图片:...
  • 一、复制文本编辑器组件到项目文件夹里面 二、在build下的webpack.dev.conf.js里面添加 templateParameters: { BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory } 三、在项目的index...
  • SpringBoot+ Vue + vue-cli SpringBoot+ Vue + vue-cli3+ UEditor详细教程第一步,下载UEditor官网代码:地址:https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads如图,楼主...
  • springboot文件上传整合富文本编辑器
  • vue使用百度富文本编辑器

    千次阅读 2020-06-29 11:57:56
    vue 使用百度富文本编辑器,由于element带的编辑器样式过于简单,所以使用百度富文本编辑器。 **第一步:**登陆富文本官网百度富文本编辑器下载最新版本,具体选择哪个语言的版本,你可以问下后端,其实哪个都一样,...
  • Vue3.x 整合WangEditor富文本编辑器示例

    千次阅读 2021-10-22 11:11:49
    之前搞的Vue2.x富文本用的是quill+vue-quill-editor,代码直通:Vue-cli3整合Quill富文本编辑器https://blog.csdn.net/wdy_2099/article/details/102715642 但是在Vue3中问题比较多,现改用wangEditor。 一、项目...
  • 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', ...
  • vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangeditor 2).我自己是创建了一个组件这样再用到的时候可以直接调用(可能有更...
  • wangEditor富文本编辑器,web编辑器,html,vue ,可插入表格 ,图片,视频等
  • 主要介绍了Spring+Vue整合UEditor富文本实现图片附件上传的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

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

vue整合富文本编辑器