vue使用tinymce本地加载方案2,更快加载tinymce

提下方案1:是改写tinymce-vue的script加载器,vue的tinymce-vue原来只是个script加载器, 改的地方略微多。

发现了另一个方法:
首先,不能再使用tinymce-vue,只用tinymce,好处是不需要api-key

npm install tinymce

同时将tinymce放到static目录用于引用css

js的部分用import
css的部分用tinymce.init

使用方式如下:

<script setup>
import {onMounted } from 'vue'
import tinymce from 'tinymce' //加载tinymce的js
import 'tinymce/themes/silver/theme' //加载theme
import 'tinymce/models/dom/model' //加载model
import 'tinymce/icons/default/icons' //加载icon

onMounted(() => {
    tinymce.init({
        selector: 'textarea#default', 
        skin_url: 'static/tinymce/skins/ui/oxide', 
        theme_url:'static/tinymce/themes/silver/theme',
        content_css:'static/tinymce/skins/ui/oxide/content.min.css'
    });
})
</script>

<template>
  <textarea id="default">Hello, World!</textarea>
</template>

发现个vue绑定boolean的小bug

测试用的版本为3.2.47

比如<div v-if=”state.myobj.isTrue”></div>

class myobj
{
isTrue:boolean
}

自定义了一个myobjd对象,里面有个isTrue,如果是boolean类型,通过改变isTrue=true或false是无法控制div是否显示的。

如果isTrue是个number类的,如<div v-if=”state.myobj.isTrue==1″></div>

class myobj
{
isTrue:number
}

然后通过state.myobj.isTrue=1或=0能控制div是否显示

不知是bug还是用法有问题

vue的tinymce-vue原来只是个script加载器

tinymce比较好用,自定义一些功能也很方便。使用中发现加载总是不是那么迅速,一开始以为性能就是这样的,通过加载记录发现tinymce中的js组件居然都是加载tinymce官网的资源,一直在访问外网能不慢么。

就想tinymce-vue是vue组件呀,都install进来了,怎么还在走外网呢?打开tinymce-vue包发现实际上就是个script加载器,使用tinymce-vue后,实际上不需要install tinymce也能运行,他会判断本地是否有tinymce环境,没有的话,就直接创建script标签加载网页版本的js文件,再使用普通网页的方式初始化tinymce组件。

方式A:解决方式是把tinymce-vue中scriptloader复制到本地再改下js路径,把tinymce资源放到自己的服务器,这样就快多了。不再需要api-key。仿照tinymce-vue的写法,如:

//ScriptLoader_1需要到tinymce-vue中找,
ScriptLoader_1.ScriptLoader.load(document,'//a.com(自己的服务器)/tinymce.min.js',function () {
     that.tinymce=tinymce
     that.editor=that.tinymce.init(that.tinymceConfig)
     const formatpainter= import('tinymce-plugin-formatpainter')
})

方式B:增加资源路径,把部分资源放在自己的服务器,无需修改代码,易燃依赖tinymce-vue和需要api-key,能提高一点速度,但不彻底,如:

<Editor
          api-key="no-api-key"
          :init="{
        plugins: 'lists link image table code help wordcount',
        skin_url: '/node_modules/tinymce/skins/ui/oxide',
        theme_url:'/node_modules/tinymce/themes/silver/theme',
        icons_url:'/node_modules/tinymce/icons/default/icons.js',
        model_url:'/node_modules/tinymce/models/dom/model.min.js',

      }"
  />

angularjs post 数据格式

没太理解为毛angularjs里post数据用的json格式。。。
网上也有修改方案:
修改原来的app.js 增加:

var [你的app名字]= angular.module('[你的app名字]=', ['ngRoute','[你的controller名字]='],function($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function(obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

for(name in obj) {
value = obj[name];

if(value instanceof Array) {
for(i=0; i);

AngularJS 笔记

http://www.angularjs.cn/tag/AngularJS
看到了入门10,先记录下。。

十分强大,mvc齐全方面,做gurb的东西非常合适,
可以完全基于js的mvc开发网站,服务器端只需要开发json接口就可以了。
真的是太方便了。
问题是跟jquery用了同样的命名空间$, 虽然宣称两个方向不一样AngularJs很强大,但很多插件用不了了。。jquery的地位太重了。