飘飘然

飘飘然 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

关于前端、.NET Core、Java的一些记录

个人动态

飘飘然 发布了文章 · 4月15日

powershell执行yo命令 提示 npm\yo.ps1,因为在此系统上禁止运行脚本。

执行yo命令 报错:

yo : 无法加载文件 C:\Users\aaa\AppData\Roaming\npm\yo.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go
.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ yo tinymce
+ ~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

如图
20200415040728.png

打开微软的官方文档
https://docs.microsoft.com/zh...

使用命令

Get-ExecutionPolicy -List

检查powershell设置,看结果是否是:

Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser    RemoteSigned
 LocalMachine       AllSigned

CurrentUser 如果不是 RemoteSigned 就使用命令(管理员模式

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

设置CurrentUser为RemoteSigned 就可以了。

查看原文

赞 0 收藏 0 评论 0

飘飘然 发布了文章 · 4月15日

TinyMCE 5 插件开发

之前写过一篇《TinyMCE插件开发》是基于TinyMCE 4.x的,目前已经升级到TinyMCE 5.x,新版本API发生了很大的变化,所以分析下如何重新快速上手新版本的插件开发方式

资料
TinyMCE 5.x 官方也提供了详细的文档说明,主要关注几个部分:

1、如何创建插件项目(https://www.tiny.cloud/docs/a...)、
2、插件注入API文档,例如:注册一个菜单、图标、工具栏按钮等(https://www.tiny.cloud/docs/a...

3、插件类型的具体说明文档,例如:注册菜单、图标、工具栏按钮等的属性结构,函数。(https://www.tiny.cloud/docs/u...

两种方式可以开发TniyMCE插件:
1、在tinymce/plugins 目录下直接新建插件的js文件,然后开发插件,官方也有说明。
2.使用 Yeoman yo 脚手架构和generator-tinymce模板构建项目进行开发

这里我们主要讲第2种脚手架构建项目的方式

第一步:安装nodejs和npm
根据自己的操作系统到https://nodejs.org/ 下载nodejs安装

第二步:安装Yeoman yo脚手架

npm install -g yo

安装完成后。
1.png

如果powershell 执行yo命令时候报错 :因为在此系统上禁止运行脚本。请看这里https://segmentfault.com/a/11...,正常的可以忽略这里

第三步:安装 generator-tinymce 脚手架模板

npm install -g generator-tinymce

安装完成后

第四步:创建生成插件项目
首先,在硬盘上建立工作空间,例如:D:\tinymce\demoplugin
cd 进入文件目录

cd D:\tinymce\demoplugin

使用 yo tinymce 命令生成项目

yo tinymce

跟着询问提示配置项目的选项如下:
3.png

? Package name: demoplugin // 插件项目名称
? Add a description demoplugin // 插件描述

等待一会项目文件初始化创建完成。

第五步:插件项目结构
TinyCME 5.x的脚手架项目和 4.x的不太一样,5.x使用TypeScript开发
使用vscode载入文件目录,看到项目结构如下:
5.png

如图所示 src/main/ts/Plugin.ts 是插件的主体文件,功能代码都可以在这里编写。如果功能辅助可以分文件写到src/main/ts/core文件夹中,再引入Plugin.ts使用

第六步:调试插件
使用命令

 npm start

7.png

没有报错,直接在浏览器打开/demoplugin/src/demo/html/index.html文件,就可以看到TinyMCE 5.x工具栏中实现了demoplugin插件,将文字插入到编辑器中的按钮插件。

6.png

第7步:打包插件
使用命令

 npm run build

稍等片刻就编译打包好了,在项目的 demoplugin/dist/目录下有文件夹 demoplugin

第8步:插件的使用
将打包的文件夹demoplugin拷贝TinyMCE的tinymce/plugins 目录下,在需要地方引入并配置调用,就可以在生产项目中实用我们开发好的插件了。

查看原文

赞 0 收藏 0 评论 0

飘飘然 赞了回答 · 2019-11-13

vue 前端开启gzip用处?

比如nginx给你返回js文件的时候,会判断是否开启gzip,然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同文件,有的话直接返回,nginx自己不再进行压缩处理。

而压缩是要时间的!不同级别的压缩率花的时间也不一样。

所以提前准备gz文件,可以更加优化。而且你可以把压缩率提高点,这样带宽消耗会更小

关注 2 回答 1

飘飘然 赞了回答 · 2019-11-11

解决vue中使用 tinymce 只有第一次打开页面初始化有效

初始化 tinymce 文本编辑器,确保 selector 唯一性
selector 选中同一个 dom id 时,tinymceinit 一次,
所以每次都动态改变 selector 所选中 dom id 即可

关注 5 回答 4

飘飘然 收藏了问题 · 2019-11-11

vue中使用 tinymce 只有第一次打开页面初始化有效

我在vue中使用tinymce
第一次打开页面初始化有效果

clipboard.png
但第二次进入页面 初始化便无效 必须刷新页面才可以

clipboard.png

请问这个问题应该如何解决

以下是代码

<template>
    <textarea id="tinymceId" class="tinymce-textarea" v-model="selectContent.content" />
</template>
<script>

import plugins from '@/components/Tinymce/plugins'
import toolbar from '@/components/Tinymce/toolbar'
import load from '@/components/Tinymce/dynamicLoadScript'


export default {
  
  mounted() {
    const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce@5.0.11/tinymce.min.js'
    const _this = this
    load(tinymceCDN, (err) => {
      if (err) {
        this.$message.error(err.message)
        return
      }
      // alert("!")
      window.tinymce.init({
        image_advtab: true,
        selector: "#tinymceId",
        language: 'zh_CN',
        language_url: 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/langs/zh_CN.js',
        height: 300,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: toolbar,
        menubar: 'file edit insert view format table image',
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {


          editor.on('NodeChange Change KeyUp SetContent', () => {

            _this.selectContent.content = editor.getContent()
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            // console.log(e)
            // _this.fullscreen = e.state
          })
        }

      })
    })

  },

}
</script>

飘飘然 赞了问题 · 2019-11-11

解决vue中使用 tinymce 只有第一次打开页面初始化有效

我在vue中使用tinymce
第一次打开页面初始化有效果

clipboard.png
但第二次进入页面 初始化便无效 必须刷新页面才可以

clipboard.png

请问这个问题应该如何解决

以下是代码

<template>
    <textarea id="tinymceId" class="tinymce-textarea" v-model="selectContent.content" />
</template>
<script>

import plugins from '@/components/Tinymce/plugins'
import toolbar from '@/components/Tinymce/toolbar'
import load from '@/components/Tinymce/dynamicLoadScript'


export default {
  
  mounted() {
    const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce@5.0.11/tinymce.min.js'
    const _this = this
    load(tinymceCDN, (err) => {
      if (err) {
        this.$message.error(err.message)
        return
      }
      // alert("!")
      window.tinymce.init({
        image_advtab: true,
        selector: "#tinymceId",
        language: 'zh_CN',
        language_url: 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/langs/zh_CN.js',
        height: 300,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: toolbar,
        menubar: 'file edit insert view format table image',
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {


          editor.on('NodeChange Change KeyUp SetContent', () => {

            _this.selectContent.content = editor.getContent()
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            // console.log(e)
            // _this.fullscreen = e.state
          })
        }

      })
    })

  },

}
</script>

关注 5 回答 4

飘飘然 赞了问题 · 2019-11-09

解决使用nginx代理wss时 nginx proxy_pass指令为何是http协议?

程序我已经测试通过
以下是nginx转发的配置
我有一点不理解

websocket服务我使用gatewayworker开了一个websocket服务

为何转发里是http

如果我直接访问这一地址,他又会提示错误

location /wss
{
    proxy_pass http://127.0.0.1:8585;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Real-IP $remote_addr;
}

这是什么原理?

关注 3 回答 2

飘飘然 收藏了问题 · 2019-11-09

使用nginx代理wss时 nginx proxy_pass指令为何是http协议?

程序我已经测试通过
以下是nginx转发的配置
我有一点不理解

websocket服务我使用gatewayworker开了一个websocket服务

为何转发里是http

如果我直接访问这一地址,他又会提示错误

location /wss
{
    proxy_pass http://127.0.0.1:8585;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Real-IP $remote_addr;
}

这是什么原理?

飘飘然 赞了问题 · 2019-10-28

解决Vue http添加新数据成功,但是视图不会重新渲染,怎么解决?

(1)逻辑功能是:给文章添加一个新评论
(2)http post请求,mock数据里面是有的,但是必须得刷新一下页面才会更新上去
(3)请问应该怎么做?看了一下谷歌,大多数都是说用set,但是set好像是用于添加属性的

关注 5 回答 4

认证与成就

  • 获得 29 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-11-21
个人主页被 273 人浏览