A-A+

富文本编辑器-tinyMCE

2020年04月09日 JavaScript, php 暂无评论阅读 2,773 views 次

官网：https://www.tiny.cloud

文档：https://www.tiny.cloud/docs/demo/local-upload/

一、下载js文件到本地

下载地址：https://www.tiny.cloud/get-tiny/self-hosted/

选择：Download TinyMCE Community

二、通过<script>标签引入引入

<script src="/lib/tinymce/tinymce.min.js"></script>

三、给textarea一个id

<div class="layui-form-item">

<label class="layui-form-label">内容</label>

<div class="layui-input-block">

<textarea id="content" name="content" placeholder="请输入内容" style="height: 300px; width: 1200px;">{{$article_data['content']}}</textarea>

</div>

</div>

四、渲染tinyMCE

<script>

tinymce.init({

selector: 'textarea#content',

language: "zh_CN",//汉化

plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的

'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',

'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',

'save table contextmenu directionality emoticons template paste imagetools textcolor'

],

//工具框，也可自己随意配置

toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',

image_advtab: true,

table_default_styles: {

width: '100%',

borderCollapse: 'collapse'

},

image_title: false, // 是否开启图片标题设置的选择，这里设置否

automatic_uploads: true,

// 图片异步上传处理函数

images_upload_handler: (blobInfo, success, failure) => {

var xhr, formData;

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

var upload_url = "{{route('learnvid.up3',['_token'=>csrf_token()])}}" //改成您自己的上传接口

xhr.open('POST', upload_url);//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.php

xhr.onload = function () {

var json;

if (xhr.status !== 200) {

failure('HTTP Error: ' + xhr.status);

return;

}

json = JSON.parse(xhr.responseText);

if (!json || typeof json.location !== 'string') {

failure('Invalid JSON: ' + xhr.responseText);

return;

}

success(json.location);

};

formData = new FormData();

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

xhr.send(formData);

}

});

</script>