mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-10 17:36:33 +08:00
Add editing mode for tinymce images
This commit is contained in:
Anton Ignatov
parent
193edfbc35
commit
260810fff8
8 changed files with 147 additions and 13 deletions
|
|
@ -25,6 +25,13 @@ var MarvinJsEditor = (function() {
|
|||
sketcherInstance.importStructure("mrv",config.data)
|
||||
sketchName.val(config.name)
|
||||
})
|
||||
}else if (config.mode === 'edit-tinymce'){
|
||||
loadEditor().then(function(sketcherInstance) {
|
||||
$.get(config.marvinUrl,function(result){
|
||||
sketcherInstance.importStructure("mrv",result.description)
|
||||
sketchName.val(result.name)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,6 +77,8 @@ var MarvinJsEditor = (function() {
|
|||
} else if (config.mode === 'new-tinymce'){
|
||||
config.objectType = 'TinyMceAsset'
|
||||
MarvinJsEditor().save_with_image(config)
|
||||
} else if (config.mode === 'edit-tinymce'){
|
||||
MarvinJsEditor().update_tinymce(config)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -166,6 +175,37 @@ var MarvinJsEditor = (function() {
|
|||
})
|
||||
},
|
||||
|
||||
update_tinymce: function(config){
|
||||
loadEditor().then(function(sketcherInstance) {
|
||||
sketcherInstance.exportStructure("mrv").then(function(mrv_description) {
|
||||
loadPackages().then(function (sketcherPackage) {
|
||||
sketcherPackage.onReady(function() {
|
||||
exporter = createExporter(sketcherPackage,'image/jpeg')
|
||||
exporter.render(mrv_description).then(function(image){
|
||||
$.ajax({
|
||||
url: config.marvinUrl,
|
||||
data: {
|
||||
description: mrv_description,
|
||||
name: sketchName.val(),
|
||||
object_type: 'TinyMceAsset',
|
||||
image: image
|
||||
},
|
||||
dataType: 'json',
|
||||
type: 'PUT',
|
||||
success: function(json) {
|
||||
config.image[0].src = json.url
|
||||
config.saveButton.removeClass('hidden')
|
||||
console.log(config.saveButton)
|
||||
$(marvinJsModal).modal('hide');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
create_preview: function(source,target){
|
||||
loadPackages().then(function (sketcherInstance) {
|
||||
sketcherInstance.onReady(function() {
|
||||
|
|
|
|||
40
app/assets/javascripts/sitewide/tiny_mce.js
vendored
40
app/assets/javascripts/sitewide/tiny_mce.js
vendored
|
|
@ -129,9 +129,11 @@ var TinyMCE = (function() {
|
|||
],
|
||||
init_instance_callback: function(editor) {
|
||||
var editorForm = $(editor.getContainer()).closest('form');
|
||||
var editorContainer = $(editor.getContainer())
|
||||
var menuBar = editorForm.find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout');
|
||||
var editorToolbar = editorForm.find('.mce-top-part');
|
||||
var editorToolbaroffset = mceConfig.toolbar_offset || 120;
|
||||
var editorIframe = $('#' + editor.id).prev().find('.mce-edit-area iframe')
|
||||
|
||||
$('.tinymce-placeholder').css('height', $(editor.editorContainer).height() + 'px');
|
||||
setTimeout(() => {
|
||||
|
|
@ -163,6 +165,44 @@ var TinyMCE = (function() {
|
|||
editorForm.submit();
|
||||
});
|
||||
|
||||
// Init image helpers
|
||||
$('<div class="tinymce-active-object-handler" style="display:none">'
|
||||
+'<a class="file-download-link tool-button" href="#" data-turbolinks="false"><i class="mce-ico mce-i-donwload"></i></a>'
|
||||
+'<span class="file-edit-link tool-button" href="#" data-turbolinks="false"><i class="mce-ico mce-i-pencil"></i></span>'
|
||||
+'</div>').appendTo(editorToolbar.find('.mce-stack-layout'))
|
||||
editorIframe.contents().click(function(){
|
||||
setTimeout(() => {
|
||||
var image = editorIframe.contents().find('img[data-mce-selected="1"]')
|
||||
var editLink;
|
||||
if (image.length > 0){
|
||||
editorContainer.find('.tinymce-active-object-handler').css('display', 'block')
|
||||
editorContainer.find('.tinymce-active-object-handler .file-download-link')
|
||||
.attr('href', image[0].src)
|
||||
.attr('download', 'tinymce-image');
|
||||
|
||||
editLink = editorContainer.find('.tinymce-active-object-handler .file-edit-link')
|
||||
if (image[0].dataset.sourceId) {
|
||||
editLink.css('display','inline-block')
|
||||
editLink.on('click', function(){
|
||||
if (image[0].dataset.sourceType === 'MarvinJsAsset'){
|
||||
MarvinJsEditor().open({
|
||||
mode: 'edit-tinymce',
|
||||
marvinUrl: '/marvin_js_assets/'+image[0].dataset.sourceId,
|
||||
image: image,
|
||||
saveButton: editorContainer.find('.tinymce-save-button')
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editLink.css('display','none')
|
||||
editLink.off('click')
|
||||
}
|
||||
}else{
|
||||
editorContainer.find('.tinymce-active-object-handler').css('display', 'none')
|
||||
}
|
||||
},100)
|
||||
})
|
||||
|
||||
// After save action
|
||||
editorForm
|
||||
.on('ajax:success', function(ev, data) {
|
||||
|
|
|
|||
|
|
@ -59,4 +59,42 @@
|
|||
.mce-toolbar {
|
||||
background: $color-white !important;
|
||||
}
|
||||
|
||||
.mce-stack-layout {
|
||||
.tinymce-active-object-handler {
|
||||
border-top: 1px solid rgb(226, 228, 231);
|
||||
height: 33px;
|
||||
width: 100%;
|
||||
|
||||
.tool-button {
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgb(226, 228, 231);
|
||||
}
|
||||
}
|
||||
|
||||
i.mce-i-donwload:before {
|
||||
content: "\F019";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
line-height: 16px
|
||||
}
|
||||
|
||||
i.mce-i-pencil:before {
|
||||
content: "\F303";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
line-height: 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
|
@ -23,6 +23,10 @@ class MarvinJsAssetsController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def show
|
||||
render json: (MarvinJsAsset.find_by_id(params[:id]) || {})
|
||||
end
|
||||
|
||||
def destroy
|
||||
sketch=MarvinJsAsset.find(params[:id])
|
||||
sketch.destroy
|
||||
|
|
@ -30,15 +34,13 @@ class MarvinJsAssetsController < ApplicationController
|
|||
end
|
||||
|
||||
def update
|
||||
sketch=MarvinJsAsset.find(params[:id])
|
||||
sketch.update(marvin_params)
|
||||
render json: sketch
|
||||
render json: MarvinJsAsset.update_sketch(marvin_params)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def marvin_params
|
||||
params.permit(:description, :object_id, :object_type, :name, :image)
|
||||
params.permit(:id,:description, :object_id, :object_type, :name, :image)
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -15,12 +15,6 @@ class MarvinJsAsset < ApplicationRecord
|
|||
image: values[:image],
|
||||
image_file_name: "#{name}.jpg"
|
||||
)
|
||||
# Decode the file bytes
|
||||
#image = values[:image].split(';')
|
||||
#tiny_mce_img.image = StringIO.new(
|
||||
# Base64.decode64(image[1])
|
||||
#)
|
||||
#tiny_mce_img.image_content_type = image[0].split(':')[1]
|
||||
tiny_mce_img.save!
|
||||
|
||||
values[:object_id] = tiny_mce_img.id
|
||||
|
|
@ -28,4 +22,15 @@ class MarvinJsAsset < ApplicationRecord
|
|||
create(values.merge({team_id: team.id}).except(:image))
|
||||
end
|
||||
|
||||
def self.update_sketch(values)
|
||||
sketch=MarvinJsAsset.find(values[:id])
|
||||
sketch.update(values.except(:image,:object_type,:id))
|
||||
if values[:object_type] == 'TinyMceAsset'
|
||||
image = TinyMceAsset.find(sketch.object_id)
|
||||
image.update(image: values[:image])
|
||||
return {url: image.url(:large)}
|
||||
end
|
||||
return sketch
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ class TinyMceAsset < ApplicationRecord
|
|||
touch: true,
|
||||
optional: true
|
||||
|
||||
has_one :source,
|
||||
has_one :marvin_js_asset,
|
||||
as: :object,
|
||||
class_name: :MarvinJsAsset,
|
||||
dependent: :destroy
|
||||
|
|
@ -38,6 +38,10 @@ class TinyMceAsset < ApplicationRecord
|
|||
}
|
||||
validates :estimated_size, presence: true
|
||||
|
||||
def source
|
||||
return marvin_js_asset if marvin_js_asset
|
||||
end
|
||||
|
||||
def self.update_images(object, images)
|
||||
images = JSON.parse(images)
|
||||
current_images = object.tiny_mce_assets.pluck(:id)
|
||||
|
|
@ -60,6 +64,11 @@ class TinyMceAsset < ApplicationRecord
|
|||
asset_id = tm_asset.attr('data-mce-token')
|
||||
new_asset_url = find_by_id(Base62.decode(asset_id))
|
||||
if new_asset_url
|
||||
assets_source = new_asset_url.source
|
||||
if assets_source
|
||||
tm_asset.set_attribute('data-source-id', assets_source.id)
|
||||
tm_asset.set_attribute('data-source-type', assets_source.class.name)
|
||||
end
|
||||
tm_asset.attributes['src'].value = new_asset_url.url
|
||||
tm_asset['class'] = 'img-responsive'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="ql-editor">
|
||||
<%= custom_auto_link(result.result_text.text,
|
||||
<%= custom_auto_link(result.result_text.tinymce_render(:text),
|
||||
simple_format: false,
|
||||
tags: %w(img),
|
||||
team: current_team) %>
|
||||
|
|
|
|||
|
|
@ -676,7 +676,7 @@ Rails.application.routes.draw do
|
|||
end
|
||||
end
|
||||
|
||||
resources :marvin_js_assets, only: [:create, :update, :destroy]
|
||||
resources :marvin_js_assets, only: [:create, :update, :destroy, :show]
|
||||
|
||||
post 'global_activities', to: 'global_activities#index'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue