I want to add a div-container with the ace-code editor.
For that I've create this
<div id="editor" class="codeeditor">
<div id="editor-nav" class="codeeditor-nav">HTML | Javascript | CSS | PHP </div>
<div id="editor-code" class="codeeditor-codearea"></div>
</div>
I want to use the sourcecode of another div for the ace-editor
<div id="mycontent">That the code i want to edit</div>
I setup the ace with this
var editor = ace.edit("codeeditor-codearea");
editor.session.setMode("src-min-noconflict/mode/javascript';?>");
How I must setup the ace that
Does it take the content from the "mycontent"?
and show the ace-editor in "editor-code"?
Also, I have the problem, that my content will look unpretty after adding by the editor - is there a way to prevent that?
you can setup the editor like this
var editor = ace.edit("codeeditor-codearea", {
mode: "ace/mode/javascript",
value: document.getElementById("mycontent").textContent
});
?>");
or if you are using an older version of ace
editor.session.setValue(document.getElementById("mycontent").textContent)
Related
I'd like to use the CKEditor 5 Inline or Balloon editor on a form submission, but I'm having difficulty.
I can get the submission to work perfectly w/ Classic Editor but the Inline Editor prevents me from typing in the field.
Here is my code:
<script type="text/javascript">
InlineEditor.create( document.querySelector( '#ck' ) );
</script>
Here is the HTML:
<div class="form-group">
<label>Comment</label>
<textarea cols="80" rows="10" name="comment" class="form-control" id="ck">foo
</div>
On the page, the editor shows up, but I am unable to type into it on Safari (Mac).
I looks like this was possible in CKEditor 4, it is possible in 5?
Unfortunately, InlineEditor and BalloonEditor are not meant to replace <textarea> element. ClassicEditor works in this case because it just replaces the whole element with its own containers, but this is not the case for other editors.
CKEditor 4 was kind of one solution to suit all the needs. There were a lot of things happening under the hood. With CKEditor 5 we give you builds and an API, but the integration needs to be done by the outside developer. I am not saying this will never change, although this is the status for now.
Additionally, at the moment, neither editor will replace <textarea> value as you type.
If you want to use ClassicEditor, you might want to replace <textarea>'s value with editor data on form submission.
const textarea = document.querySelector( '#ck' );
ClassicEditor
.create( textarea )
.then( editor => { window.editor = editor } );
document.getElementById( 'submit' ).onclick = () => {
textarea.value = editor.getData();
}
If you would like to use InlineEditor or BalloonEditor, you need to use <div> instead of <textarea>. You could create a hidden input field and set its value to editor data in a similar fashion as above.
I am using a powermail form inside of a two-column gridelement. While outside of the gridelement, the form works finde, but as I soon as I pack it into a column, it doesn't get rendered in the frontend.
Instead I just get a cache-reference (something like this: '< !--INT_SCRIPT.bac5b8b4bd3180848642d7849f -- >' ). So obviously the problem is somehow related to the content being cached.
So my question is: Where can I get started on fixing this?
How can I tell the gridelement to output rendered content instead of the cache-hash? Or would I need to get into the powermail code?
Here's my grid setup, in case that is any help:
plugin.tx_gridelements_pi1.setup.2col {
outerWrap = <div class="row"> | </div>
outerWrap.preCObject < lib.stdheader
columns.default {
outerWrap = <div class="col col-xs-12 col-sm-6"> | </div>
renderObj =< tt_content
}
}
Have you check in witch order you include the static templates? Gridelements should be the last entry.
And do you have an output when you deleting the grid setup..?
I want to implement ckeditor in laravel 5. I have already installed IvoryCKEditorBundle. but for implementation the docs says to register a new form field type called ckeditor that extends the textarea.
How should I do that?
You shouldn't need a bundle to use CKEditor - you can download the whole package of js files from the ckeditor website. Once you have it, place the folder containing all the downloaded files inside of your js folder
In your view you can now reference the ckeditor.js file:
{{ HTML::script('assets/js/plugins/ckeditor/ckeditor.js') }}
Next include a short ckeditor script, which can include custom configuration (edit config in the js/plugins/ckeditor folder):
<script type="text/javascript">
CKEDITOR.replace( 'messageArea',
{
customConfig : 'config.js',
toolbar : 'simple'
})
</script>
add .ckeditor as a class in your textarea:
<textarea id="messageArea" name="messageArea" rows="7" class="form-control ckeditor" placeholder="Write your message.."></textarea>
if you are posting your content using ajax, use something like this to get the textarea value:
var message = CKEDITOR.instances.messageArea.getData();
Follow this you can do it by 1 minute.
https://github.com/UniSharp/laravel-ckeditor
Thanks.
You can get resources from //cdn.ckeditor.com/4.14.0/standard/ckeditor.js
Download from here and put /public/ckeditor/
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
or If you want to use CDN then above code would be as follow:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
How to Disable/Unset Minimize and Maximize Option which is added by default in Grocery Crud table
I guess this happens in the flexgrid theme (the default theme of grocery).
To achieve this you will to change the default theme of grocery in order to use twitter bootstrap or datatables theme. You will use a function called set_theme for that.
Here is a code sample of how to do this:
//this is a controller method
function offices_management()
{
$crud = new grocery_CRUD();
$crud->set_theme('twitter-bootstrap'); //change the theme here
$crud->set_table('offices');
$crud->set_subject('Office');
$crud->required_fields('city');
$crud->columns('city','country','phone','addressLine1','postalCode');
$output = $crud->render();
$this->_example_output($output);
}
If you need / want to use the default theme, then you will have to do the following steps:
1 - Open the file ../assets/grocery_crud/themes/flexigrid/views/list_template.php using some Editor
(for example Notepad++ ou Sublime Text)
2 - Add comment around the mDiv block, in my case (grocery 1.4.1) it was at the line of number 46
<!-- <div class="mDiv">
<div class="ftitle">
</div>
<div title="<?php echo $this->l('minimize_maximize');?>" class="ptogtitle">
<span></span>
</div>
</div> -->
3 - Save your file and test your application again (be sure to erase your browser cache)
I try to read pics (for a slider) from a folder. I have a marker called ###SLIDER### and my images are in the fileadmin/sliders/ folder.
I would like to achieve the following output as in the template that I bought:
<div class="camera_wrap">
<div data-src="fileadmin/sliders/slider_1.jpg">
<div class="camera-caption fadeIn">Text_1</div>
</div>
<div data-src="fileadmin/sliders/slider_2.jpg">
<div class="camera-caption fadeIn">Text_2</div>
</div>
<div data-src="fileadmin/sliders/slider_3.jpg">
<div class="camera-caption fadeIn">Text_3</div>
</div>
</div>
How can I load the images from a folder using Typoscript and display it this way?
The following code will give you what you want but without the captions. It works in TYPO3 4.5.x. I'm not sure that it works in higher versions as the description of filelist in the current (as of 16/10/2013) manual is somewhat confusing so I don't know if something has changed in the newer versions.
YOUR_MARKER = TEXT
YOUR_MARKER {
filelist = fileadmin/sliders/
split {
token = ,
cObjNum = 1
1 {
current = 1
wrap = <div data-src="fileadmin/sliders/|"></div>
}
}
wrap = <div class="camera_wrap">|</div>
}
NOTE: This is a very simple example that presumes that all the images in the folder are already resized to appropriate dimensions and that all the files within the folder are images. To make it better, the first (1) object of the split might be set to be IMG_RESOURCE. This way it would check that only images are outputted and it would allow you to use GIFBUILDER to resize the images if needed.