I'm trying to add youtube plugin plugin to Ckeditor4, anyway the plugins works fine but the icon in the toolbar is not shwoing at all.
This is the first part of code inside /youtube/plugin.js that define the youtube button on the toolbar:
CKEDITOR.plugins.add('youtube', {
lang: [ 'en', 'bg', 'pt', 'pt-br', 'ja', 'hu', 'it', 'fr', 'tr', 'ru', 'de', 'ar', 'nl', 'pl', 'vi', 'zh', 'el', 'he', 'es', 'nb', 'nn', 'fi', 'et', 'sk', 'cs', 'ko', 'eu' ],
init: function (editor) {
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube', {
allowedContent: 'div{*}(*); iframe{*}[!width,!height,!src,!frameborder,!allowfullscreen]; object param[*]; a[*]; img[*]'
}));
editor.ui.addButton('Youtube', {
label : editor.lang.youtube.button,
toolbar : 'insert',
command : 'youtube',
icon : this.path + 'images/icon.png' //here console.log(this.path) return http://cdn.ckeditor.com/4.9.0/standard/plugins/youtube/
});
Normally when we add a new plugin such as the youtube plugin All we need is to change the path is to add these part of code into configuration:
CKEDITOR.plugins.addExternal('youtube', '../../node_modules/ckeditor-youtube-plugin/youtube/');
$rootScope.ckEditorOptions = { //ckEditorOptions represent my config variable
allowedContent : true,
extraPlugins: 'youtube',
toolbar_full: [
{name: 'youtube', items: ['Youtube']},
],
language: 'fr',
I noticed then, unfortunately the CKEDITOR.plugins.addExternal in the first line is not working right and because that line role is to define our path this.path who should not point to the CDN.
I'm sure that i'm missing something because when I try to edit manually the icon : this.path to icon : http://anylink.png the icon is showed.
Related
I am learning to build a blog using Sanity CMS and React. I am new to Sanity.
I should be able to insert code snippets in my blog posts. So, I have installed the code-input plugin.
According to the link here, after I install the plugin I have to use the following code in my schema types.
I have no idea where do I insert the code.
Please help.
My folder structure is as follows:
sanityblog/blockContent.js
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
lists: [{ title: "Bullet", value: "bullet" }],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url",
},
],
},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: "image",
options: { hotspot: true },
},
],
};
sanityblog/schema.js
// First, we must import the schema creator
import createSchema from "part:#sanity/base/schema-creator";
// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:#sanity/base/schema-type";
// We import object and document schemas
import blockContent from "./blockContent";
import category from "./category";
import post from "./post";
import author from "./author";
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: "default",
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
// The following are document types which will appear
// in the studio.
post,
author,
category,
// When added to this list, object types can be used as
// { type: 'typename' } in other document schemas
blockContent,
]),
});
If you installed the plugin correctly, it's now available as a schema type to be used in any of your other schemas. So, to answer your question, you can put that code anywhere you want code blocks in your Sanity studio. I'd strongly suggest going over the content modelling documentation 😉
Specifically to your question, assuming you use the sanityBlog/blockContent.js field for the content of your posts, you can add it there. Here's how that would look like:
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// ...annotations, styles, lists and marks you already have
},
{
type: "image",
options: { hotspot: true },
},
// Add the code block here 👇
// it'll show up as one of the blocks available in your
// Portable Text Editor
{
type: "code",
title: "Code block",
}
],
};
For specifics on the portable text / rich content field (type: "block"), refer to the block type documentation. If you want to take it one step back, refer to the general block content documentation.
Hope this helps 🙌
Just started using Quill and find it very useful. My projects require plain text editing. Specifically I'm using quill as a form to enter YAML code. The dash, "-", is a key item in YAML. The problem is Quill automatically formats the line as a bullet.
Is there a way to disable automatic bullets?
Kevin
As mentioned in the comments, whitelist things you'll allow in the "formats" option (not the toolbar area)
var editor = new quill("#someElemId", {
modules: {
toolbar: [
'bold',
//{ 'list': 'bullet' },
{ 'indent': '-1'},
{ 'indent': '+1' },
{ 'color': ['black', 'red', 'blue', 'green'] },
'link',
'clean'
]
},
formats : [
"background",
"bold",
"color",
"font",
"code",
"italic",
"link",
"size",
"strike",
"script",
"underline",
"blockquote",
// "header",
"indent",
// "list", <-- commented-out to suppress auto bullets
"align",
"direction",
"code-block",
"formula",
"image",
"video"
],
theme: 'snow', // snow bubble
});
Quill's built in Keyboard module is responsible for auto formatting lists. You can override or disable this behavior by importing and extending the keyboard module like so.
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: undefined,
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
If you still list detection for other input ("* " for example), you can change the regex that the 'list autofill' binding matches like so
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: {
...Keyboard.DEFAULTS.bindings['list autofill'],
prefix: /^\s*?(\d+\.|\*|\[ ?\]|\[x\])$/
},
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
Here is a working example: https://codepen.io/josephdangerstewart/pen/dyNEGoj
Further documentation on Modules can be found on the Quill website: https://quilljs.com/docs/modules/#extending
Looking at https://quilljs.com/docs/formats/ there doesn't appear to be a way to disable a specific format, but you may be able to simply create a list of all formats and remove the list format.
Just write:
modules: {
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}
}
This will ignore automatically ordered lists.
However, you still use bullets manually, by clicking the indent command or using the tab key.
I am using Flowplayer(in Mean js audio streaming project) for RTMP audio streaming with Wowza streaming engine software and using below service of angular js.
app.service('flowPlayerService', ['$cookies','constant',function ($cookies,constant) {
player: null,
currentTitle:'',
constructPlaylist: function (playlist) {
var currentObj = this;
this.player = flowplayer("flashPlayer", "lib/flowplayer/flowplayer-3.2.18.swf", {
playlist:playlist,
onBegin: function(talk){
console.log('clip changed');
},
onFail:function(){
//alert('loading failed');
},
onFinish:function(){
console.log('finisheds');
},
// engine:'html5',
// Specify the location of the RTMP plugin.
plugins: {
rtmp: {
url: 'lib/flowplayer/flowplayer.rtmp-3.2.13.swf',
netConnectionUrl: 'rtmp://10.10.3.11/vod'
},
controls: {
autoHide: 'never',
url: 'lib/flowplayer/flowplayer.controls-3.2.16.swf',
tooltips: {
buttons: true,
fullscreen: false,
pause: 'Continue playing',
},
playlist: true,
fullscreen:false,
},
dock: {
enabled:false,
gap: 5,
autoHide: false
}
},
onMouseOut:function(){
console.log('mouse out');
}
//canvas: {backgroundGradient: 'none'}
});
console.log(this.player);
//this.player = flowplayer();
},
}
While playing single track it is working fine.But when I try to run playlist first track plays file but when first track finished it gives error like:-
VM36229:1 [ERROR] time 13:51:35.968 :: 201, Unable to load stream or clip file, cannot play video: Error #2154, clip: '[Clip] 'mp3:02 Jashn-E-Bahaara-1469775940586.mp3''
below playlist array example:-
[{
url:"mp3:track.mp3",
provider:"rtmp",
title:'track title'
},
{
url:"mp3:track1.mp3",
provider:"rtmp",
title:'track title1'
}
]
please help.
Passing the "duration" to clip objects resolve this issue.
I am trying to display math-equations in a Sencha view component (extends: Ext.Container), using a Ext.Label Component and MathJax JS. (As was suggested answering my other question: Display math symbols in Ext.js / Sencha Touch)
This is the initialization of the view component:
Ext.define('TIQuiz3.view.Question', {
extend: 'Ext.Container',
...
requires: ['Ext.Label', ...],
config: {
fullscreen: true,
...
layout: {
type: 'vbox',
align: 'stretch'
}
},
initialize: function() {
this.callParent();
...
var questionLabel = {
xtype: 'label',
style: {
'border':'1px solid black',
'background':'white'
},
margin: 10,
padding: 10,
html: "<div>Es sei $L = \{011, 01, 11, 100\}$ \"uber dem Alphabet $\Sigma = \{0,1\}$.</div>",
flex: 1
};
...
this.add([...,questionLabel,...]);
}
I have included a local copy of MathJAX in the app.json file:
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "resources/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
"update": "delta"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
],
MathJax indicates to be loaded successfully.
But the output of the label does not display math properly. Instead it simply looks like this:
Es sei $L = {011, 01, 11, 100}$ "uber dem Alphabet $Sigma = {0,1}$.
Is displaying math with MathJax and HTML possible using a Sencha Label Component?
Any advice appreciated!
Thanks,
Thomas
Ok, thanks Peter, that brought me to the solution.
The problem was indeed the rendering of the content after the onload-event of the page.
For these cases MathJax holds a method to invoke the typesetting manually at a later time. So what I did was adding the following afterPainted-Listener to the rendered view component:
listeners : {
order : 'after',
painted : function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}
Note that, as Peter pointed out, in order for the upper to work one has to configure $ to be accepted as math delimiter from MathJax - which is not default behaviour.
Thanks for the advice!
im having troubles using i18next with requireJs and Backbone. I have a folder named 'i18n' where all my resources are listed.
content of i18 folder:
resources-locale_en.js
resources-locale_es.js
resources-locale_fr.js
resources-locale_it.js
content of resources-locale_es.js
{
"john doe": "John Doe",
"my profile": "mi perfil",
"settings": "Ajustes",
"my tasks": "mis tareas",
"red": "rojo",
"orange": "orange"
}
On my require config.js:
.
.
.
//shim
i18n: {
deps: ['jquery']
}
.
.
.
var i18n = require('i18n');
i18n.init({
getAsync: false,
lang: 'en',
debug: true,
fallbackLng: false,
load:'unspecific',
resGetPath: "__ns_____lng__.js",
ns: {
namespaces: ['i18n/resources-locale'],
defaultNs: 'i18n/resources-locale'
}
}).done(function() {
new AppRouter({});
Backbone.history.start({
pushState: true
});
})
When DOM is loaded i run:
$("[data-i18n]").i18n();
but just list elements that content data-i18n, not transform anything
[ <span data-i18n="My Profile"></span>
, <span data-i18n="My Tasks"></span>
, <span data-i18n="Lock"></span>
, <span data-i18n="Log Out"></span>
, <span data-i18n="User Profile"></span>
, <span data-i18n="Dashboard"></span
]
What im doing wrong?