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格式的图片相对路径
------------恢复内容结束------------