roam开发日记

1. adpter里的套路。先用空对象加入到数组中。获取到数据后再替换对象

 

 

2.TinyMCE

// 1. 框架的部署
// 2. 框架的使用
// 2.1 按钮的添加
// 2.2 图片上传功能的开启
// 2.3 图片上传功能的自定义
// 2.4 ajax跨域问题
// 2.5 JSON.parse(str)的 json格式问题
// 2.6 formdata发送表单的接收
// 2.7 服务器返回数据格式

1. 使用和博客园同款 TinyMCEweb富文本编辑框架： 
　　下载地址:https://www.tiny.cloud/get-tiny/self-hosted/
    部署需要：让html页面成为手机端：添加viewport
　　中文文档：http://tinymce.ax-z.cn/
　　
2. 框架的使用
　　在项目中加入 TinyMCE解压文件，在html页面内引入<script src='js/tinymce/tinymce.min.js'></script>

<h1>TinyMCE快速开始示例</h1>
        <form method="post">
            <textarea id="tinydemo">Hello, World!</textarea>
        </form>
        <script>
            tinymce.init({
                selector: '#tinydemo', //找到textarea
                language: 'zh_CN', //中文
                plugins: 'image', //开启图片插件
                toolbar: 'bold italic | link image',
                menubar: false,
                images_upload_handler: function (blobInfo, success, failure, progress) {
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', 'tiny');

                    xhr.upload.onprogress = function (e) {
                        progress(e.loaded / e.total * 100);
                    }

                    xhr.onload = function () {
                        var json;
                        if (xhr.status == 403) {
                            failure('HTTP Error: ' + xhr.status, {remove: true});
                            return;
                        }
                        if (xhr.status < 200 || xhr.status >= 300) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        console.log("xhr.responseText : " + xhr.responseText)
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        success(json.location);
                    };

                    xhr.onerror = function () {
                        failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                    }

                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());

                    xhr.send(formData);
                }
            });
        </script>

 

2.1 按钮的添加： TinyMCE中图片等功能按钮在 init({

toolbar: 'bold italic | link image',

})
以：toolbar的方式添加


2.2 图片上传功能的开启
　在init中加入：

 plugins: 'image', //开启图片插件


2.3 图片上传的功能自定义：
　在init中使用：

images_upload_handler:function (xxx,xxx,xxx){}
自定义上传函数

2.4ajax跨域问题
　　默认在同一项目中，不需要服务端添加跨域透。但是不同的服务器需要添加跨域头，这是服务器的问题

2.5 JSON.parse格式问题

服务器返回的图片地址格式： {"location":"img/a.jpg"}(项目地址是自动添加)

 　注意！字段只能用 ""包裹，不能用单引号

 

　2.6 formdata发送多类型数据

　　服务端需要用diskfileitem接收！ 用request.param()接收不到！注意！

 

　2.7 改编辑器发送的数据类型是二进制。服务端返回json格式的图片相对路径

------------恢复内容结束------------